Simon-He95/markstream-vue

What it solves

Standard Markdown renderers are designed for static documents. When used for AI chat interfaces where text streams in token-by-token, they often cause visual flicker, memory spikes, and layout shifts as the document is re-parsed and re-rendered from scratch. markstream-vue provides a stable, high-performance renderer specifically optimized for these streaming states, ensuring a smooth "typing" effect without sacrificing complex formatting.

How it works

The project provides a specialized renderer for Vue 3 (and other frameworks via sibling packages) that handles incomplete Markdown syntax. It uses two primary render modes: a virtual window for long documents and incremental batching for chat-like streaming. It integrates with stream-markdown-parser to handle the logic of partial Markdown states and supports progressive rendering for heavy blocks like Mermaid diagrams, KaTeX math, and streaming code blocks (via the stream-diffs peer package).

Who it’s for

Developers building AI chat UIs, LLM-powered applications, or any interface that consumes Server-Sent Events (SSE) or WebSocket streams of Markdown text who need a professional, flicker-free user experience.

Highlights

• Streaming-First Design: Specifically built to minimize flicker and maintain predictable memory usage during AI token streams.
• Multi-Framework Support: While this package is for Vue 3/Nuxt/VitePress, the Markstream family includes adapters for React, Svelte, Angular, and Vue 2.
• Rich Media Support: Supports progressive rendering of Mermaid diagrams, KaTeX math, and D2 infographics.
• Advanced Code Blocks: Integrates with stream-diffs for enhanced code and diff block rendering that updates in real-time.
• Flexible Render Modes: Offers chat mode for steady pacing and docs mode for rich document layouts.