Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Vellum Markdown EditorNew to Visual Studio Code? Get it now.
Vellum Markdown Editor

Vellum Markdown Editor

DreamLab AI

|
1 install
| (0) | Free
A live WYSIWYG Markdown editor for VS Code with Pele-rendered diagrams and hardened webviews. A modified version of Obsidian-style Markdown Live Editor by Thinh Vu.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Vellum: a folded ivory V with an amber corner on ink navy

Vellum Markdown Editor

DreamLab AI CI Version License: GPL-3.0-only VS Code Marketplace GitHub stars

Maintained by DreamLab AI and John O’Hare.

The Marketplace publisher ID is dreamlab-ai, with dreamlab-ai.com as its homepage. Domain verification is a separate Microsoft review; see publishing and verification.

Install from the Marketplace · Download a VSIX · Visual walkthrough · Feature test report · Changelog · Report an issue

A live, what-you-see-is-what-you-get Markdown editor for VS Code, with diagrams rendered by Pele and webviews locked down by a strict content security policy.

Vellum is a modified version of Obsidian-style Markdown Live Editor by Thinh Vu, released under the same licence, GPL-3.0. See Attribution.

Preview

The live editor and notes sidebar in VS Code, with task lists, a table, a Pele-rendered flowchart and inline maths:

Vellum running in VS Code: notes sidebar beside a rendered project notebook with tasks, a table, a flowchart and maths.

See the same note in source mode

Switch between rendered Markdown and the built-in CodeMirror source editor using the Toggle Source Mode button in the toolbar.

Vellum source mode in VS Code, showing the Markdown behind the project notebook, including its Mermaid diagram.

These screenshots show the current 0.4.0 build in a VS Code Extension Development Host on Linux. Copy the demo workspace to try the same content, or follow the illustrated flows for editing, backlinks, renaming notes, templates, selection references, and PDF export.

See selection handoff to the normal VS Code editor

Select a paragraph, then run Markdown Live: Reveal Selection in Text Editor to open the same source lines beside Vellum.

Selected rendered paragraph beside its selected Markdown source line in VS Code.

The installed 0.4.0 extension opening an existing Obsidian knowledge vault in VS Code. The Metaverse Entity Schema Archive.md note contains a fenced mermaid class diagram, rendered here by Pele 1.12.0:

Vellum in the knowledge vault: the Explorer beside a Pele-rendered Mermaid class diagram showing metaverse entities, agents, scenes, assets, and their relationships.

What it does

  • Live editing. Edit rendered Markdown directly (Milkdown), or switch to a source view (CodeMirror 6) that stays in sync.
  • Diagrams. Fenced mermaid blocks render in place and follow your VS Code theme. A syntax error shows the line and a caret under the fault.
  • Maths, tables and GitHub-flavoured Markdown. KaTeX, a table context menu, admonitions, task lists and YAML front matter.
  • Slash commands and templates. Type / for a quick-insert menu; keep your own templates in a folder.
  • Images. Paste or drop an image to save it under a configured directory; rename it from the context menu.
  • Wikilinks and backlinks. [[Note]] links that resolve by name, a Backlinks panel, and links that follow a note when it is renamed. See Links and backlinks.
  • Outline. A fly-out outline tracks headings.
  • Sidebar. Recent notes, the whole workspace, and bookmarks.
  • PDF export. Paginated preview with header, footer, page numbers and an optional contents page.
  • Works with Claude Code. Send a selection to Claude as a file reference with its line range, keep your place when Claude edits the note, and hand Claude a note's backlinks. Agents can query the link graph themselves with vellum-graph. See Working with Claude Code.

What differs from upstream

Area Upstream 0.1.4 Vellum
Diagram renderer Mermaid 10 and 11, both bundled Pele 1.12.0: no dependencies, synchronous, no eval
Editor bundle 7.75 MB 2.26 MB
Sidebar webview No content security policy; a value from a workspace file reached an inline handler Nonce policy, no inline handlers, all values escaped
PDF export Loaded a script from a CDN, unpinned Pinned copy, checked by SHA-256 at build, bundled
Editor webview 'unsafe-eval'; Google Fonts fetched on every open Neither
Raw HTML and diagram output Assigned to innerHTML Sanitised, attached as nodes
npm advisories 28, one critical 19, none critical; one low-severity issue ships

The full review, including what is not fixed, is in SECURITY-REVIEW.md.

Diagram compatibility

Mermaid stays the source syntax, so your documents do not change. Pele targets Mermaid 12.1 syntax and lays diagrams out with its own engine, so a diagram can look different from Mermaid's rendering. Mermaid themes, %%{init}%% directives and click handlers are not honoured.

Links and backlinks

Vellum links notes the way Obsidian does, and stores them as plain [[wikilinks]] in the file.

  • Write a link. Type [[ to pick a note, or type a name that does not exist yet. Typing a closing ]] by hand works too. [[Note#Heading]], [[Note|shown text]] and ![[Note]] are kept exactly as written.
  • Follow a link. Click it. A link to a note that does not exist is shown dashed, and clicking it creates the note, in markdownLive.defaultNoteDirectory if set, otherwise beside the note you are in.
  • Resolution. [[Note]] finds Note.md anywhere in the workspace, ignoring case. [[folder/Note]] narrows it. When two notes share a name, Vellum writes the shortest path that is unambiguous.
  • Backlinks panel. In the Markdown Live sidebar. For the note in focus it lists linked mentions (every line in another note that links here, wikilink or Markdown link) and unlinked mentions (its name appearing as plain text), with a button to turn a mention into a link.
  • Rename safely. Rename or move a note or a folder in the Explorer and every link to it is rewritten in the same step, so one undo reverts both. Headings and shown text are kept; links that still resolve are left alone. Turn this off with markdownLive.updateLinksOnRename.
  • In the plain text editor too. Wikilinks are clickable and [[ completes note names.

Limits: ![[Note]] renders as a link, not an inline copy of the note. Heading links open the note but do not scroll to the heading. There is no hover preview and no block references. The note graph shows one note's neighbourhood, not the whole vault. A wikilink is edited by deleting and retyping it, or in source mode. Inside a table write the pipe as \|. Links resolve within one workspace folder.

Note graph

Markdown Live: Show Note Graph opens a panel beside the editor that draws the note in focus and the notes linked to it, in either direction. Run it from the Command Palette, the Backlinks panel's title bar or the editor's … menu. Nothing is loaded, compiled or indexed for the graph until the command runs, and there is no setting to enable.

The installed Note Graph in VS Code, centred on Artificial Intelligence with 118 notes, two missing targets and 400 links

  • It follows the note in focus. Switch notes and the graph recentres. It is rebuilt from the same link index as the Backlinks panel whenever that index changes, so links typed, saved, renamed or deleted reach it, and the layout is asked to keep notes already on screen where they are. Tests cover the rebuild; the effect has not been watched in VS Code. A panel hidden behind another tab does no work until it is shown again.
  • It is bounded. It opens one link away from the note. Links away widens that to two or three, and markdownLive.graph.depth sets where it starts. At most 150 notes are drawn; when more are in range the panel says how many are hidden and Show more doubles the limit, up to 1,000. Nearer notes are kept first.
  • Open a note by double-clicking it, by selecting it (click, arrow keys or the search box) and pressing Enter, or from the Notes in this graph list, which is there for keyboard and screen-reader use. It opens where the current note is and takes focus; the graph then recentres on it.
  • Missing notes are drawn as grey diamonds. A [[link]] to a note that does not exist yet is shown, since it is part of what the note says, but it is not a file and cannot be opened from the graph. Follow the link in the note to create it.
  • Drag a note to move it and its neighbours follow. Drag the background to pan, scroll to zoom, Fit or Home to see everything.

The graph shows navigation links only: wikilinks and relative Markdown links in a note's body. Links in code and in YAML front matter are not included, as elsewhere in Vellum, so it is not an ontology view. Links resolve within one workspace folder, so the graph never crosses folders.

The panel uses two components shared with other projects, both bundled in the extension and verified by SHA-256 at build time: the Canvas renderer and layout driver from Ontomark, which Ontomark Obsidian also uses, and the force layout from vowl-wasm, which is Rust compiled to WebAssembly. The layout runs in short slices in the panel itself, with no worker and no network request. If the WebAssembly module cannot start, the graph is still drawn and the panel says the notes are not arranged. ADR-VEL-001 records the design.

The installed extension was checked in desktop VS Code 1.106.3 on Linux: the Command Palette opened the graph beside the live editor in an existing knowledge vault, with 118 notes, two missing targets and 400 links. The graph was then maximised for the screenshot above. The page also ran in Chrome under its real content security policy with a stand-in for the VS Code API, covering dragging, search and note activation. Desktop interaction coverage remains partial; vscode.dev, multi-root workspaces and graphs near 1,000 notes remain untested. docs/TESTING.md has the detail.

Working with Claude Code

Vellum is a custom editor. While it has focus VS Code has no active text editor, so an assistant that reads "the open file and the selection" sees neither. Vellum closes that gap for the Claude Code extension (anthropic.claude-code); the same commands work with any assistant that accepts text.

What you want Command Shortcut
Give Claude the selection Send Selection to AI Assistant Ctrl + Shift + L (Cmd + Shift + L)
See the same lines in a normal text editor Reveal Selection in Text Editor Ctrl + Alt + Shift + T (Cmd + Ctrl + Shift + T)
Paste a reference yourself Copy @-Reference to Selection —
Give Claude a note and everything linked to it Copy Note and Its Links as AI Context button on the Backlinks panel
  • Selections become references. A selection in the rendered note is mapped back to its lines in the Markdown file and written as @notes/plan.md#18-19, the form Claude's prompt box accepts. With nothing selected the reference is the whole file. The reference is always copied to the clipboard as well.
  • How it reaches Claude is set by markdownLive.claudeDelivery:
    • selection (default): the note opens in a text editor beside Vellum with those lines selected. Claude attaches the open file and selection by itself, and if Claude's "Insert @-Mention Reference" command is available Vellum runs it.
    • newTab: a new Claude tab opens with the reference pre-filled, not sent.
    • clipboard: copy only.
  • Claude's edits appear in place. When Claude, or anything else, changes the file, the note updates and the cursor and scroll position stay where they were. Vellum does not write the file back after an outside change, so Claude's formatting is kept and the note is not marked as modified. Upstream re-saved the file in its own formatting about 200 ms after every outside change, which could make an assistant's next edit fail with "file has changed".
  • Link context. Copy Note and Its Links as AI Context copies the note, the notes that link to it (with line numbers), the notes it links to and any links to missing notes, as @-references. With Claude installed it offers to open them in a new Claude tab.
  • Other assistants. markdownLive.aiTarget chooses claude, antigravity, chat (the built-in chat) or clipboard; auto picks the first that is installed.

Limits: with nothing selected and Vellum focused, Claude does not see which note is open; use Reveal or Send. While Claude is showing a proposed change to a note as a diff, opening that note in Vellum shows a notice in place of the editor until the diff is closed. Line mapping is exact in source view and matched by content in the rendered view, so a selection inside one of two identical lines can land on the nearer one.

The link graph from a terminal (vellum-graph)

The commands above push context from Vellum to Claude. Nothing goes the other way: Vellum is a web extension with no server, so Claude Code (or any agent or script) cannot query the running extension. vellum-graph fills that gap. It reads the notes under a folder from disk and answers with the extension's own parser and resolver, so its results match the Backlinks panel.

npm run graph -- backlinks Project            # who links here, as @path#line references
npm run graph -- context notes/plan.md        # the "Copy Note and Its Links as AI Context" text
npm run graph -- rename Project.md archive/Roadmap.md          # dry run: moves and link edits
npm run graph -- rename Project.md archive/Roadmap.md --apply  # rewrite links, then move
npm run graph -- graph --root ~/notes --json  # every edge, for other tools
npm run graph -- neighbours Project --depth 2 # what the Note Graph draws for a note
Command Answers
notes Every note the extension would index
links <note> Links in a note and where each resolves
backlinks <note> Lines in other notes that link to this one (wikilinks and Markdown links)
mentions <note> The note's name as plain text elsewhere (unlinked mentions)
unresolved [note] Wikilinks to notes that do not exist
context <note> The link-context text, exactly as the Backlinks panel copies it
resolve <target> [--from <note>] The note [[target]] leads to, written from --from
linktext <note> The shortest unambiguous wikilink for a note
graph Every note-to-note edge
neighbours <note> [--depth N] [--max N] The bounded neighbourhood the Note Graph draws: notes within N links (1 to 3), at most --max (10 to 1,000), and whether the bound cut it short
orphans Notes with no links in or out
rename <from> <to> [--apply] Link edits that keep links working after moving a note or folder
  • A <note> is a path relative to the root (notes/plan.md) or anything a wikilink could say (plan, notes/plan).
  • --root DIR is the folder treated as the workspace folder; it defaults to the current directory. Links resolve within it, as in the extension.
  • --json prints machine-readable output: lines are 1-based, start/end columns 0-based.
  • Exit status is 0 on success, 1 when a note or target is not found, 2 on a usage error.
  • Rename outside VS Code with rename --apply. VS Code only updates links for renames made in its own Explorer. git mv, mv or an agent's file tools leave the links broken. --apply refuses to overwrite existing files or dangling symlinks, rejects moving a folder inside itself, and normalises backslash paths before applying edits. It writes the link edits first and moves the file second, so commit first or review with the dry run.

The CLI bundles to out/vellum-graph.mjs on each run. That file is gitignored and not shipped in the VSIX. It reads files only, so unsaved edits in an open editor are not seen, and symlinked folders are not followed.

Status

Vellum is available on the VS Code Marketplace. Version 0.4.1 adds the Note Graph and headless graph CLI; PUBLISHING.md records the release process.

The current build was exercised in desktop VS Code 1.106.3 on Linux: live/source editing and saving, backlinks and mention linking, missing-note creation, Explorer rename link updates, templates, selection references and reveal, link context, outside file changes, and print export. All 79 automated tests pass, including the headless vellum-graph queries. The test report distinguishes desktop checks from unit coverage and lists remaining gaps.

PDF export produces an A4 document, but dark-theme colours currently give pale text on white pages. Actual Claude Code delivery and native image clipboard transfer remain unverified in this run; see the report before relying on those flows.

Install

Install Vellum Markdown Editor from the VS Code Marketplace, or run:

code --install-extension dreamlab-ai.vellum-markdown-editor

For manual installation, download the .vsix from the latest GitHub release and run Extensions: Install from VSIX... in VS Code.

Build from source

Requires Node 20 or later.

npm ci --ignore-scripts      # install scripts are not needed to build
npm run test:unit            # 79 tests
npm run package              # verifies the pinned assets, then bundles into dist/
npx @vscode/vsce package     # produces a .vsix
code --install-extension vellum-markdown-editor-*.vsix

npm run package fails if Pele or Paged.js does not match its pinned SHA-256 (scripts/verify-pins.mjs).

After replacing an installed build, run Developer: Reload Window from the Command Palette. To reinstall the same version, add --force to code --install-extension.

Vellum keeps upstream's command and setting identifiers (markdown-live.*, markdownLive.*), so existing settings and keybindings carry over. For the same reason, do not install it alongside the upstream extension: the two would register the same commands and editor.

Use

Open a .md file, then any of:

  1. Ctrl + Alt + Shift + M (Cmd + Ctrl + Shift + M on macOS).
  2. Right-click the file in the Explorer and choose Open in Markdown Live Editor.
  3. Click the pencil icon at the top right of the text editor.

For a guided smoke check, copy the demo workspace and follow the screenshot walkthrough. It covers editing and saving, source mode, linked notes, backlinks, safe renames, templates, slash commands, assistant references, and export. The feature test report records the observed results.

Command macOS Windows and Linux
Open live editor Cmd + Ctrl + Shift + M Ctrl + Alt + Shift + M
Send selection to AI assistant Cmd + Shift + L Ctrl + Shift + L
Reveal selection in text editor Cmd + Ctrl + Shift + T Ctrl + Alt + Shift + T
Insert link Cmd + K Ctrl + K
Insert table Cmd + Option + T Ctrl + Shift + T
Insert code block Cmd + Option + C Ctrl + Shift + C
Bold Cmd + Option + B Ctrl + Shift + B
Italic Cmd + I Ctrl + I
Heading 1 to 6 Cmd + Option + 1-6 Ctrl + Shift + 1-6

Settings

Setting Default Purpose
markdownLive.language en Interface language (en or vi)
markdownLive.fontFamily sans-serif sans-serif or serif; local fonts only
markdownLive.tableDisplayMode scroll scroll or wrap for wide tables
markdownLive.enableSlashCommand true The / menu
markdownLive.defaultNoteDirectory empty Where new notes are created
markdownLive.sidebarScanDirectory empty Folder the sidebar lists
markdownLive.templateFolder empty Folder of note templates
markdownLive.imageDirectory assets/images Where pasted images are saved
markdownLive.imagePublicPath empty Prefix for image paths that start with /
markdownLive.printHeaderFormat {title} PDF header; accepts front-matter variables
markdownLive.printFooterFormat {signature} PDF footer
markdownLive.printPageNumberFormat {page} PDF page numbering
markdownLive.printFontFamily empty Font for PDF export
markdownLive.printAutoTOC false Insert a contents page when exporting
markdownLive.updateLinksOnRename true Rewrite links when a note or folder is renamed or moved
markdownLive.aiTarget auto Assistant for Send Selection: auto, claude, antigravity, chat, clipboard
markdownLive.claudeDelivery selection How a selection reaches Claude Code: selection, newTab, clipboard
markdownLive.graph.depth 1 How many links away from the note the Note Graph shows when it opens (1 to 3)

Development plans

The shared graph ADR and implementation handoff record how the note graph shares its renderer and layout with Ontomark, and what is still planned: the remaining desktop interaction checks, measurements on large graphs, and compatibility with typed Ontomark vaults before Vellum claims to edit them. The Note Graph is included from 0.4.1; the 0.4.0 Marketplace release does not contain it.

Privacy

Vellum sends no telemetry and makes no network request of its own. A note that references an image on a remote server will still load that image when opened, as Markdown images do.

Attribution and licence

Vellum Markdown Editor is free software under the GNU General Public License, version 3 (LICENSE). It comes with no warranty.

  • It is a modified version of Obsidian-style Markdown Live Editor 0.1.4, © 2026 Thinh Vu (thinh-vu/vscode-markdown-editor, commit b90af69), licensed GPL-3.0. Upstream's own README is kept as README.upstream.md.
  • Modifications © 2026 DreamLab AI Consulting Ltd, first made on 14 November 2026 and listed in CHANGELOG.md and SECURITY-REVIEW.md.
  • Third-party components and their licences are listed in NOTICE.md.

Vellum is not affiliated with or endorsed by Thinh Vu, Vnstock, Obsidian or Dynalist Inc. "Obsidian" and "Mermaid" are names of their respective owners, used here only to describe compatibility. Security fixes are offered back to upstream; please report problems with this version in this repository, not upstream.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft