Logo

Introduction

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.

Start here

Quickstart

Install an adapter and render your first response.

React

The Smoothstream component, children, and Next.js notes.

Streaming a response

Pass accumulated Markdown, signal receiving, and remount per response.

Vue

The markdown prop, Vue SSR, and Nuxt.

API

Shared options, adapter differences, and the code highlighter.

Vanilla DOM

createSmoothstream, update, and destroy.

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.

Packages

PackageRole
@smoothstream/reactReact component. Peer dependencies: React 18.2+ or 19, React DOM.
@smoothstream/vueVue 3 component. Peer dependency: Vue 3.5+.
@smoothstream/domImperative browser API. No framework peer.
@smoothstream/codeOptional 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

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.

No. Adapters load functional reveal CSS and a default prose theme automatically. Use unstyled if you want Tailwind Typography or your own stylesheet to own the look.

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.

© 2026 Smoothstream. All rights reserved.

Built with Radiant Docs