Note Workbench — Obsidian-style Editor

Read, edit and connect Markdown notes inside VS Code.

简体中文 · Install · Examples · Issues

Obsidian-style Live Preview, editable tables and a note graph in your existing workspace. Mix Markdown with supported HTML, preview the block you are editing, and keep your notes in ordinary .md files.

Phase 1 feature development is complete under the agreed scope. Follow-up improvements and remaining validation are tracked in Phase 1 scope.

See it in action

Edit with a live block preview

Click into a block to edit its source while a floating preview shows the result. Other blocks keep their rendered appearance.

Try example/Welcome.md.

Work directly in tables

Edit cells, add or remove rows and columns, and drag handles to reorder ordinary Markdown and HTML tables.

Try example/Tables.md.

Follow the connections

Explore global and local graphs, navigate notes, and find backlinks with source context.

Try the linked notes in example/. These screenshots use purpose-written, fictional content in the extension's local webview preview. They contain no customer documents and do not show the VS Code window chrome.

Install and get started

Requires VS Code 1.100.0+. Using the packaged extension does not require Node.js, npm, Obsidian or Obsidian Visualizer.

1. Open Extensions and search for @id:jiaque.note-workbench.
2. Install Note Workbench — Obsidian-style Editor by jiaque.
3. Open your notes folder, then open a .md file.
4. Click the Note Workbench activity-bar icon to open the graph.

You can also open the Marketplace listing or run:

code --install-extension jiaque.note-workbench

The extension registers as a default Markdown editor candidate. VS Code preserves an existing editor preference: right-click the file tab and choose Reopen Editor With → Configure default editor → Note Workbench to change it. Use ⋯ → Edit in VS Code for the native source editor.

For a walkthrough, download or clone this repository, open the entire example folder in VS Code, and start with Welcome.md. Wiki links and embeds work in the extension, not GitHub's Markdown viewer.

Core features

Writing helpers

• While editing, the floating preview includes formatting controls (headings, bold, italic, strikethrough, code, links, highlighting, lists and quotes). Selected source text is highlighted in the preview; a thin caret follows the source caret. HTML attributes and graphical objects use an outline when a text position cannot be mapped. Table cells have a compact selection toolbar.
• Hover between top-level blocks to reveal +. Left-click inserts and focuses an ordinary paragraph, immediately opening its floating preview when enabled. Right-click + opens a small menu for a table or table of contents. Moving away, scrolling, Escape or clicking elsewhere closes the menu.
• In Live Preview, hover a block to reveal a faint − on its right. Hover the minus to outline the deletion target in pale red; click to delete the whole block. Use the Undo notification or Ctrl+Z to restore it. Deleting a heading keeps the following content; deleting a callout or table removes the entire container.
• Type a local image/file destination in ![](https://github.com/jiaque/note-workbench/raw/HEAD/...) or [](https://github.com/jiaque/note-workbench/blob/HEAD/...) to complete paths relative to the note. Folder entries end in /; Chinese filenames and spaces are supported. Select text and paste an HTTP(S) URL to create a link.
• A generated table of contents defaults to H2–H3 and updates after editing pauses. Hover over it and choose ⋯ to change heading levels, turn automatic updates off, refresh or delete it. Note actions → Update table of contents refreshes managed directories manually. Add <!-- nw:toc-ignore --> at the end of a heading to exclude it. Code blocks and nested headings are excluded.

Generated TOCs are ordinary Markdown links between <!-- nw:toc ... --> and <!-- /nw:toc --> comments. Handwritten navigation is never rewritten. Links use Note Workbench's heading identifiers; other Markdown renderers can use different anchor rules. Do not remove the comments if you want automatic updates.

Settings noteWorkbench.editor.formatToolbar.enabled, noteWorkbench.editor.previewSelection.enabled, and noteWorkbench.editor.toc.autoUpdate default to enabled. Preview highlights and editing controls are not written into Markdown or PDF. Try Writing helpers.

Reading and Live Preview share the document and table layout. Source remains the stored representation: table edits do not convert the whole note to another format.

SVG charts can declare data-nw-tip="Label: value" on shapes for plain-text hover tips. See SVG tooltip examples. SVG remains an isolated image; tooltip text never runs scripts. Fixed circles, rectangles, polygons and paths are supported; moving/clipped geometry is outside this feature's scope.

For chart-style cards, use data-nw-tip-title plus data-nw-tip-rows (JSON rows with label, value and optional hex color). Cards show a bold title, colored markers and right-aligned values. Transparent full-height category bands work for line/column/stacked charts; horizontal bars use full-width bands. See the same example's Axis bands section. No automatic totals or grouping are performed.

The Tags panel shares the graph's indexing scope and supports filtering. Rename updates are enabled by default via noteWorkbench.notes.updateLinksOnRename; they preserve aliases/fragments and skip ambiguous links. They apply to renames inside VS Code, not changes made by external tools.

Everyday actions

The ⋯ menu contains view switching, table insertion, properties, PDF export, motion controls and saving. Formatting buttons are intentionally omitted.

Leaving an edited block syncs changes to the VS Code document. Writing to disk follows Auto Save or explicit saving. External conflicts expose compare, draft recovery and external-version actions in the note menu.

Use ordinary Markdown syntax for headings, quotes, inline code and lists; more one-step formatting shortcuts are deferred. Missing-note links offer a creation choice before creating a file.

Find supports case matching, result counts and highlighting in all three views. Live Preview and Source search the full Markdown source, including syntax; Reading searches rendered text and unfolds matching content. Switching views retains the query but can change the result count. Search does not modify the note.

Settings

Search for noteWorkbench in Settings. Options appear in this order:

Auto uses Simplified Chinese for Chinese VS Code locales and English for other locales. Settings descriptions, command names and the sidebar title always follow VS Code's language, independently of the extension override. Note content is never translated.

CSS motion and SVG

Enable motion explicitly on a block:

<div data-nw-effect="progress-striped"
     style="--nw-progress:60%;--nw-color:#2563eb;">
  Example plan: 60% complete
</div>

There are 34 presets across continuous, entrance and hover effects. Use ⋯ → Motion controls to pause/resume or replay SVG. Disabling motion retains static content and progress values.

Write SVG directly in a note: supported CSS/SMIL animations play in an isolated image after filtering. SVG scripts and interactive controls inside the image are not supported. PDF uses the static base appearance.

Try example/Motion.md. Full parameters and boundaries: motion design and implementation notes (Chinese).

Scope and limitations

• Tables: merged, nested/irregular HTML tables and tables inside mixed HTML containers use source editing. Visual merge/split, cross-table paste and column-width dragging are not included.
• HTML: tags, styles and URLs are filtered for display. Arbitrary scripts do not run; Markdown is not recursively parsed inside every HTML container.
• PDF: needs local Chrome/Edge. Attached PDFs and audio/video become text notices, not merged pages or playable media. Check unusually wide tables and custom print layouts.
• Workspace: Windows desktop with a local folder is the primary target. Large-file optimization, multi-root/remote/web validation and query features are outside the completed phase.
• Validation: automated and host checks cover specific scenarios. Full real-IME, multi-window recovery, keyboard/accessibility, theme/zoom and performance validation remain open.

See Phase 1 scope and follow-up work. This is not a promise of compatibility with every Obsidian plugin or theme.

Develop locally

Development requires Node.js 22+ and npm.

npm ci
npm run typecheck
npm test
npm run build

Open the repository in VS Code and press F5 to launch the development host. Its default workspace uses synthetic test fixtures; the public walkthrough is in example/.

npm run test:extension
npm run package

Packaging creates artifacts/note-workbench-<version>.vsix. Install through Extensions → ⋯ → Install from VSIX. Packaging does not publish or push. The formal ID is jiaque.note-workbench; local-development.note-workbench is the separate maintenance identity. Avoid enabling both for the same workflow.

When the matching development version is already installed, run npm run build, then npm run sync:dev, and reload the VS Code window. Sync copies and verifies the entire build, including hashed chunks; copying only editor.js can produce a blank editor. Use npm run sync:dev -- --check to verify without copying. Manifest/version changes still require installing an updated development package.

Host tests use an isolated profile. Set NOTE_WORKBENCH_VSCODE to an existing VS Code executable to avoid the default runtime download. npm run preview is a development-only webview preview: edits stay in memory and do not save the example file. See screenshot reproduction.

Feedback and license

Report an issue with the VS Code/extension versions, a small reproducible note, and expected versus actual behavior. Remove private information before sharing.

Project code uses Apache-2.0. See NOTICE and third-party notices. References: development design, format compatibility, changelog.

Note Workbench is independent, not an official Obsidian product and not endorsed by Obsidian. Obsidian and other trademarks belong to their respective owners.