LiveMarkdown

A VS Code extension that replaces the default markdown preview with a live WYSIWYG editor. Edit markdown files visually — headings, links, tables, task lists, and code blocks render inline as you type.

Built with TipTap and the VS Code CustomTextEditorProvider API.

Install

Install from the VS Code Marketplace, or search for LiveMarkdown in the Extensions sidebar (Cmd+Shift+X).

When you open a .md file for the first time, click the "Toggle raw markdown" button in the top-right editor toolbar (or press Shift+Cmd+M / Ctrl+Shift+M) to switch to the visual preview mode.

Features

• WYSIWYG editing — rich-text editing for .md files, no split pane needed
• GFM support — tables, task lists, strikethrough, and fenced code blocks with syntax highlighting
• Full theme integration — adapts to light, dark, and high-contrast VS Code themes
• Native undo/redo — keystrokes batch into groups with VS Code / Word timing (500 ms pause breaks a group); edits land in the document immediately so files.autoSave fires with no extra delay
• Toggle view — switch between visual and raw markdown with Shift+Cmd+M
• Link insertion — Cmd+K overlay for quick link creation
• Copy mode toggle — copy as raw Markdown or rendered rich text
• GFM alert callouts — [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] blocks with distinct colours and icons
• PR review comments — view, reply, and create GitHub PR comments inline with batch draft submission (requires gh CLI)
• Real-time sync — edits from other extensions or external tools appear instantly

How it Works

The extension replaces VS Code's default text view for .md files. No split pane, no manual toggle — rendered content is the default. Raw markdown is one shortcut away when you need it.

Under the hood, the extension runs in two contexts connected via postMessage: the extension host manages document sync with VS Code's workspace API, while the webview runs a TipTap editor that dispatches edits synchronously and forwards explicit save commands back.

For more details, see:

• Why LiveMarkdown? — the problem with VS Code's built-in preview and how this solves it
• Features — quick feature overview
• Detailed feature guide — in-depth behaviour, shortcuts, edge cases, and design rationale
• Known issues — current limitations and workarounds

Licence

MIT

Made with ❤️ by Vibe Coding!