---
title: API
description: Shared Smoothstream options, adapter-specific surfaces, and createCodeHighlighter settings.
---

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](/get-started/streaming). |
| `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](/customize/reveal). |
| `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`. |

## Adapter surfaces

<Tabs>
  <Tab label="React" icon="/icons/react.svg">
    Import `{ Smoothstream }` from `@smoothstream/react`.

    | Prop | Type | Description |
    | --- | --- | --- |
    | `children` | `string` | Accumulated Markdown. Must be a string (or an array of strings). |
    | `className` | `string` | Class names on the Markdown root. |

    Changing `interval`, `duration`, `mode`, or `reveal` remounts playback. Changing the Markdown to a string that is not a prefix of the current source throws; remount with a new `key`.
  </Tab>
  <Tab label="Vue" icon="/icons/vue.svg">
    Import `{ Smoothstream }` from `@smoothstream/vue`.

    | Prop | Type | Default | Description |
    | --- | --- | --- | --- |
    | `markdown` | `string` | `""` | Accumulated Markdown. |
    | `class` | `string` | — | Fallthrough attribute merged onto the Markdown root. |

    In templates, use kebab-case for multi-word props (`:code-highlighter`, `:reduced-motion`). Changing `interval`, `duration`, `mode`, or `reveal` rebuilds the session. A non-prefix `markdown` update throws; give the next answer a new `key`.
  </Tab>
  <Tab label="Vanilla" icon="/icons/javascript-typescript.svg">
    Import `{ createSmoothstream }` from `@smoothstream/dom`.

    ```ts
    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. |
    | `update(markdown, { receiving? })` | Queue the latest append-only snapshot. `receiving` is the only option that updates after create. |
    | `destroy()` | Tear down the root, listeners, pending work, and announcer. |
    | `element` | The managed root inside the container you passed. |

    `mode`, `reveal`, `interval`, `duration`, `reducedMotion`, `unstyled`, `className`, and `codeHighlighter` are constructor-only. A non-prefix `update()` throws.
  </Tab>
</Tabs>

Exported TypeScript names: `SmoothstreamProps` (React, Vue), `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](/customize/syntax-highlighting).