React Markdown renderer optimized for large documents with progressive Mermaid rendering, streaming diff code blocks, and fast real-time preview. Built on stream-markdown AST for consistent rendering across frameworks. Perfect for documentation sites, AI
npm install markstream-reactReact renderer that consumes the structured AST output from stream-markdown-parser and renders it with lightweight semantic HTML components. This is the React counter-part to the Vue renderer that powers markstream-vue.
``bash`
pnpm --filter markstream-react dev
`bash`
pnpm --filter markstream-react build
`tsx
import NodeRenderer from 'markstream-react'
import 'markstream-react/index.css'
export default function Article({ markdown }: { markdown: string }) {
return (
)
}
`
You can also pass a pre-parsed nodes array if you already have AST data.
- Non-Tailwind projects: keep importing markstream-react/index.css (includes precompiled utilities for the renderer).markstream-react/index.tailwind.css
- Tailwind projects (avoid duplicate utilities): import and add require('markstream-react/tailwind') to your tailwind.config.js content.
)Custom tag-like blocks are exposed as nodes with type: 'thinking' (the tag name, no angle brackets) when you register the tag in customHtmlTags or register a custom component mapping for it.
`tsx
import type { NodeComponentProps } from 'markstream-react'
import NodeRenderer, { setCustomComponents } from 'markstream-react'
function ThinkingNode(props: NodeComponentProps<{ type: 'thinking', content: string }>) {
const { node, ctx } = props
return (
setCustomComponents('chat', { thinking: ThinkingNode })
``