Markstream React
Overview
Wire the beta React renderer into React 18+ or Next.js without crossing client/server boundaries or reaching for AST control unnecessarily.
When to Use
Use for React/Next setup, root/next/server entrypoints, streaming, component overrides, or migration support. Pair with markstream-migration for renderer replacement.
Workflow
Inspect the existing package manager, installed package version and project conventions. A requested scoped integration already authorizes routine source/dependency edits; seek approval only for a material scope expansion or unresolved beta/alpha adoption decision.
- Confirm React 18+ and acceptance of a beta package.
- Install only requested peers and import
markstream-react/index.css.
- Use the root entry for client rendering,
/next for Next-specific components, and /server for server rendering without client hooks.
- Start with
content and smoothStreaming="auto"; use nodes plus final only when another layer owns parsing.
- For live chat disable fade and opt into the cursor. On completion set
final, disable pacing/cursor, and enable fade only if desired.
- Keep browser-only peers inside
'use client', dynamic ssr: false, or another minimal boundary.
- Prefer
streamingComponents for parser-backed tags and htmlComponents for sanitized props. Use scoped registry overrides for built-in nodes.
- Keep
htmlPolicy="safe" and Mermaid strict; validate client, server, and incremental paths.
Example
'use client' // Required when this example is used in a Next.js App Router client boundary
import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'
export function StreamingAnswer({
content,
isDone,
}: {
content: string
isDone: boolean
}) {
return (
<MarkdownRender
content={content}
final={isDone}
fade={isDone}
typewriter={!isDone}
smoothStreaming={isDone ? false : 'auto'}
htmlPolicy="safe"
/>
)
}
Limitations
- The package is beta and requires React 18+.
- Browser-only peers require client boundaries under SSR.
- Complex parser parity requires separate migration review.
Security & Safety Notes
Review dependencies and never opt untrusted model output into trusted HTML or loose diagram rendering.
Verify props, export paths and peer ranges against the installed package, not a mutable upstream main. Test partial and completed streams, malformed/untrusted Markdown, links and image URLs, cancellation and reduced motion. Safe HTML and strict diagrams reduce exposure but do not alone enforce URL/network privacy or application component permissions.