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

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 | React.ReactNode

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).

allowedImagePrefixesstring[]

Array of allowed URL prefixes for images. Use ["*"] to allow all images.

Default: ["*"]

allowedLinkPrefixesstring[]

Array of allowed URL prefixes for links. Use ["*"] to allow all links.

Default: ["*"]

defaultOriginstring

Default origin to use for relative URLs in links and images.

rehypePluginsarray

Array of rehype plugins to use for processing HTML. Includes KaTeX for math rendering by default.

Default: [rehypeKatex]

remarkPluginsarray

Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default.

Default: [remarkGfm, remarkMath]

Upgrade your AI-powered streaming

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

npx ai-elements add response