---
title: Introduction
description: Turn a stream of Markdown snapshots into a stable, paced, semantic presentation for React, Vue, and the browser DOM.
---

Smoothstream presents Markdown as it arrives from a language model without letting transport bursts, incomplete syntax, or reparsed snapshots dictate the reading experience.

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.

<Callout type="info" title="Install a renderer, not the engine">
  Application code uses `@smoothstream/react`, `@smoothstream/vue`, or `@smoothstream/dom`. Each adapter depends on the shared core and styles, so you do not install those separately.
</Callout>

## Start here

<Columns columns={2}>
  <Column>
    <Card title="Quickstart" href="/get-started/quickstart" icon="lucide:rocket">
      Install an adapter and render your first response.
    </Card>
  </Column>
  <Column>
    <Card title="React" href="/adapters/react" icon="/icons/react.svg">
      The `Smoothstream` component, `children`, and Next.js notes.
    </Card>
  </Column>
</Columns>

<Columns columns={2}>
  <Column>
    <Card title="Streaming a response" href="/get-started/streaming" icon="lucide:radio">
      Pass accumulated Markdown, signal `receiving`, and remount per response.
    </Card>
  </Column>
  <Column>
    <Card title="Vue" href="/adapters/vue" icon="/icons/vue.svg">
      The `markdown` prop, Vue SSR, and Nuxt.
    </Card>
  </Column>
</Columns>

<Columns columns={2}>
  <Column>
    <Card title="API" href="/reference/api" icon="lucide:book-marked">
      Shared options, adapter differences, and the code highlighter.
    </Card>
  </Column>
  <Column>
    <Card title="Vanilla DOM" href="/adapters/vanilla" icon="/icons/javascript-typescript.svg">
      `createSmoothstream`, `update`, and `destroy`.
    </Card>
  </Column>
</Columns>

## Why a dedicated renderer

An LLM stream is a transport timeline, not a presentation timeline. Tokens arrive in bursts. Markdown also changes meaning as it grows: an unmatched `**` is not emphasis yet, a table may still gain 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**. The source can arrive quickly, slowly, or all at once; readers still see the same semantic content on a stable schedule.

## 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`](/customize/syntax-highlighting).

## 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. |

`@smoothstream/core` and `@smoothstream/styles` ship as dependencies of the adapters. Install them directly only if you are writing an adapter.

## 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

<AccordionGroup>
  <Accordion title="How is this different from animating a normal Markdown renderer?">
    A typical snapshot renderer parses whatever has arrived and paints it. CSS can soften the flash, and some libraries repair incomplete Markdown so it looks finished.

    Smoothstream treats streaming Markdown as a presentation problem: it withholds unsafe structure, keeps one monotonic schedule, and uses different reveal strategies for prose, tables, code, lists, and images. The finished document is ordinary semantic HTML, not a permanent animation tree.
  </Accordion>
  <Accordion title="Do I need Tailwind CSS?">
    No. Adapters load functional reveal CSS and a default prose theme automatically. Use [`unstyled`](/customize/styling) if you want Tailwind Typography or your own stylesheet to own the look.
  </Accordion>
  <Accordion title="Can I render previous chat messages with the same component?">
    Yes. Keep the live answer in `mode="streaming"` and set `receiving` to `false` when the model is done. Mount completed history with `mode="static"` so it appears immediately. Give each response its own component instance or controller.
  </Accordion>
</AccordionGroup>