Markdown editor with a live mindmap preview. Edit on either side — they stay in sync.
- Bidirectional sync between a CodeMirror 6 markdown editor and a mind-elixir mindmap.
- Surgical markdown edits — operations from the mindmap (rename, add, remove, move, fold) translate to minimal line patches via markmap-lib source maps, preserving frontmatter, inline formatting, code blocks, tables and images that surround edited nodes.
- markmap format: headings, lists, multi-line items, fold comments (
<!-- markmap: fold -->), checkboxes, links, frontmatter. - Hierarchical arrow navigation with spatial fallback and per-parent last-child memory.
- Light / dark / auto theme kept in sync across editor, mindmap and chrome.
- Resizable split view with persisted ratio, three view modes, full document persisted in
localStorage.
| Key | Action |
|---|---|
| Tab | Add child |
| Shift + Tab | Insert sibling before |
| Enter | Insert sibling after |
| Shift + Enter | Insert parent |
| Backspace | Edit current node |
| Shift + Backspace | Delete node |
| Letter / digit | Replace text and start editing |
| Esc | Cancel edit |
| Space | Collapse / expand |
| Arrows | Navigate (siblings first, then nearest spatially) |
| Cmd/Ctrl + Arrows | Move the node itself |
| Cmd/Ctrl + Z / Shift + Z | Undo / redo |
| F1 | Fit map to view |
pnpm install
pnpm devOpens on http://localhost:5174/. Production build with pnpm build.
- Vue 3 + Vite + TypeScript
- Pinia for state and persistence
- CodeMirror 6 (
@codemirror/lang-markdown,@codemirror/theme-one-dark) mind-elixirfor the mindmap canvasmarkmap-lib(withpluginSourceLines) for parsing markdown with accurate line rangesmarkdown-itfor syntax highlighting and tokens