Smoothstream renders Markdown as it arrives from a language model, with paced text and stable formatting. Use it for assistant responses and other Markdown that grows over time.
You pass the Markdown received so far. Smoothstream decides when each heading, paragraph, list, table, code block, and image is safe to show, then reveals it on a schedule that does not restart when the next tokens land.
Start here
Why a dedicated renderer
Tokens arrive in bursts. Markdown also changes meaning as it grows: an unmatched ** is not emphasis yet, a later table row may need wider columns, and a code fence may still be open.
Rendering every snapshot immediately tends to show raw syntax, resize tables, replay animation, and wrap words that later jump to the next line.
Smoothstream separates receiving the answer from presenting the answer. It uses the received text to confirm structure, then adds new content to a schedule that preserves earlier entrances. Network delays can still pause progress; packet sizes do not dictate how many characters appear at once.
What you get
- Stable schedule. Already-revealed content keeps its place when a new snapshot arrives. Packet boundaries do not become the animation timeline.
- Structural hold-back. Incomplete emphasis, links, list items, table geometry, and code lines stay withheld until their shape is confirmed.
- Semantic HTML. Temporary reveal markup compacts back to ordinary headings, lists, tables, links, and code. That is what you style, copy, and expose to assistive technology.
Markdown is sanitized by default. Reveal mechanics and a standalone prose theme load automatically. Syntax highlighting is optional through @smoothstream/code.
Packages
| Package | Role |
|---|---|
@smoothstream/react | React component. Peer dependencies: React 18.2+ or 19, React DOM. |
@smoothstream/vue | Vue 3 component. Peer dependency: Vue 3.5+. |
@smoothstream/dom | Imperative browser API. No framework peer. |
@smoothstream/code | Optional Shiki highlighter, used by any adapter. |
Choose the React, Vue, or Vanilla DOM guide for framework-specific setup and lifecycle details. @smoothstream/core and @smoothstream/styles ship as dependencies of these adapters.
Your application owns transport, message state, and scrolling. Smoothstream presents one response at a time. It does not require a particular model provider or chat SDK.
Requirements
- Node.js 20 or later to consume the published packages
- A browser runtime for playback, image loading, and highlighting
- React 18.2+ / 19, Vue 3.5+, or a DOM container, depending on the adapter
Once the basic integration works, explore Markdown behavior, Styling, and Accessibility. For exact options and defaults, use the API reference.