# smooth-stream-text > Adaptive text-stream smoothing for AI chat interfaces. Keep your Markdown renderer and pace incoming text with a zero-dependency headless core. React, Vue, Svelte and Web Component integrations are included; a fade-in reveal is optional. Version 0.2.2 on npm as `smooth-stream-text`. Install with `npm install smooth-stream-text` (or the project's package manager). Entry points: `smooth-stream-text` (core, no DOM, Node 18+), `smooth-stream-text/react`, `smooth-stream-text/vue`, `smooth-stream-text/svelte`, `smooth-stream-text/dom`, `smooth-stream-text/web-component`. You pass the text received so far and whether the answer is done; it returns a prefix that grows at an even, adaptive rate, which you render with your existing renderer. Finished text (history) appears at once. It is not a transport, not a Markdown parser and not a sanitizer. Positions and rates count UTF-16 code units. ## Introduction - [What it does](https://smooth-stream-text.vercel.app/docs/index.md): smooth-stream-text paces streamed LLM text on the client so it appears at an even rate, while you keep your own Markdown renderer. When it fits, when it does not, and which integration to use. - [Getting started](https://smooth-stream-text.vercel.app/docs/getting-started.md): Install smooth-stream-text, feed it the text your stream has received, and render the paced text it returns. React, Vue, Svelte, plain JavaScript and the headless core. ## Frameworks - [React](https://smooth-stream-text.vercel.app/docs/react.md): Pace streamed LLM text in React with useSmoothText and keep react-markdown or any other renderer. Hooks, the SmoothText component, the optional reveal, history, Show all and StrictMode. - [Vue and Nuxt](https://smooth-stream-text.vercel.app/docs/vue.md): Pace streamed LLM text in Vue 3 and Nuxt with useSmoothStream and keep your own Markdown rendering. Refs and getters, the SmoothText component, KeepAlive, and server-rendered history in Nuxt. - [Svelte and SvelteKit](https://smooth-stream-text.vercel.app/docs/svelte.md): Pace streamed LLM text in Svelte 4 and 5 and SvelteKit with the smoothStream store or the smoothText action. Runes, cleanup, Show all, and server-rendered history. - [Plain JavaScript and Web Component](https://smooth-stream-text.vercel.app/docs/dom.md): Pace and reveal streamed text without a framework using createSmoothText, or with the custom element in plain HTML, Angular, Solid, Astro or any framework that renders custom elements. ## Integrations - [AI SDK](https://smooth-stream-text.vercel.app/docs/integrations/ai-sdk.md): Pace answers from the Vercel AI SDK's useChat in the browser with smooth-stream-text. Message parts, tool calls, status, stop, errors, history, and how it relates to smoothStream(). - [Next.js](https://smooth-stream-text.vercel.app/docs/integrations/nextjs.md): Use smooth-stream-text in the Next.js App Router. Client boundaries, server-rendered conversation history that does not replay, Cache Components, hydration and remounts. - [Streamdown](https://smooth-stream-text.vercel.app/docs/integrations/streamdown.md): Use smooth-stream-text for pacing and Streamdown for rendering and animation, with exactly one animation layer. When Streamdown alone is enough, reduced motion, and the Tailwind setup Streamdown needs. ## Concepts - [Latency and completion](https://smooth-stream-text.vercel.app/docs/concepts/latency.md): What pacing costs in time, how the tail of an answer drains, the difference between transport done, pacing done and reveal settled, background tabs, Show all, and why two smoothing layers add up. - [Text boundaries](https://smooth-stream-text.vercel.app/docs/concepts/text-boundaries.md): Where smooth-stream-text lets the visible text end - grapheme clusters, emoji, CJK, Thai and Arabic, whole words, and Markdown delimiters - and the limits of those guarantees. - [Accessibility](https://smooth-stream-text.vercel.app/docs/accessibility.md): Reduced motion, screen readers, selection and keyboard behaviour with smooth-stream-text, and what stays the responsibility of your renderer. ## Reference - [API](https://smooth-stream-text.vercel.app/docs/api.md): Complete API reference for smooth-stream-text 0.2 - entry points, the headless core, pacing and reveal options with defaults, the DOM handle, React hooks and components, Vue, Svelte and the Web Component. ## Examples - [React with react-markdown](https://github.com/crmapache/smooth-stream-text/tree/main/examples/react-markdown): Vite app, simulated stream, history, Stop and Show all. - [Next.js with the AI SDK](https://github.com/crmapache/smooth-stream-text/tree/main/examples/next-ai-sdk): useChat, a route handler, tool calls, server-rendered history. - [React with Streamdown](https://github.com/crmapache/smooth-stream-text/tree/main/examples/react-streamdown): Pacing in front of Streamdown, which keeps the animation. - [Nuxt](https://github.com/crmapache/smooth-stream-text/tree/main/examples/nuxt): useSmoothStream with server-rendered history. - [SvelteKit](https://github.com/crmapache/smooth-stream-text/tree/main/examples/sveltekit): The smoothStream store with server-rendered history. - [Plain JavaScript and Web Component](https://github.com/crmapache/smooth-stream-text/tree/main/examples/vanilla): createSmoothText and side by side. ## Optional - [Changelog](https://smooth-stream-text.vercel.app/docs/changelog.md): Release history of smooth-stream-text, with the behaviour changes and fixes in each version. - [Benchmarks](https://smooth-stream-text.vercel.app/docs/benchmarks.md): Reproducible measurements of what smooth-stream-text costs and changes - latency, evenness, broken text, rendering work and bundle size - on recorded and synthetic LLM streams, next to rendering as received, fixed-rate typing and the AI SDK's smoothStream(). - [Choosing an approach](https://smooth-stream-text.vercel.app/docs/comparisons.md): Server-side transforms, renderers with built-in animation, React output libraries, other pacing controllers and a hook of your own, compared by what each one controls, so you can decide whether you need smooth-stream-text at all. - [Case studies](https://smooth-stream-text.vercel.app/docs/case-studies.md): Real projects that use smooth-stream-text, what problem it solved there and how it is wired, with links to the code. Includes a template for adding your own. - [Source on GitHub](https://github.com/crmapache/smooth-stream-text) - [Package on npm](https://www.npmjs.com/package/smooth-stream-text) - [All of the docs above in one file](https://smooth-stream-text.vercel.app/llms-full.txt)