Markdown Live Editor
A seamless, Obsidian-like Markdown WYSIWYG editor built natively for VS Code / Antigravity IDE. Experience the perfect blend of a frictionless writing environment with the power of modern developer tools.
✨ Features
True WYSIWYG & Blazing Fast Performance: Experience lightning-fast, buttery-smooth Markdown editing without the clunky split-screen. Thanks to a highly optimized, web-first architecture, the extension loads instantly and performs flawlessly even in pure web environments like vscode.dev.
Rock-Solid Cursor Stability: Unlike many other Markdown previewers, our live editor accurately preserves your precise cursor position during real-time typing and DOM updates. Say goodbye to annoying cursor jumps or snapping to the bottom of the document.
Auto-Save Functionality: Never lose your thoughts. Your notes are automatically and reliably saved as you write.
Advanced Table Operations: Managing Markdown tables has never been easier. Use the intuitive right-click context menu to effortlessly add or remove rows and columns, delete tables, or instantly insert custom tables with your desired dimensions directly from the toolbar.
- Comprehensive Interactive Toolbar: A sleek, sticky toolbar packed with essential formatting tools. Instantly apply Bold, Italic, Strikethrough, Headings, Blockquotes, Code Blocks, Ordered/Unordered Lists, Links, Images, and Tables with a single click.
- Dual-Mode Editing: Switch instantly between the rich Live Editor and a robust Source Mode powered by CodeMirror 6, fully synchronized with your active VS Code theme.
- Smart Image Pasting: Automatically save attached images to a customizable local directory when pasting directly into the editor. It automatically resolves absolute image paths by prefixing them in the preview (e.g. for a Next.js
public directory), keeping your raw Markdown code clean and portable. You can also rename images effortlessly via the context menu.
- Mermaid Diagram Support: Natively render complex Mermaid charts and diagrams on the fly.
- Dynamic Flyout Outline: A beautifully animated hierarchical outline navigation on the right edge. It displays minimal heading level indicators by default and expands gracefully to reveal full text when hovered, keeping your workspace clean.
- Slash Commands: Type
/ to instantly access a sleek quick-insert menu enriched with premium Lucide icons.
- Comprehensive Keyboard Shortcuts: Empower your workflow with a wide array of keyboard shortcuts for all common Markdown formatting tasks.
- Rich Elements Support: Native support for Markdown tables, GitHub-flavored Markdown (GFM), admonitions, and interactive task lists.
- Smart Wikilinks: Type
[[ to trigger a file search dialog, instantly converting selections into standard relative Markdown links or image embeds.
- Collapsible YAML Frontmatter: Elegantly handles metadata blocks generated by apps like Obsidian, offering a collapsible UI to view frontmatter without cluttering your writing.
- Elegant Footnotes: Effortlessly insert footnotes (
[^1]) via the toolbar or slash command, beautifully auto-formatted with smaller, lighter text at the document's end.
- Automatic Image Captions: Image file names are elegantly rendered as markdown captions beneath your pictures.
- Configurable Typography: Switch between a modern
sans-serif default or an immersive serif (Substack-style) font via VS Code settings for optimal reading and writing comfort.
🚀 Getting Started
There are 3 ways to launch the Live Editor:
- Use the keyboard shortcut
Cmd + Option + Shift + M (or Ctrl + Alt + Shift + M on Windows/Linux).
- Right-click any
.md file in the Explorer and select "Open in Markdown Live Editor".
- Click the Edit (pencil) icon in the top right corner of the active raw text view.
⚙️ Configuration
The extension comes with several customization options available in your VS Code settings, such as UI language, typography fonts, image paths, and Slash Command toggles.
⌨️ Keyboard Shortcuts
| Command |
Mac |
Windows/Linux |
| Open Live Editor |
Cmd + Ctrl + Shift + M |
Ctrl + Alt + Shift + M |
| Send to AI Context |
Cmd + L |
Ctrl + L |
| Insert Link |
Cmd + K |
Ctrl + K |
| Insert Table |
Cmd + Option + T |
Ctrl + Shift + T |
| Insert Code Block |
Cmd + Option + C |
Ctrl + Shift + C |
| Toggle Bold |
Cmd + Option + B |
Ctrl + Shift + B |
| Toggle Italic |
Cmd + I |
Ctrl + I |
| Insert Heading 1-6 |
Cmd + Option + 1-6 |
Ctrl + Shift + 1-6 |
🤝 Credits & Acknowledgements
Crafted for developers, researchers, and writers who demand an elegant, unified workspace.
| |
