Streamdown

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

or with AI Elements: npx ai-elements@latest add message

Powering AI experiences for

Get started in seconds

Install only what you need. Plugins are optional and tree-shakeable for minimal bundle size.

app/chat/page.tsx

import { useChat } from "@ai-sdk/react";
import { Streamdown } from "streamdown";
import { code } from "@streamdown/code";
import { mermaid } from "@streamdown/mermaid";
import { math } from "@streamdown/math";
import { cjk } from "@streamdown/cjk";
import "katex/dist/katex.min.css";

export default function Chat() {
  const { messages, status } = useChat();

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? (
              <Streamdown
                key={index}
                plugins={{ code, mermaid, math, cjk }}
                isAnimating={status === 'streaming'}
              >
                {part.text}
              </Streamdown>
            ) : null,
          )}
        </div>
      ))}
    </div>
  );
}

app/chat/page.tsx

import { useChat } from "@ai-sdk/react";
import { Streamdown } from "streamdown";
import { code } from "@streamdown/code";
import { mermaid } from "@streamdown/mermaid";
import { math } from "@streamdown/math";
import { cjk } from "@streamdown/cjk";
import "katex/dist/katex.min.css";

export default function Chat() {
  const { messages, status } = useChat();

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? (
              <Streamdown
                key={index}
                plugins={{ code, mermaid, math, cjk }}
                isAnimating={status === 'streaming'}
              >
                {part.text}
              </Streamdown>
            ) : null,
          )}
        </div>
      ))}
    </div>
  );
}

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

Streaming caret indicators

Show users that content is still being generated with built-in caret styles — block or circle.

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

CJK Language Support

Built-in support for Chinese, Japanese, and Korean languages ensures emphasis markers work correctly with ideographic punctuation—critical for AI-generated content.

With react-markdown

With Streamdown

Beautiful, interactive code blocks

Streamdown uses Shiki to highlight code blocks, and comes with copy and download buttons in the header.

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

Link safety modal

Protect users from malicious links with a confirmation modal that displays the full URL before navigation.

With react-markdown

With Streamdown

Upgrade your AI-powered streaming

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