Synapse Note
A WYSIWYG markdown editor for VS Code with native theming, wiki-link navigation, and live previews for diagrams, math, and Excalidraw drawings.
A Synapse Note opens on demand — no separate preview pane, no syntax tags cluttering your prose, and the plain text editor stays available whenever you need it (for example, to view a git diff).
Quick start
- Install the extension.
- Right-click any
.md file in the Explorer and pick Open with Synapse Note. Already have the file open in the text editor? Use the Open with Synapse Note button in the editor tab bar, or run it from the command palette.
- To flip a Synapse Note back to the plain text editor — for git diff markers, search decorations, or quick raw-markdown edits — run Synapse Note: Open as Text Editor.
- Want every
.md to open in Synapse Note by default? See Settings below.
- Run Synapse Note: Show Features for an in-app feature tour — every page is itself a Synapse Note, demonstrating the feature it describes.
- Run Synapse Note: Show Claude Rules to open a rules file you can drop into your workspace (
.claude/rules/synapse-note-syntax.md for Claude Code, .cursor/rules/ for Cursor) so your AI assistant writes Markdown that renders correctly here.
Features
Writing
- Bold, italic, strike,
inline code, ==highlight==, H~2~O subscript, E=mc^2^ superscript
- Floating selection toolbar for one-click formatting
- Slash menu (
/) for inserting any block
Structure
- Headings (H1–H6) with an outline panel
- Lists, ordered lists, task lists with
- [x] checkboxes
- Blockquotes (nestable), tables with row/column controls, horizontal rules
Code
- Fenced code blocks with Shiki syntax highlighting (100+ languages)
- Block decorators:
title="hello.py", linenums, hl_lines="2 3"
- Click a block to edit in CodeMirror with language-aware indent and bracket matching
Math
- Inline
$E = mc^2$ and block $$\int...$$ math via KaTeX
- Click any expression to edit; live error diagnostics
Admonitions
- Obsidian-style callout syntax:
> [!NOTE], > [!WARNING], > [!TIP], etc. — 11 types
Diagrams
- Mermaid — flowcharts, sequence, state, ER, Gantt, pie, sankey, mindmaps
- Excalidraw — embed
.excalidraw files with pan/zoom and live reload
Wiki-links
- Type
[[ for an autocompleting note picker over your workspace
[[Note#Heading]] for deep links, [[Note|alias]] for custom labels- Rename a note → optionally rewrite every link to it (configurable)
Frontmatter
- YAML metadata block at the top of any note, edited as inline rows
Editor chrome
- Top-right floating toolbar — outline, find, line-number toggle, markdown preview, reload from disk
- Outline panel — live list of every heading; click to scroll and place the caret
- Line-number gutter (toggleable) — each top-level block counts as one line; list items each get their own number
- Find in document (
Ctrl+F / Cmd+F) — highlighted matches, case toggle, prev/next cycling, Esc to close
- Markdown preview drawer — live-serialized source of the current document, one-click copy
- Reload from disk — discard in-editor edits; confirm modal guards against accidents
- Notion-style drag handle on block hover — click to select, drag to reorder.
Alt+↑ / Alt+↓ work as a keyboard equivalent
- Tab / Shift+Tab nest inside lists; paragraphs inside a list item indent too
Navigation
- Mouse side-buttons (X1 / X2) and
Alt+Left / Alt+Right walk back/forward through recently-viewed editors — same history VS Code uses natively
- External disk changes (edits from
git checkout, Claude CLI, another editor, etc.) sync into the open Synapse Note within ~100 ms, or on refocus
Settings
| Setting |
Default |
Description |
synapseNote.updateLinksOnRename |
ask |
When a .md file is renamed, how to handle wiki-links pointing at it. Values: ask, always, never. |
synapseNote.showLineNumbers |
true |
Show line numbers in the editor gutter. Each top-level block and each list item counts as one line. |
synapseNote.spellCheck.enabled |
true |
Underline misspellings inside the WYSIWYG editor, sourced from the Code Spell Checker extension. No-op if that extension isn't installed. |
synapseNote.autoSave |
true |
Persist edits to disk automatically after the typing-debounce window. Required for safe collaboration with AI agents (e.g. Claude Code) that read the file from disk while you edit. Disable to fall back to VS Code's own Files: Auto Save setting. |
To make Synapse Note the default editor for every .md file — skipping the right-click step — add this to your settings.json:
"workbench.editorAssociations": {
"*.md": "synapse-note.editor"
}
Git diff views, search result previews, and other virtual-document URIs always fall back to the plain text editor, so diff markers and search decorations keep working even with this setting on.
Tech stack
BlockNote (ProseMirror under the hood) · React 19 · Mantine · Shiki 3 · CodeMirror 6 · KaTeX 0.16 · Mermaid 11 · Excalidraw 0.18 · Vite · esbuild
Status
1.0.0 (public beta) — feature-complete rewrite of the editor on React + BlockNote. The editor is daily-driver usable; remaining work is polish and stabilization before the beta label comes off.
| |
