React streaming Markdown renderer for AI chat

markstream-react renders Markdown that updates while an LLM response is streaming. Use it for React, Next.js, Remix, SSE, WebSocket, AI chat UIs, long Markdown answers, progressive Mermaid diagrams, KaTeX math, and streaming code blocks.

It is not a generic replacement for every static Markdown page. For short static content, react-markdown may be enough. Use markstream-react when streaming UX, incomplete Markdown states, long outputs, or heavy blocks matter.

When to use markstream-react

Use markstream-react when:

• Content streams from an LLM, SSE, or WebSocket
• Incomplete Markdown states must not flicker (unclosed fences, partial math)
• Long AI responses or long transcripts matter
• Mermaid/KaTeX/code blocks appear during streaming
• You want Markstream's cross-framework parser behavior
• You need virtualized long documents with bounded live nodes

Use react-markdown when:

• Content is static or short
• You already have sanitizer/plugin setup
• You do not need token-by-token UX
• You want the smallest familiar React Markdown stack

Quick Start

pnpm add 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}
    />
  )
}

Next.js

For live SSE/WebSocket surfaces, use root markstream-react in a 'use client' component. For SSR-first or server-only Markdown, start from the Next.js guide.

Client streaming example:

'use client'

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

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

For SSR safety with optional peers, see the React installation guide.

Key capabilities

• Two input paths: raw content and pre-parsed nodes
• Streaming SSE/WebSocket: parse outside and pass nodes for high-frequency token streams
• Progressive Mermaid: diagrams render incrementally
• Streaming code blocks: with diff tracking
• Virtualized long documents: for 1MB+ content
• Optional peers: Mermaid, KaTeX, Monaco — install only what you need
• TypeScript-first: full type coverage

Framework integration

Integration	Guide
React 18/19	React Quick Start
Next.js (App Router)	React Installation
Next.js SSR safety	Next.js SSR
AI Chat / SSE	AI Chat & Streaming
Migrate from react-markdown	Migration guide

vs react-markdown and Streamdown

	markstream-react	react-markdown	Streamdown
Streaming-first	✅	❌	✅
Incomplete Markdown	Streaming-aware mid-state handling	General renderer; intermediate states may look unstable	Streaming-optimized
Mermaid	Built-in Markstream integration / optional peer	Via plugins	Via @streamdown/mermaid
Virtualized long docs	Renderer-level live-node controls	App-level responsibility	App-level responsibility
Cross-framework parser	✅	❌	❌
Static Markdown	✅ (overhead)	✅ (best fit)	✅

For a detailed comparison, see markstream-react vs react-markdown and markstream-react vs Streamdown.

Try it

• Live playground
• Full documentation