A beautiful WYSIWYG Markdown editor for VS Code, powered by Tiptap
Features · Usage · Configuration · Themes · Export
Full WYSIWYG markdown editing with Tiptap + @tiptap/markdown (GFM support via MarkedJS). Format text using the glassmorphic toolbar or keyboard shortcuts. Toggle between WYSIWYG and source view with Ctrl/Cmd+Shift+M.
- Syntax Highlighting — 19 languages via lowlight, with language badge dropdown and copy button
- Mermaid Diagrams — Live SVG preview with view/edit toggle, theme sync, fullscreen lightbox (zoom/pan), and copy-as-PNG (2x retina)
- GitHub Alerts —
[!NOTE],[!TIP],[!IMPORTANT],[!WARNING],[!CAUTION]render as styled alert boxes
Resizable tables with multi-line cell content. Right-click context menu for row/column operations. Drag-select cells with visual highlight overlay.
- Paste from clipboard or drag-and-drop (auto-saved to configurable folder)
- Double-click to edit URL/path
- Auto-rename files when path changes in markdown
- Auto-delete files when removed from markdown (moves to Trash)
- Fullscreen lightbox with zoom controls (0.5x–4x)
- Search (
Cmd/Ctrl+F) — Find with match highlighting, next/prev navigation, match counter - Link Navigation —
Cmd+Click/Ctrl+Clickto follow links, scroll to headings, open files, or launch URLs - Table of Contents — Sidebar with click-to-scroll, active heading tracking, collapse/expand
- Content Zoom — 50%–200% via Appearance popover or
Ctrl/Cmd +/-/0 - Font Selector — Browse all system fonts with live preview
- Cursor Line Highlight — Visual highlight of current block
- Heading Collapse — Toggle arrows on headings to collapse/expand sections
- Metadata Panel — Collapsible YAML frontmatter editor with validation
- Reading Progress Bar — Fixed top bar tracking scroll position
- Word Count — Subtle indicator in bottom-right corner
- Toolbar Auto-hide — Opt-in, reveals on hover
- Install from VS Code Marketplace
- Open any
.mdor.markdownfile - Editor opens automatically in WYSIWYG mode
- Use toolbar to format text and insert elements
- Changes save automatically to source file
One-click export to Word .docx via mdast2docx. Preserves headings, lists, tables, code blocks, and images (mermaid diagrams rendered as PNG). Respects the active editor font.
WYSIWYG export via headless Chromium (puppeteer-core). Requires Chrome, Edge, Chromium, or Brave installed locally (not bundled). Auto-detects common install paths.
Tip
If auto-detection fails, set tuiMarkdown.chromiumPath in VS Code settings to the absolute path of your browser executable.
| Setting | Default | Description |
|---|---|---|
tuiMarkdown.fontSize |
16 |
Editor font size (8–32px) |
tuiMarkdown.highlightCurrentLine |
true |
Enable cursor line highlight |
tuiMarkdown.imageSaveFolder |
images |
Folder for pasted images (relative to document) |
tuiMarkdown.autoRenameImages |
true |
Auto-rename image files when path changes |
tuiMarkdown.autoDeleteImages |
true |
Auto-delete images removed from markdown (Trash) |
tuiMarkdown.autoHideToolbar |
false |
Auto-hide toolbar when typing |
tuiMarkdown.chromiumPath |
"" |
Chrome/Chromium path for PDF export |
tuiMarkdown.exportPageSize |
A4 |
Page size for PDF/DOCX export (A4 or Letter) |
tuiMarkdown.headingSizes.h1–h6 |
32–16 |
Heading font sizes (12–72px) |
12 built-in themes with curated typography and color palettes:
| Theme | Style | Character |
|---|---|---|
| Frame | Light | Clean, modern default |
| Frame Dark | Dark | Blue-tinted, sharp |
| Nord | Light | Soft Arctic palette |
| Nord Dark | Dark | Official Nord colors |
| Crepe | Light | Warm serif reading |
| Crepe Dark | Dark | Warm serif, inverted |
| Catppuccin Latte | Light | Pastel warmth |
| Catppuccin Frappé | Dark | Subdued, muted |
| Catppuccin Macchiato | Dark | Medium contrast |
| Catppuccin Mocha | Dark | Rich, deep |
| Paper | Light | Serif, book-like |
| Midnight | Dark | Deep navy (#0d1117) |
| Layer | Technology |
|---|---|
| Editor engine | Tiptap 3 + @tiptap/markdown |
| Markdown parser | MarkedJS (GFM) via @tiptap/markdown |
| Syntax highlighting | lowlight (highlight.js) |
| Diagrams | Mermaid 11 + ELK layout |
| DOCX export | mdast2docx + @m2d plugins |
| PDF export | puppeteer-core + remark/rehype pipeline |
| Build | esbuild |
- VS Code 1.85.0 or higher
- For PDF export: Chrome, Edge, Chromium, or Brave installed on the system