Skip to content

pyvelm v0.12.0

Release date: 2026-05-26

A first-class Code field with VSCode-style syntax highlighting for ten languages, and a shared CodeMirror layer the mail-template HTML source now reuses.

Highlights

Code field

from pyvelm import BaseModel, Code

class Snippet(BaseModel):
    _name = "ops.snippet"
    body = Code(language="python")
  • Subclass of Text; stored as text, never sanitized (it's operator source, not markup destined for the DOM).
  • Declared language is validated at field-construction time. Supported: text, python, javascript, typescript, json, html, css, sql, xml, markdown.
  • Per-view override: field("body", language="sql"). Text fields also accept widget="code", language="…" without changing the model class.
  • Defaults to full-width on the form grid (same wide-default branch as Html), so embedded editors are not squashed.

Code editor widget

npm run build:code-editor → pyvelm/static/dist/code_editor.js (loaded before Alpine in layouts/main.html).

  • CodeMirror 6 with per-language packs (@codemirror/lang-*).
  • VSCode theme (@uiw/codemirror-theme-vscode) — picks dark/light from the surrounding <html class="dark"> and re-themes live when the user flips the global toggle (no reload).
  • Line numbers, fold gutter, bracket matching, auto-close brackets, selection-match highlighting, search keymap, tab indents.
  • Format button (when the active language has a formatter) and Copy chip in the header.
  • Display mode mounts a read-only editor so values still get full highlighting + line numbers — not a dumb <pre>.

Mail-template HTML source uses the same stack

The mail editor's HTML source tab now reuses the same CodeMirror layer as the Code field. You get the VSCode theme, the Format button, the Copy chip, and a language toggle for the source: switch between html and jinja to get the highlighting that fits what you're writing. The Jinja variable picker and Ctrl+Space autocomplete still work in both modes.

Upgrade

pip install -U pyvelm==0.12.0
  1. pyvelm db migrate — applies vellum_demo 0.4.0 → 0.5.0 if you've installed the demo module (adds vellum_demo_note.snippet).
  2. Apps → Sync (or restart your app server) so views reload.
  3. Rebuild static assets if you hack the editor locally:

npm install
npm run build       # builds CSS + mail editor + code editor bundles
4. Hard-refresh the browser so the new code_editor.js bundle loads.

Also in this release

  • Docs CI — .github/workflows/docs.yml now triggers on v* tags instead of every main push.
  • Shared editor module — pyvelm/static/src/codemirror_field.js centralises the CodeMirror configuration (extensions, theme, formatter, language switching) so the Code field and the mail HTML source stay in lockstep.