MDOCX for VS Code
Preview, edit, and manage MDOCX files directly in Visual Studio Code.
MDOCX (MarkDown Open Container eXchange) bundles one or more Markdown documents together with referenced media (images, audio, video, and more) into a single portable file. This extension brings first-class support for .mdocx files to VS Code.
✨ Features
| Feature |
Description |
| 🔍 Live Preview |
Render any Markdown file inside the MDOCX with a single click. |
| 📂 File Picker |
Switch between embedded Markdown documents instantly. |
| 🖼️ Embedded Media |
Images and other media stored in the container are resolved and displayed inline. |
| 📝 Edit in Place |
Open the selected Markdown in VS Code's text editor and save changes back to the container. |
| 📋 Copy to Clipboard |
Quickly copy the raw Markdown source to paste elsewhere. |
| 🗂️ Metadata Panel |
View and edit document metadata (title, description, author, root file, tags). |
| 🎞️ Media Manager |
Add, replace, or remove media assets without leaving VS Code. |
| 🔒 Safe Rendering |
Raw HTML is stripped; unsafe URL schemes (e.g., javascript:) are blocked. |
📸 Screenshots
Coming soon — screenshots of the preview panel, metadata editor, and media manager.
🚀 Installation
- Open Extensions in VS Code (
Ctrl+Shift+X / Cmd+Shift+X).
- Search for MDOCX.
- Click Install.
Alternatively, install from the command line:
code --install-extension logicos.mdocx-vscode
📖 Usage
- Open any
.mdocx file — the MDOCX Preview editor opens automatically.
- Use the file selector at the top to switch between embedded Markdown documents.
- Click Edit to open the Markdown in a text editor; changes are saved back to the container.
- Expand the Metadata panel to update title, description, author, root file, or tags.
- Expand the Media panel to add, replace, or remove embedded assets.
⚙️ Settings
| Setting |
Type |
Default |
Description |
mdocx.maxInlineMediaBytes |
number |
26214400 (25 MB) |
Maximum size of a single media item to inline as a data URI. Larger items are not displayed inline. |
Access settings via File → Preferences → Settings and search for MDOCX.
🛠️ Development
# Clone the repo
git clone https://github.com/logicossoftware/mdocx-vscode.git
cd mdocx-vscode
# Install dependencies
npm install
# Compile TypeScript
npm run compile
# Generate a sample MDOCX file
npm run sample:generate
# Launch Extension Development Host
# Press F5 in VS Code, then open samples/sample.mdocx
📚 Resources
📝 Changelog
See CHANGELOG.md for release notes.
🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.
📄 License
This extension is released under the MIT License.
