Headless streaming markdown engine for React — render markdown as it arrives
Documents & Playground · Changelog · Report Bug · Request Feature
Table of contents
- Smooth reveal — character or word granularity with three cadence presets (
realtime,balanced,silky). - Block cache — finished blocks memoize; only the open tail block re-renders on each commit.
- LaTeX guard — unbalanced delimiters stay inert until the stream closes them, so
$x^2$never flashes as raw source. - Headless — no stylesheet, no component dependencies. Bring your own CSS.
Important
This package is ESM only.
To install Streamdown, run the following command:
$ pnpm add @lobehub/streamdownreact and react-dom ^19 are peer dependencies. The package ships a 'use client' boundary, so it renders from React Server Component frameworks without extra wiring.
import { Streamdown } from '@lobehub/streamdown';
import rehypeKatex from 'rehype-katex';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
const Message = ({ content }: { content: string }) => (
<Streamdown content={content} latexGuard rehypePlugins={[rehypeKatex]} remarkPlugins={[remarkGfm, remarkMath]} />
);content may be a partial document — an unterminated code fence, a half-written table, or a formula missing its closing $. The engine re-lexes only the open tail block, so the cost of a commit grows with the tail, not with the message.
Style the output yourself. The rendered tree is plain markdown HTML plus fade animation classes (STREAMDOWN_ANIMATED_CLASS, STREAM_FADE_DURATION).
| Prop | Type | Default | Description |
|---|---|---|---|
content |
string |
— | The (partial) markdown to render |
smoothing |
'realtime' | 'balanced' | 'silky' |
'balanced' |
Reveal pacing preset |
granularity |
'char' | 'word' |
'char' |
Fade animation unit |
latexGuard |
boolean |
false |
Hold the last frame while a trailing formula is incomplete |
preprocess |
(text: string) => string |
— | Transform content before rendering |
components / remarkPlugins / rehypePlugins |
— | — | Passed through to react-markdown |
Everything the component is built on is exported for custom pipelines:
useSmoothStreamContent/useStreamQueue— pacing and block-queue primitives.rehypeStreamAnimated— the rehype plugin that tags freshly revealed nodes.CachedMarkdown,findOpenFenceLanguage,STREAM_FADE_DURATION.- LaTeX preprocessing:
preprocessLaTeX,validateLatexExpressions,isLastFormulaRenderable, and friends. @lobehub/streamdown/profiler—StreamdownProfilerProviderand hooks for measuring commit cost.
Each top-level block is parsed independently, so a reference whose target sits in another block stays literal: GFM footnotes, reference-style links ([text][ref]) and reference-style images. Inline forms are unaffected. Supply a remark/rehype plugin pair if you need to resolve these out of band.
You can use Github Codespaces for online development:
Or clone it for local development:
$ git clone https://github.com/lobehub/streamdown.git
$ cd streamdown
$ pnpm install
$ pnpm devThe remaining scripts:
$ pnpm build # library → es/
$ pnpm build:site # site → site/dist
$ pnpm deploy:site # build + wrangler pages deploy
$ pnpm test # vitest
$ pnpm type-check # tsc, library + site
$ pnpm lintContributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.
Releases are automated with semantic-release from gitmoji-style commit messages on main.
Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
- react-markdown - Markdown to React renderer
- marked - Markdown lexer
- KaTeX - Fast math typesetting
- remend - Partial markdown completion
- 🤯 Lobe Chat - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
🅰️ Lobe Theme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.- 🧸 Lobe Vidol - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.
- 🍭 Lobe UI - An open-source UI component library for building AIGC web apps.
- 🥨 Lobe Icons - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
- 📊 Lobe Charts - React modern charts components built on recharts
- ✍️ Streamdown - Headless streaming markdown engine for React
- 🎤 Lobe TTS - A high-quality & reliable TTS/STT library for Server and Browser
- 🌏 Lobe i18n - Automation ai tool for the i18n (internationalization) translation process.