Markstream Vue
A Vue 3 renderer specifically built for AI-powered streaming Markdown: Monaco incremental, Mermaid progressive, and KaTeX formula speed, with real-time updates and no jitter, ready to use out of the box.
Last verified:
What is Markstream Vue?
Markstream Vue is a streaming-friendly, Vue 3 markdown renderer specifically built for AI-powered streaming Markdown content. It solves core problems that traditional Markdown renderers face when receiving streaming data, such as repeated full-tree re-rendering, page flickering, and memory spikes. The library provides a zero-flicker, predictable memory usage smooth
Markstream Vue pricing
Pricing model: Freemium
Free and open source package available on npm. No paid tiers or pricing plans. The core markstream-vue package is free, with optional peer dependencies (mermaid, katex, stream-monaco, @terrastruct/d2, shiki, stream-markdown) that are also free open-source packages installed separately based on needed features. The playground and interactive test page at markstream-vue.simonhe.me are freely accessible.
Markstream Vue pros
- Optimized specifically for AI streaming Markdown scenarios
- Zero flicker rendering with smooth typewriter experience
- Predictable memory usage even with large documents
- Progressive Mermaid diagram rendering with instant display
- Monaco editor integration for rich code block features
- Streaming diff code blocks support
- KaTeX math formula rendering with fast updates
- D2 diagram support for technical diagrams
- AntV Infographic chart rendering capability
- Custom Vue component embedding in Markdown content
- TypeScript-first with complete type definitions and IntelliSense
- Zero configuration - works out of the box
- Supports Vue 3 with Vue 2 compatibility available
- SSR-ready for server-side rendering
- Full Markdown support including tables, emoji, checkboxes
- Real-time incremental updates without formatting breaks
- Flexible code block rendering with Monaco or Shiki options
- Custom HTML tag support with custom-html-tags prop
- Internationalization (i18n) support with custom translation maps
- Typewriter and fade animation props for streaming effects
Markstream Vue cons
- Requires optional peer dependencies for advanced features
- Monaco editor requires stream-monaco package separately
- KaTeX requires separate katex package and CSS import
- Mermaid requires separate mermaid package installation
- D2 diagrams require @terrastruct/d2 package
- CSS order matters and requires careful setup with frameworks
- Monaco blank rendering can occur without proper worker bundling
- May need browser-only guards for Monaco in SSR
- Memory leaks possible if removeCustomComponents not called in SPAs
- Typewriter prop may be undesirable in SSR/export flows
Frequently asked questions about Markstream Vue
What is markstream-vue?
Markstream-vue is a streaming-friendly, Vue 3 markdown renderer specifically built for AI-powered streaming Markdown. It solves traditional Markdown renderer problems like repeated full-tree re-rendering, page flickering, and memory spikes when receiving streaming data, providing a zero-flicker, predictable memory占用 smooth typewriter experience.
What features does markstream-vue support?
It supports progressive Mermaid diagram rendering, streaming diff code blocks, Monaco editor integration, KaTeX math rendering, D2 diagrams, AntV Infographic charts, custom Vue component embedding, tables, emoji, checkboxes, code blocks, real-time incremental updates, and full TypeScript support with complete type definitions.
How do I install markstream-vue?
Install with pnpm add markstream-vue, npm install markstream-vue, or yarn add markstream-vue. For advanced features, add peer dependencies: stream-markdown for lightweight highlighted code blocks, stream-monaco for Monaco-powered blocks, mermaid for diagrams, katex for math, or @terrastruct/d2 for D2 diagrams.
What packages do I need for AI/chat UI with code blocks and diagrams?
For AI/chat UI with richer code blocks and diagrams, install: pnpm add markstream-vue stream-monaco mermaid katex. This enables copy/preview/expand controls for code blocks, Mermaid diagram rendering, and KaTeX math formula rendering.
Does markstream-vue support SSR?
Yes, markstream-vue is SSR-ready. For docs sites or SSR-first apps, install pnpm add markstream-vue stream-markdown. There is also markstream-react/next for Next.js App Router Server Components and Pages Router SSR pages.
How do I handle internationalization (i18n)?
Provide an i18n option with a translation map or function. Use setDefaultI18nMap to override default texts globally without full i18n setup. Default texts include 'common.copy' (Copy), 'common.copySuccess' (Copied), 'image.loadError' (Image failed to load), and 'image.loading' (Loading image...).
Can I use markstream-vue with Vue 2?
Yes, markstream-vue supports Vue 3 primarily but also has Vue 2 compatibility. The documentation mentions support for Vue 3, Vue 2, React, Angular, and Svelte through related packages in the markstream family.
What are the code block rendering options?
You can choose between Monaco editor (CodeBlockNode) for full code block functionality including copy button, font size controls, expand/collapse, or lightweight Shiki highlighting (MarkdownCodeBlockNode) for better bundle budgets. Monaco requires stream-monaco package, while Shiki requires shiki and stream-markdown packages.