Simon-He95/markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Octane, SolidJS, Svelte, Angular, and Vue 2. Mermaid, KaTeX, streaming code blocks, SSR, and virtualized histories.

What it solves

Markstream solves the problem of rendering Markdown content that is still being generated, such as responses from AI chat interfaces or real-time data streams. Standard Markdown renderers are designed for static documents and often struggle with the "flicker" or layout instability that occurs when content is updated incrementally.

How it works

It provides a specialized rendering engine that handles partial, incomplete Markdown strings. It offers two primary modes: a "chat" mode optimized for steady, real-time streaming without distracting animations, and a "docs" mode for rendering larger, static, or batch-processed content. It supports progressive rendering of complex elements like Mermaid diagrams, KaTeX math, and code blocks, ensuring they remain stable even as the underlying data stream updates.

Who it’s for

It is for developers building AI-powered applications, chat interfaces, or documentation platforms using Vue, React, Svelte, Angular, or Octane. It is ideal for anyone who needs a stable, high-performance way to display LLM token streams or SSE/WebSocket output.

Highlights

  • Purpose-built for streaming Markdown to minimize visual flicker and memory usage.
  • Includes dedicated render modes for chat (real-time) and documentation (batch).
  • Supports advanced features like progressive diagrams (Mermaid), math (KaTeX), and streaming code blocks.
  • Provides framework-specific packages for Vue, React, Svelte, Angular, and Octane.
  • TypeScript-first with stable, ship-ready defaults and CSS styling included.

Related

  • Project
  • Project
  • Project
  • Project