markstream-react vs Streamdown

Both markstream-react and Streamdown are designed for streaming Markdown in React. They target different trade-offs.

Last verified: 2026-06-12. Competitor capabilities may change. This page focuses on architecture and documented behavior rather than claiming permanent feature gaps. Check Streamdown's official docs for the latest capabilities.

Quick comparison

Capability	markstream-react	Streamdown
React streaming Markdown	✅	✅
Incomplete Markdown handling	Streaming mid-state handling for partial fences, links, images, tables, and inline syntax	Streaming-optimized
react-markdown-style API	❌ different API	✅ drop-in style
Mermaid	✅ built-in Markstream integration / optional peer	✅ via @streamdown/mermaid
Math / KaTeX	✅ optional peer / worker-capable	✅ via @streamdown/math
Code highlighting	✅ Monaco/Shiki-oriented renderer, diff-aware code blocks	✅ via @streamdown/code using Shiki
Cross-framework family	✅ Vue/React/Svelte/Angular	❌ React-focused
Long-document live-node bounding	✅ renderer-level controls	Needs separate app-level virtualization
Best fit	Multi-framework AI apps, heavy blocks, long docs	React apps wanting a streaming drop-in path

When to use Streamdown

Streamdown is a drop-in replacement for react-markdown designed for AI-powered streaming. Use it when:

• You're migrating from react-markdown and want minimal API changes
• You want React-only streaming Markdown with a familiar API
• You want Streamdown's plugin model for Shiki code, Mermaid, KaTeX, or CJK support
• Long-document virtualization can stay in your application layer

When to use markstream-react

markstream-react is a streaming-first renderer with progressive heavy blocks. Use it when:

• AI output includes Mermaid diagrams that should use Markstream's progressive heavy-block behavior
• Streaming code blocks need diff tracking as content arrives
• KaTeX math should render through Markstream's optional worker-capable integration
• Long AI responses need renderer-level live-node bounding
• You want consistent Markdown behavior across React, Vue, Svelte, and Angular
• You need both raw content and pre-parsed nodes input paths
• You need optional peer dependencies — install only what your AI output needs

Content path vs nodes path

For a normal AI chat message, you can pass the accumulating Markdown string directly to MarkdownRender. You do not need to pre-parse nodes just to handle SSE or WebSocket output.

Use the nodes path when another layer already owns parsing, batching, worker execution, or AST transforms.

Streaming example comparison

Streamdown

import { Streamdown } from 'streamdown'

// Drop-in replacement for react-markdown
export default function ChatMessage({ content }: { content: string }) {
  return <Streamdown>{content}</Streamdown>
}

markstream-react

import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

export default function ChatMessage({ content, isDone }: { content: string, isDone: boolean }) {
  return (
    <MarkdownRender
      content={content}
      final={isDone}
      fade={false}
    />
  )
}

Progressive Mermaid: a key difference

When an LLM streams a Mermaid diagram:

flowchart LR
  Input --> Parser --> Renderer --> Output

Streamdown: supports Mermaid through @streamdown/mermaid, with interactive controls after the diagram is parsed.

markstream-react: renders incremental diagram states as the Mermaid syntax arrives. Users see the diagram taking shape — better UX for long or complex diagrams.

Choosing between them

Your situation	Recommendation
Migrating from react-markdown, want minimal changes	Streamdown
Need Streamdown's React plugin model	Streamdown
AI output includes progressive Mermaid-heavy answers	markstream-react
Streaming code blocks with diffs	markstream-react
Long AI responses (>50 KB)	markstream-react
Multi-framework project (React + Vue + Svelte)	markstream-react
Need content and pre-parsed nodes paths	markstream-react

Verification

Last verified: 2026-06-12

Sources checked:

• Streamdown docs
• Streamdown package/plugin documentation
• Markstream React docs and package metadata
• public examples and local smoke reproduction

Tested scenarios:

• incomplete code fences
• partial tables
• streaming Mermaid
• long response > 50 KB
• final=true settling behavior

Sources and references

• Streamdown docs
• markstream-react framework page
• Streaming Mermaid and KaTeX
• Long AI responses
• 1.0 Benchmark Report

Reproduce Markstream scenarios

These commands reproduce the Markstream streaming and performance scenarios used while writing this comparison. They are not a side-by-side benchmark against the alternative package.

pnpm benchmark:1.0
pnpm run test:e2e:main-playground-performance

Use real AI output that includes unclosed fences, Mermaid, math, fast token updates, and long responses before deciding which API and rendering model fit your React app.