FlowMD — WYSIWYG Markdown Editor for VS Code

Obsidian-style live preview editing, right inside VS Code.

日本語 README / Japanese

FlowMD is a WYSIWYG Markdown editor for VS Code. The line you're editing shows raw Markdown; everything else renders beautifully in real time — no split panes, no context switching. Three modes let you switch between WYSIWYG editing, raw Markdown, and a read-only rendered view with a single click.

Features

Live Preview Editing

The focused block shows raw Markdown while all other blocks render inline. Switch instantly between editing and reading without leaving your file.

Three Editing Modes

Click the mode icon in the editor title bar to cycle: Live Preview → Viewer → Source → Live Preview.

GFM Tables

Full GitHub Flavored Markdown table rendering with:

• Interactive add row / add column buttons on hover
• Cell drag selection — click and drag to select rectangular cell ranges
• Delete key support — with cells selected, Delete removes entire rows, entire columns, or clears cell contents
• Inline checkbox toggle within table cells

Mermaid Diagrams

Inline rendering of flowcharts, sequence diagrams, Gantt charts, class diagrams, and more. Diagram theme follows VS Code's active color theme automatically.

KaTeX Math

Inline math with $...$ and display math with $$...$$. Full KaTeX support with MathML output — no external fonts or CSS required.

YAML Frontmatter

YAML frontmatter blocks render as an Obsidian-style property panel showing key-value pairs in a clean, readable layout.

Syntax Highlighting

20 programming languages with a copy button on every code block: JavaScript, TypeScript, Python, HTML, CSS, JSON, Java, C/C++, Rust, Go, SQL, PHP, XML, YAML, Shell, PowerShell, Ruby, Dockerfile, TOML, Diff

More Features

• Bold / Italic — Ctrl+B / Ctrl+I (Cmd+B / Cmd+I on Mac) to toggle formatting on selected text
• Inline Checkboxes — Click to toggle [ ] / [x], even inside table cells
• Footnotes — Auto-numbered with click-to-jump navigation
• Collapsible Sections — HTML <details>/<summary> rendering
• Strikethrough — GFM ~~text~~ support
• Image Display — Local files, URLs, and data URIs
• Nested Blockquotes — Visual indicator bars for up to 5 nesting levels
• Collapsible Lists — Fold/unfold nested list sections with arrow indicators
• Anchor Links — Click heading links to jump within the document
• HTML Export — Export the current file as a standalone styled HTML document
• Find and Replace — Ctrl+F / Ctrl+H (Cmd+F / Cmd+Alt+F on Mac) with match count
• Theme Sync — Automatic dark/light theme synchronization with VS Code
• File Reload — Re-read file from disk with one click
• Word Wrap and Readable Line Length — Configurable content width
• IME Support — Full composition support for Japanese, Chinese, and Korean

Installation

1. Open VS Code
2. Press Ctrl+Shift+X to open Extensions
3. Search for "FlowMD"
4. Click Install

Or install directly from the VS Code Marketplace.

Usage

Opening Files

FlowMD registers as the default editor for .md files. Simply open any Markdown file and it loads in Live Preview mode.

You can also right-click any .md file in the Explorer and select Open with FlowMD.

Mode Switching

Click the mode icon in the editor title bar to cycle through modes:

You can also set the default mode in settings with flowMd.defaultMode.

Table Cell Selection

In Live Preview or Viewer mode, click and drag across table cells to select a rectangular range. With cells selected:

• Delete or Backspace — Delete selected rows (if full rows selected), delete selected columns (if full columns selected), or clear cell contents
• Click outside the table to deselect

Keyboard Shortcuts

Settings

License

MIT License. Free to use with all features included. No restrictions, no paywalls.

Contributing

Bug reports and feature requests are welcome! Please open an issue on GitHub Issues.

Made with care by Keisuke.