markstream-vue

markstream-vue is a Vue 3 component library built specifically for displaying AI-generated text that arrives word by word in real time. When an AI assistant streams its response — sending text incrementally rather than all at once — a standard Markdown renderer often flickers, jumps, or re-renders the entire page with each new chunk. markstream-vue is designed to handle exactly this use case smoothly.

Markdown is a lightweight formatting syntax where symbols like asterisks and pound signs get converted into bold text, headings, and code blocks. Streaming Markdown is particularly tricky to render because a formatting symbol may arrive mid-stream, incomplete, before the closing character appears in a later chunk.

The library handles several advanced rendering challenges incrementally: code blocks with syntax highlighting (via Monaco and Shiki — popular code editor components), diagrams drawn from text descriptions using Mermaid (a diagram-as-code tool), and math formulas using KaTeX. All of these update in real time as new content streams in without causing visual jitter or re-drawing the whole page.

It offers two rendering modes: a virtual window approach for very long documents (rendering only what is visible on screen) and an incremental batching mode for the typing-effect look. The component is TypeScript-first, meaning it ships with type definitions for safer development, and works out of the box with a CSS import. Vue 2 and React ports also exist in the same repository. The full README is longer than what was provided.