Simon-He95/markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, Shiki, Monaco, safe HTML, and low-jitter updates.

What it solves

Many standard Markdown renderers are designed for static documents and cause visual flicker or performance issues when rendering content that changes rapidly, such as AI-generated token streams in a chat interface. markstream-vue provides a stable, flicker-free way to render Markdown that is still being streamed from an LLM.

How it works

It acts as a specialized renderer for Vue 3 (with sibling packages for React, Svelte, and Angular) that handles incomplete Markdown states. It offers two primary render modes: a virtual window for long documents and incremental batching for "typing" effects. It can process either raw Markdown strings or pre-parsed nodes and supports progressive rendering for heavy elements like Mermaid diagrams and KaTeX math.

Who it’s for

Developers building AI chat UIs, SSE (Server-Sent Events) or WebSocket-based streaming interfaces, and documentation sites using Vue, Nuxt, or VitePress.

Highlights

  • AI-Optimized Streaming: Specifically designed to minimize flicker and maintain predictable memory usage during LLM token streams.
  • Multi-Framework Support: While this repo is for Vue, it belongs to a family of renderers supporting React, Svelte, and Angular.
  • Progressive Rendering: Supports streaming code blocks (via Monaco/Shiki) and diagrams (via Mermaid) that update as the content grows.
  • Rich Integrations: Built-in support for KaTeX math and custom tags (e.g., thinking blocks).
  • Flexible Modes: Includes chat mode for steady pacing and docs mode for rich documentation layouts.