Edit .md and .mdx files with a rich visual interface — no manual syntax required.
Write, format, and structure your documentation effortlessly.
MDX Visual Editor brings a WYSIWYG editing experience to VS Code, allowing you to work with Markdown and MDX content just like in a word processor. Whether you're writing technical docs, blog posts, or component documentation, you can focus on content while the editor handles the syntax.
✨ Key Features
Rich Text Editing – Bold, italic, headings, lists, tables, code blocks, and more – all with a single click.
Live Visual Preview – See your formatted content instantly as you type, with full support for MDX components.
Smart Toolbar – Context‑aware buttons appear when you need them, keeping the interface clean.
Full Markdown + MDX Support – Handles standard Markdown syntax plus JSX/React components inside .mdx files.
Seamless Integration – Opens directly on .md and .mdx files; works with your existing VS Code themes.
🚀 Why Choose This Extension?
No More Syntax Guesswork – Insert tables, lists, and code blocks visually, without remembering the exact Markdown syntax.
Boost Your Productivity – Save time with quick formatting and intuitive shortcuts, so you can stay in your flow.
Ideal for Documentation – Perfect for maintaining project READMEs, API docs, and component libraries.
Works With Your Tools – Fully compatible with Git, VS Code's built‑in preview, and your favorite themes (dark/light).
Open Source – Transparent, community‑driven, and actively maintained.
🖼️ Screenshots
📦 Installation
Open VS Code.
Go to Extensions (Ctrl+Shift+X).
Search for "MDX Visual Editor".
Install and reload.
Open any .md or .mdx file, click on "Edit md(-x)" button – the visual editor open.
🔧 Requirements
VS Code version 120.0 or higher. No additional dependencies.
🤝 Contributing
Found a bug or have a suggestion? Open an issue or submit a pull request on GitHub.
