Skip to main content
Streamdown is a React component library that makes rendering streaming Markdown content seamless and beautiful. Built specifically for AI-powered applications, it handles the unique challenges that arise when Markdown is tokenized and streamed in real-time.

​
The problem with streaming Markdown

When you stream Markdown content from AI models, traditional renderers weren’t designed for the challenges that emerge:
  • Incomplete syntax — Bold text that hasn’t been closed yet: **This is bol
  • Partial code blocks — Code blocks missing their closing backticks
  • Unterminated links — Links without closing brackets: [Click here
  • Progressive rendering — Content that updates token-by-token
Traditional Markdown renderers like react-markdown will either render these incomplete elements incorrectly or not at all, creating a jarring user experience during streaming.

​
The Streamdown solution

Streamdown intelligently handles incomplete Markdown by:
  1. Parsing incomplete blocks — Automatically detects and completes unterminated Markdown syntax via the remend engine
  2. Progressive formatting — Applies styling to partial content as it streams in
  3. Seamless transitions — Smoothly updates from incomplete to complete states
  4. Zero configuration — Works out of the box with sensible defaults

​
Key features

Drop-in replacement

Identical API to react-markdown — swap it in with no code changes required.

Streaming-optimized

Built from the ground up to handle streaming AI output gracefully.

Remend engine

Automatically completes incomplete bold, italic, code, links, and more.

GitHub Flavored Markdown

Tables, task lists, and strikethrough support out of the box.

Rich plugin ecosystem

Syntax highlighting, math (KaTeX), diagrams (Mermaid), and CJK support.

Security-first

Built with rehype-harden and rehype-sanitize for safe rendering.

Performance optimized

Memoized rendering, React Transitions, and stable block keys for efficient updates.

Customizable

Override components, themes, icons, translations, and CSS variables.

​
Packages

The Streamdown ecosystem consists of these npm packages:
PackageDescription
streamdownCore React component
remendSelf-healing markdown preprocessor (standalone)
@streamdown/codeShiki syntax highlighting plugin
@streamdown/mathKaTeX math rendering plugin
@streamdown/mermaidMermaid diagram plugin
@streamdown/cjkCJK text handling plugin

​
Quick start

npm i streamdown

import { Streamdown } from "streamdown";

export default function Chat({ text, isStreaming }) {
  return (
    <Streamdown isAnimating={isStreaming}>
      {text}
    </Streamdown>
  );
}

Getting started

Install and configure Streamdown in your project

Usage guide

Learn the full API with real-world examples

Plugins

Add syntax highlighting, math, and diagrams

API reference

Full props reference for the Streamdown component

Build docs developers (and LLMs) love

Get started for freeTalk to us