VercelVercel
/
Streamdown

Streamdown

A drop-in replacement for react-markdown, designed for AI-powered streaming.

npx ai-elements add response

or install it directly with npm i streamdown

Overview

Formatting Markdown is easy, but when you tokenize and stream it, new challenges arise.

With AI Elements, we wanted a way to stream safe and perfectly formatted Markdown without having to worry about the details.

So we built Streamdown, a drop-in replacement for react-markdown, designed for AI-powered streaming.

It powers the AI Elements Response component, but you can install it as a standalone package if you want.

Built-in typography styles

Streamdown comes with built-in Tailwind classes for common Markdown components — headings, lists, code blocks, and more.

With react-markdown
With Streamdown

GitHub Flavored Markdown

Streamdown supports GitHub Flavored Markdown (GFM) out of the box, so you get things like task lists, tables, and more.

With react-markdown
With Streamdown

Beautiful, interactive code blocks

Streamdown uses Shiki to highlight code blocks, and comes with a copy button so you can easily copy the code. Hover to reveal the copy button!

With react-markdown
With Streamdown

Mathematical Expressions

Streamdown supports LaTeX math expressions through remark-math and KaTeX, enabling beautiful mathematical notation in your markdown.

With react-markdown
With Streamdown

Interactive Mermaid Diagrams

Streamdown supports Mermaid diagrams with customizable themes. Current theme is "base".

With react-markdown
With Streamdown

Style unterminated Markdown blocks

Streamdown comes with built-in support for parsing unterminated Markdown blocks (# headings, `inline code`, **bold**, _italic_, [links]() and more), which makes streaming Markdown content much prettier.

With react-markdown
With Streamdown

Built-in security hardening

Streamdown ensures that untrusted markdown does not contain images from and links to unexpected origins which might have been subject to prompt injection.

With react-markdown
With Streamdown

Props

StreamdownProps extends the react-markdown component props with additional properties for streaming and security features.

All props are optional and have sensible defaults for typical use cases.

childrenstring

The markdown content to render. Can be a string of markdown or React nodes.

parseIncompleteMarkdownboolean

Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists).

Default: true

classNamestring

CSS class names to apply to the wrapper div element.

componentsobject

Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components).

rehypePluginsarray

Array of rehype plugins to use for processing HTML. Includes rehype-harden for security, rehype-raw for HTML support, and rehype-katex for math rendering by default. You can import defaultRehypePlugins to access individual default plugins when overriding.

Default: [[harden, { allowedImagePrefixes: ["*"], allowedLinkPrefixes: ["*"], defaultOrigin: undefined }], rehypeRaw, [rehypeKatex, { errorColor: "var(--color-muted-foreground)" }]]

remarkPluginsarray

Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default. You can import defaultRemarkPlugins to access individual default plugins when overriding.

Default: [[remarkGfm, {}], [remarkMath, { singleDollarTextMath: false }]]

shikiTheme[BundledTheme, BundledTheme] (from Shiki)

The themes to use for code blocks. Defaults to ["github-light", "github-dark"].

Default: ["github-light", "github-dark"]

mermaidConfigMermaidConfig (from Mermaid)

Custom configuration for Mermaid diagrams including theme, colors, fonts, and other rendering options. See Mermaid documentation for all available options.

controlsboolean | { table?: boolean, code?: boolean, mermaid?: boolean }

Control the visibility of copy and download buttons. Can be a boolean to show/hide all controls, or an object to selectively control buttons for tables, code blocks, and Mermaid diagrams.

Default: true

isAnimatingboolean

Whether the component is currently animating. This is used to disable the copy and download buttons when the component is animating.

Default: false

Upgrade your AI-powered streaming

Try Streamdown today and take your AI-powered streaming to the next level.

npx ai-elements add response

FAQ

Common questions about Streamdown and how it works with AI-powered streaming applications.