Fast, streaming-friendly Markdown rendering for Vue 3 — progressive Mermaid, streaming diff code blocks, and real-time previews optimized for large documents.
📖 All detailed documentation, API, examples, and advanced usage have been migrated to the VitePress documentation site: https://vue-markdown-renderer-docs.simonhe.me/guide/
- Playground (interactive demo): https://vue-markdown-renderer.simonhe.me/
- Interactive test page: https://vue-markdown-renderer.simonhe.me/test
Try the interactive test page to quickly verify and debug: https://vue-markdown-renderer.simonhe.me/test
This page provides a left editor and right live preview (powered by this library). It includes "generate & copy share link" functionality, encoding your input into the URL for sharing. If the input is too long, fallback options are provided to open directly or pre-fill a GitHub Issue.
You can use this page to reproduce rendering issues, verify math/Mermaid/code block behavior, and quickly generate shareable links or reproducible issues.
A short video introduces the key features and usage of vue-renderer-markdown:
Watch on Bilibili: Open in Bilibili
- ⚡ Extreme performance: minimal re-rendering and efficient DOM updates for streaming scenarios
- 🌊 Streaming-first: native support for incomplete or frequently updated tokenized Markdown
- 🧠 Monaco streaming updates: high-performance Monaco integration for smooth incremental updates of large code blocks
- 🪄 Progressive Mermaid: charts render instantly when syntax is available, and improve with later updates
- 🧩 Custom components: embed custom Vue components in Markdown content
- 📝 Full Markdown support: tables, formulas, emoji, checkboxes, code blocks, etc.
- 🔄 Real-time updates: supports incremental content without breaking formatting
- 📦 TypeScript-first: complete type definitions and IntelliSense
- 🔌 Zero config: works out of the box in Vue 3 projects
- 🎨 Flexible code block rendering: choose Monaco editor (
CodeBlockNode) or lightweight Shiki highlighting (MarkdownCodeBlockNode)
Troubleshooting has moved into the docs: https://vue-markdown-renderer-docs.simonhe.me/guide/troubleshooting
If you can't find a solution there, open a GitHub issue: https://github.com/Simon-He95/vue-markdown-render/issues
This project uses and benefits from:
Thanks to the authors and contributors of these projects!
