A Vue 3 component designed for high-performance, streaming Markdown rendering, markstream-vue addresses the challenges of displaying AI-generated content, large documents, and real-time updates without visual jitter or excessive memory consumption. It targets developers building chat interfaces, documentation platforms, or knowledge bases who require a robust, efficient, and flexible Markdown solution. The primary benefit is a smooth, responsive user experience, even with rapidly changing or lengthy content, enhanced by progressive rendering of complex elements and seamless integration of custom Vue components.

How It Works

The core innovation lies in its dual rendering strategies: a default "virtual window" mode maintains steady memory usage and responsiveness for long documents by only rendering a subset of visible nodes, while an "incremental batching" mode (max-live-nodes: 0) is optimized for AI-like "typing" effects with small, frequent updates. It supports progressive rendering for Mermaid diagrams and streaming updates for code blocks using Monaco or Shiki, ensuring complex elements appear smoothly. The renderer can process raw Markdown strings or pre-parsed nodes, offering flexibility in data handling and enabling deterministic SSR/worker-based rendering.

Quick Start & Requirements

• Install: pnpm add markstream-vue, npm install markstream-vue, or yarn add markstream-vue.
• Prerequisites: Vue 3. Optional peer dependencies for advanced features include stream-monaco, shiki, mermaid, and katex. Ensure markstream-vue/index.css is imported.
• Links:
  • Documentation: https://markstream-vue-docs.simonhe.me/guide/
  • Playground: https://markstream-vue.simonhe.me/
  • Interactive Test Page: https://markstream-vue.simonhe.me/test
  • StackBlitz Demo: https://stackblitz.com/github/Simon-He95/markstream-vue?file=playground/src/App.vue

Highlighted Details

• Streaming Support: Native handling of Server-Sent Events (SSE) and WebSockets for incremental Markdown updates without re-rendering the entire document.
• Rendering Modes: Configurable max-live-nodes prop allows switching between virtual windowing (default, 320) for long docs and incremental batching (0) for typewriter effects.
• Progressive Rendering: Mermaid diagrams render progressively, and code blocks support streaming updates via Monaco or Shiki integration.
• Custom Components: Allows embedding custom Vue components directly within Markdown content using the custom-components prop or setCustomComponents API.

Maintenance & Community

The project is actively maintained, with recent beta releases (0.0.3-beta.1/beta.0) including parser updates and Monaco enhancements. Community support is available via Discord (https://discord.gg/vkzdkjeRCW) and GitHub Discussions (https://github.com/Simon-He95/markstream-vue/discussions). Contribution guidelines are detailed in CONTRIBUTING.md, emphasizing clear issue reporting and PR templates.

Licensing & Compatibility

The project is released under the MIT license, which is permissive and generally suitable for commercial use, including integration into closed-source applications. A separate markstream-vue2 package exists for Vue 2.6 compatibility.

Limitations & Caveats

The project is primarily distributed via beta releases, suggesting potential for breaking changes. Advanced features like Monaco, Mermaid, and KaTeX require explicit installation of optional peer dependencies or careful configuration for CDN/worker loading, adding complexity to setup.