API | Smoothstream

All three adapters share the same presentation options. React passes Markdown as children, Vue as markdown, and the DOM adapter as the first argument to update().

Shared options

Option	Type	Default	Description
`receiving`	`boolean`	`false`	Whether this snapshot may still grow. See Streaming a response.
`mode`	`"streaming"` \| `"static"`	`"streaming"`	Pace a live answer, or render completed Markdown immediately.
`reveal`	`"character"` \| `"word"`	`"character"`	How flowing text enters. See Reveal and timing.
`interval`	`number`	`3`	Base cadence between presentation units, in milliseconds.
`duration`	`number`	`1000`	Entrance duration in milliseconds for text and related motion.
`reducedMotion`	`"system"` \| `"always"` \| `"never"`	`"system"`	Reduced-motion policy. Independent of `mode`.
`unstyled`	`boolean`	`false`	Drop the default prose theme. Functional reveal CSS stays.
`codeHighlighter`	`CodeHighlighter`	—	Optional highlighter from `@smoothstream/code` or a custom implementation.

interval and duration must be finite, non-negative numbers. Zero is allowed. Use reducedMotion to control motion policy and mode to choose immediate presentation of completed content.

Adapter surfaces

React

Import { Smoothstream } from @smoothstream/react.

Prop	Type	Description
`children`	`string`	Optional accumulated Markdown string. Omitted input renders as empty.
`className`	`string`	Class names on the Markdown root.
`components`	`SmoothstreamComponents`	React overrides for supported semantic Markdown elements. See Component overrides.
`onRevealComplete`	`() => void`	Called once when the final unit begins appearing after input closes.
`onPresentationComplete`	`() => void`	Called once when entrances finish and temporary reveal DOM compacts.

See Completion callbacks for timing and a handoff example. Changing interval, duration, mode, or reveal remounts playback. The new Markdown must start with the previous source; replacement content requires a new key.

Import { Smoothstream } from @smoothstream/vue.

Prop	Type	Default	Description
`markdown`	`string`	`""`	Accumulated Markdown.
`class`	`string`	—	Fallthrough attribute merged onto the Markdown root.
`components`	`SmoothstreamComponents`	—	Vue overrides for supported semantic Markdown elements. See Component overrides.

Listen for @reveal-complete and @presentation-complete events. See Completion callbacks for timing and a handoff example. In templates, use kebab-case for multi-word props (:code-highlighter, :reduced-motion). Changing interval, duration, mode, or reveal rebuilds the session. The new markdown must start with the previous source; give the next answer a new key.

Import { createSmoothstream } from @smoothstream/dom.

const stream = createSmoothstream(container, options);stream.update(markdown, { receiving });stream.destroy();stream.element; // HTMLDivElement

Name	Description
`options.className`	Class names on the Markdown root. Constructor-only.
`options.onRevealComplete`	Called once when the final unit begins appearing after input closes.
`options.onPresentationComplete`	Called once when entrances finish and temporary reveal DOM compacts.
`update(markdown, { receiving? })`	Queue the latest append-only snapshot. `receiving` is the only option that updates after create; omission keeps its previous value.
`destroy()`	Tear down the root, listeners, pending work, and announcer.
`element`	The managed root inside the container you passed.

Callback functions are supplied at construction. See Completion callbacks for timing and a handoff example. mode, reveal, interval, duration, reducedMotion, unstyled, className, and codeHighlighter are constructor-only. update() throws if the new source does not start with the previous source, or if the controller has been destroyed.

Exported TypeScript names: SmoothstreamProps (React, Vue), SmoothstreamComponentName and SmoothstreamComponents (React, Vue), SmoothstreamComponentProps<Name> (React), SmoothstreamOptions, SmoothstreamUpdateOptions, and SmoothstreamController (DOM), plus SmoothstreamMode, SmoothstreamReducedMotion, and SmoothstreamReveal.

`createCodeHighlighter`

Import { codeHighlighter, createCodeHighlighter } from @smoothstream/code. codeHighlighter is createCodeHighlighter() with defaults.

Option	Type	Default	Description
`theme`	bundled Shiki theme name	`"github-light"`	Single theme. Mutually exclusive with `themes`.
`themes`	`{ light, dark }`	—	Paired bundled themes. Mutually exclusive with `theme`.
`defaultColor`	`"light"` \| `"dark"` \| `"light-dark()"` \| `false`	`"light"`	Shiki’s multiple-theme color strategy. Only with `themes`.
`showLanguageLabels`	`boolean`	`true`	Language name above each fenced block.

Pass the returned highlighter as codeHighlighter to any adapter. See Syntax highlighting.

Passing both theme and themes is rejected by TypeScript and throws at runtime for JavaScript callers. Unknown bundled theme names also throw. Unknown fence languages instead fall back to plain code with the selected theme’s palette.

For the CodeHighlighter request/result contract, see Custom highlighters. For visual theme controls, see CSS variables.