markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, stream-diffs code blocks, safe HTML

What is markstream-vue?

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

Overview of markstream-vue

What it is

markstream-vue is a Vue 3 / Nuxt / VitePress streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, long AI responses, Mermaid, KaTeX, and streaming code blocks. It is part of the Markstream renderer family that includes packages for Vue, React, Octane, Svelte, Angular, and Vue 2.

Key features

  • Purpose-built for streaming Markdown (AI/chat/SSE), designed to minimize flicker and keep memory predictable.
  • Two render modes: virtual window for long docs, incremental batching for “typing” effects.
  • Progressive diagrams (Mermaid) and streaming code blocks (stream-diffs) that keep up with diffs.
  • Works with raw Markdown strings or pre-parsed nodes, with custom framework components in Vue, React, Octane, Svelte, and Angular.
  • TypeScript-first, ship-ready defaults — import CSS and render.
  • Optional Mermaid / KaTeX / D2 / Infographic integrations, enhanced code blocks, virtual-scroll coordination, CSS exports, worker client subpaths, and SSR imports for Vite / Nuxt / VitePress.
  • Cross-framework renderers are available and actively developed.

Use cases

Markstream is ideal when Markdown is still changing while the user is reading it. Use cases include AI chat UIs, SSE streams, long AI responses, mobile WebView rendering, safe component rendering, and progressive heavy blocks. It is not intended for finished Markdown documents (use marked, markdown-it, or react-markdown instead).

Getting started

bashpnpm add markstream-vueAdd the optional stream-diffs peer only when you need enhanced code and diff blocks. For applications that must stay on the 1.x line, use pnpm add markstream-vue@1.

License and pricing

License: MIT. Pricing type: open_source.

Based on the project's public README and repository metadata.

Add this badge to your README

Featured on YunoDB Badge styles & help

Maintain this project? Show that it is featured on YunoDB.

Markdown[![Featured on YunoDB](https://yunodb.com/badge/simon-he95markstream-vue.svg)](https://yunodb.com/tools/simon-he95markstream-vue?utm_source=github&utm_medium=badge)
HTML<a href="https://yunodb.com/tools/simon-he95markstream-vue?utm_source=github&utm_medium=badge"><img src="https://yunodb.com/badge/simon-he95markstream-vue.svg" alt="Featured on YunoDB" height="20"></a>