Vanilla DOM | Smoothstream

@smoothstream/dom is the framework-free adapter. It creates one managed root inside a container and reconciles the same keyed HTML model the React and Vue adapters use.

npm install @smoothstream/dom

pnpm add @smoothstream/dom

yarn add @smoothstream/dom

bun add @smoothstream/dom

There is no framework peer dependency. Reveal CSS and the default prose theme import automatically.

Create, update, destroy

assistant-message.ts

import { createSmoothstream } from "@smoothstream/dom"; const stream = createSmoothstream(document.querySelector("#response")!, {  className: "assistant-markdown",  receiving: true,}); stream.update(markdownReceivedSoFar, { receiving: true });stream.update(completeMarkdown, { receiving: false }); stream.destroy();

Method	Role
`createSmoothstream(container, options)`	Mounts a root inside `container` and returns a controller.
`update(markdown, options?)`	Queues the latest append-only snapshot. `options.receiving` is the only value you can change after create.
`destroy()`	Removes the root, listeners, pending work, and the completion announcer.
`element`	The managed `HTMLDivElement`.

Options are mostly constructor-only

mode, reveal, interval, duration, reducedMotion, unstyled, className, and codeHighlighter are read when the controller is created. Changing them later has no effect.

To present a different response, or to use different timing, call destroy() and create a new controller.

const history = createSmoothstream(historyEl, { mode: "static" });history.update(previousMessage.content); const live = createSmoothstream(liveEl, { receiving: true });live.update(partial, { receiving: true });// Keep this controller in streaming mode when input closes:live.update(complete, { receiving: false });

update() throws if the new string is not a prefix of the previous source, or if you call it after destroy().

Full option list: API.