# Markstream React

> Integrate the beta markstream-react package into a React 18+ or Next app. Use when Codex needs to add the React renderer, choose the root, `next`, or `server` entrypoint, import CSS correctly, choose between `content` and `nodes`, keep client boundaries safe, add renderer-local `streamingComponents` or `htmlComponents`, use parser transforms, or prepare a repo for `react-markdown` migration.

- Skill: `simon-he95/markstream-react-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add simon-he95/markstream-react-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/simon-he95/markstream-react-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Simon-He95 (https://skillmd.com/u/simon-he95)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/simon-he95/markstream-react-2

---


# Markstream React

Use this skill when the host app is React or Next and the task is to wire Markstream safely.

## Workflow

1. Confirm the repo is React 18+ or a compatible Next host and accepts a beta renderer API.
2. Install `markstream-react` plus only the requested optional peers.
3. Import `markstream-react/index.css` from the app shell or client entry.
4. Choose the entrypoint that matches the rendering boundary.
   - Use `markstream-react` for the normal client renderer.
   - Use `markstream-react/next` for the Next-specific component surface.
   - Use `markstream-react/server` for server rendering without client hooks.
5. Start with `content`.
   - For streaming or high-frequency AI output, keep `content` and use built-in smooth streaming first.
     - `smoothStreaming="auto"` is the default and activates when `typewriter={true}` or `maxLiveNodes <= 0`.
     - `typewriter` only controls the blinking cursor and defaults to `false`.
     - `fade` controls node enter and streamed-text fade animations and defaults to `true`.
   - **Streaming vs recovering history**: in chat UIs the same renderer starts streaming and later switches to history when `final={true}`.
     - Streaming: `smoothStreaming="auto"`, `fade={false}`, `typewriter={true}`. This is a conservative visual/performance choice, not an API incompatibility. This adapter has not adopted Vue 3's bounded append fades, so verify its animation behavior before enabling both.
     - Recovering history: `smoothStreaming={false}`, `fade={true}`, `typewriter={false}`. Content is already complete — pacing would slow it down, but fade gives a polished entry animation.
     - Dynamic switch: `smoothStreaming={isStreaming ? 'auto' : false}`, `fade={!isStreaming}`.
   - Move to `nodes` + `final` only for worker-preparsed content, shared AST stores, or custom AST control.
   - Remember that `htmlPolicy` now defaults to `safe`, and Mermaid strict mode is on by default through `mermaidProps`.
6. Respect SSR boundaries in Next.
   - Prefer `use client`, dynamic imports with `ssr: false`, or other client-only boundaries when browser-only peers are involved.
7. Use renderer-local components before custom parser work.
   - `streamingComponents` receives parser-backed `NodeComponentProps`, supports incomplete custom tags, and automatically contributes its keys to the effective `customHtmlTags` list.
   - `htmlComponents` receives sanitized HTML attributes plus `children`; it does not receive the parser node/loading contract.
   - Prefer `defineStreamingComponents(...)` and `defineHtmlComponents(...)` for typed maps.
   - Keep scoped `setCustomComponents` for built-in node overrides or shared compatibility registration.
   - Use `parseOptions` transforms only when migration requires token or AST changes.
8. Validate with the smallest useful dev, build, or typecheck command.

## Default Decisions

- Renderer wiring first, migration cleanup second.
- If the repo already uses `react-markdown`, pair this skill with `markstream-migration`.
- Prefer `content` with built-in smooth streaming for most AI chat / token streaming surfaces.
- Streaming vs recovering history: when a chat message transitions from streaming to history (e.g. `final` becomes `true`), switch props dynamically — `smoothStreaming="auto"`, `fade={false}` for streaming; `smoothStreaming={false}`, `fade={true}` for history. See `docs/guide/ai-chat-streaming.md` for full examples.
- Move to `nodes` only when another layer owns parsing or AST transforms.
- Prefer renderer-local custom-tag maps over global registry mutation.
- Prefer the smallest client-only boundary that solves the SSR issue.
- Avoid `smoothStreaming={true}` for first-screen SSR content unless intentionally starting from blank; auto mode uses the mounted gate.
- Keep `htmlPolicy="safe"` and Mermaid strict mode unless the request is preserving trusted legacy rendering.
- If a trusted surface needs older behavior, use `htmlPolicy="trusted"` and `mermaidProps={{ isStrict: false }}` only on that surface and explain why.

## Useful Doc Targets

- `docs/guide/react-quick-start.md`
- `docs/guide/react-installation.md`
- `docs/guide/react-components.md`
- `docs/guide/react-next-ssr.md`
- `docs/guide/react-markdown-migration.md`
- `docs/guide/component-overrides.md`