markstream-react

Original：🇺🇸 English

Translated

Integrate markstream-react into a React 18+ or Next app. Use when Codex needs to add the React renderer, import CSS correctly, choose between `content` and `nodes`, keep Next client boundaries safe, convert renderer overrides, or prepare a repo for `react-markdown` migration.

3installs

Sourcesimon-he95/markstream-vue

Added on2026-04-20

NPX Install

npx skill4agent add simon-he95/markstream-vue markstream-react

SKILL.md Content

View Translation Comparison →

Markstream React

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

Workflow

Confirm the repo is React, Next, or another React-based host.
Install
```
markstream-react
```
plus only the requested optional peers.
Import
```
markstream-react/index.css
```
from the app shell or client entry.
Start with
```
content
```
.
- Move to
```
nodes
```
  plus
```
final
```
  only when the UI receives streaming or high-frequency updates.
Respect SSR boundaries in Next.
- Prefer
```
use client
```
  , dynamic imports with
```
ssr: false
```
  , or other client-only boundaries when browser-only peers are involved.
Use scoped Markstream overrides before custom parser work.
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 the smallest client-only boundary that solves the SSR issue.

Useful Doc Targets

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