Markstream — Streaming Markdown renderers for AI chat

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.

Markstream is the renderer family for Vue, React, Octane, Svelte, Angular, and Vue 2. Use sibling packages for non-Vue frameworks; use markstream-vue when your Vue/Nuxt/VitePress UI needs stable partial Markdown states, mobile WebView rendering, safe component rendering, and progressive heavy blocks.

Vue package:

Other packages:

Install markstream-vue

Markstream 2.x is stable on npm's latest tag:

pnpm add markstream-vue

Add the optional stream-diffs peer only when you need enhanced code and diff blocks. markstream-vue@1 pins the maintained 1.x line; it is also preserved on the legacy npm tag, with 1.x prereleases on legacy-next. See the 1.x to 2.0 migration guide for the code-block runtime changes.

For applications that must stay on the 1.x line across the 2.x cutover:

pnpm add markstream-vue@1

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

defineProps<{
  content: string
  isDone: boolean
}>()
</script>

<template>
  <MarkdownRender mode="chat" :content="content" :final="isDone" />
</template>

Why not marked / markdown-it / react-markdown?

Use marked, markdown-it, or react-markdown for finished Markdown documents.

Use Markstream when the Markdown is still changing while the user is reading it.

Detailed comparisons: vue-stream-markdown, Streamdown, react-markdown, and marked / markdown-it.

Packages

Start with the framework overview if you are choosing between packages.

Which package should I use?

• Vue 3 / Nuxt / VitePress → markstream-vue
• React / Next.js / Remix → markstream-react
• Octane → markstream-octane
• Svelte 5 → markstream-svelte
• Angular standalone → markstream-angular
• Vue 2.6 / 2.7 → markstream-vue2
• Framework-agnostic parsing only → stream-markdown-parser
• Streaming controller utilities → markstream-core

Stability

markstream-vue 2.x is stable and published on npm's latest tag. The maintained 1.x line remains available through markstream-vue@1 and the legacy tag. Version 2 removes the Monaco and stream-markdown code-block runtimes; install the optional stream-diffs peer when you need the enhanced code-block surface. See Migrating from 1.x to 2.0 before upgrading.

The stable surface includes MarkdownRender, streaming content rendering, pre-parsed node rendering, the safe HTML policy, 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 (markstream-react, markstream-octane, markstream-svelte, markstream-angular, markstream-vue2) are available and actively developed. Check each package page for API maturity, framework support, and known limitations.

For the full release contract and Go / No-Go checklist, see 1.0 Release Readiness. For reproducible performance evidence, run pnpm benchmark:1.0 and use the generated 1.0 Benchmark Report.

Contents

• TL;DR Highlights
• Choose Your Path
• Try It Now
• Community & support
• Quick Starts
• Common commands
• Streaming in 30 seconds
• Performance presets
• Key props & options
• Support the project
• Where it shines
• FAQ
• Why markstream-vue
• Roadmap
• Releases
• Showcase
• Introduction Video
• Features
• Contributing & community
• Troubleshooting
• Thanks
• Star History
• License

📖 Framework overview, docs, API, and advanced usage: https://markstream.simonhe.me/frameworks

TL;DR Highlights

• 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