Skip to content

React 流式 Markdown 渲染器

markstream-react 面向 React 18/19、Next.js 和 Remix。它适合把 LLM token 流、SSE 或 WebSocket 输出实时渲染成 Markdown,同时处理未闭合代码块、部分数学公式、长回答和渐进式 Mermaid 图表。和 react-markdown 相比,它不是为了最小静态渲染而设计,而是优先解决流式体验和长内容稳定性。

场景推荐
短静态 Markdown可以继续用 react-markdown
AI 聊天、SSE、WebSocket使用 markstream-react
Next.js SSR-first 页面Next.js
高频 token 流外部批处理并传 nodes
bash
pnpm add markstream-react
tsx
import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

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

Next.js 中实时流式区域应放在 'use client' 组件里。需要服务器先输出 HTML 或 server-only 渲染时,不要只看 React 页面,直接看 Next.js 流式 Markdown 渲染器

不适合的情况:只做博客或 README 预览、强依赖 remark/rehype 生态、或首要目标是最小 bundle。