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://markstream-vue-docs.simonhe.me/guide/
- Playground (interactive demo): https://markstream-vue.simonhe.me/
- Interactive test page: https://markstream-vue.simonhe.me/test
Try the interactive test page to quickly verify and debug: https://markstream-vue.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.
pnpm add markstream-vue
# npm install markstream-vue
# yarn add markstream-vueimport MarkdownRender from 'markstream-vue'
// main.ts
import { createApp } from 'vue'
import 'markstream-vue/index.css'
createApp({
components: { MarkdownRender },
template: '<MarkdownRender custom-id="docs" :content="doc" />',
setup() {
const doc = '# Hello from markstream-vue\\n\\nSupports **streaming** nodes.'
return { doc }
},
}).mount('#app')Import markstream-vue/index.css after your reset (e.g., Tailwind @layer components) so renderer styles win over utility classes. Install optional peers such as stream-monaco, shiki, mermaid, and katex only when you need Monaco code blocks, Shiki highlighting, diagrams, or math.
- Virtual window (default) – keep
max-live-nodesat its default320to enable virtualization. Nodes render immediately and the renderer keeps a sliding window of elements mounted so long docs remain responsive without showing skeleton placeholders. - Incremental stream – set
:max-live-nodes="0"when you want a true typewriter effect. This disables virtualization and turns on incremental batching governed bybatchRendering,initialRenderBatchSize,renderBatchSize,renderBatchDelay, andrenderBatchBudgetMs, so new content flows in small slices with lightweight placeholders.
Pick one mode per surface: virtualization for best scrollback and steady memory usage, or incremental batching for AI-style “typing” previews.
A short video introduces the key features and usage of markstream-vue:
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) - 🧰 Parser toolkit:
stream-markdown-parsernow documents how to reuse the parser in workers/SSE streams and feed<MarkdownRender :nodes>directly, plus APIs for registering global plugins and custom math helpers.
Troubleshooting has moved into the docs: https://markstream-vue-docs.simonhe.me/guide/troubleshooting
If you can't find a solution there, open a GitHub issue: https://github.com/Simon-He95/markstream-vue/issues
This project uses and benefits from:
Thanks to the authors and contributors of these projects!
