Streamdown: Vercel's Open-Source Markdown Renderer Built for AI Streaming

If you're building AI-powered applications that stream responses in real time, you've probably run into a frustrating problem: traditional Markdown renderers weren't designed for it.

Incomplete syntax, unterminated code blocks, half-rendered bold text the user experience falls apart the moment you start streaming tokens from an LLM.

That's exactly the problem Streamdown solves. Built by the team at Vercel and released as open source, Streamdown is a drop-in replacement for react-markdown that's specifically engineered for AI streaming scenarios.

It handles the chaos of incomplete Markdown gracefully, renders content beautifully as it arrives, and ships with built-in security hardening against prompt injection attacks.

In this guide, I'll walk you through everything you need to know about Streamdown from installation and configuration to its full feature set and real-world use cases.

Streamdown website homepage showing the AI-powered streaming markdown component library

What Is Streamdown?

Streamdown is a React component library that makes rendering streaming Markdown content seamless and beautiful. It was announced by Vercel in August 2025 and powers the AI Elements Response component, though it can be installed and used as a completely standalone package.

At its core, Streamdown addresses the unique challenges that emerge when Markdown content is tokenized and streamed from AI models in real time:

• 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 renderers like react-markdown either render these incomplete elements incorrectly or skip them entirely, creating a jarring experience. Streamdown fixes all of this out of the box.

Official Links:

• 🌐 Website & Docs: streamdown.ai/docs
• 💻 GitHub Repository: github.com/vercel/streamdown
• 📦 npm Package: npmjs.com/package/streamdown

Getting Started: Installation & Setup

Setting up Streamdown takes just a few minutes. You have two paths depending on your project.

Standalone Installation

npm i streamdown
# or
pnpm add streamdown
# or
yarn add streamdown

Via AI Elements

npx ai-elements@latest add message

Tailwind CSS Configuration

Streamdown uses Tailwind CSS for styling, so you need to tell Tailwind to scan Streamdown's source files. Add this directive to your

@source "../node_modules/streamdown/dist/*.js";

For monorepo setups (npm workspaces, Turbo, pnpm), adjust the relative path to point to where node_modules/streamdown is hoisted — typically the root

/* Example: apps/web/app/globals.css → 3 levels up to root */
@source "../../../node_modules/streamdown/dist/*.js";

That's the setup. Now let's look at how to use it.

Basic Usage

Streamdown is designed as a direct drop-in for react-markdown, so the API will feel immediately familiar:

import { Streamdown } from 'streamdown';

export default function Page() {
  const markdown = "# Hello World\n\nThis is **streaming** markdown!";
  return <Streamdown>{markdown}</Streamdown>;
}

With Vercel AI SDK (The Real Power)

Streamdown truly shines when paired with the Vercel AI SDK for real-time AI chat interfaces:

'use client';

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';
import 'streamdown/styles.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}
                animated
                plugins={{ code, mermaid, math, cjk }}
                isAnimating={status === 'streaming'}
              >
                {part.text}
              </Streamdown>
            ) : null
          )}
        </div>
      ))}
    </div>
  );
}

This gives you a fully functional AI chat with syntax-highlighted code blocks, mathematical equations, Mermaid diagrams, and CJK language support — all streaming in real time.

Configuration & Props

Streamdown offers a clean, well-organized API. Here's the complete prop reference:

Core Props

Styling Props

Styling Props

Plugin Props

Plugin Props

Interactive Controls

<Streamdown
  controls={{
    table: true,       // Table download button
    code: true,        // Code copy button
    mermaid: {
      download: true,  // Mermaid SVG download
      copy: true,      // Copy diagram source
      fullscreen: true, // Fullscreen view
      panZoom: true     // Pan/zoom controls
    }
  }}
>
  {markdown}
</Streamdown>

Default Rehype Plugins

Streamdown ships with two critical rehype plugins enabled by default:

• rehype-harden — Security hardening that validates image and link origins
• rehype-raw — HTML support within Markdown content

Feature Deep Dive

Streamdown isn't just a renderer — it's a complete toolkit. Here's what ships with it.

1. Unterminated Block Parsing

This is Streamdown's killer feature. When parseIncompleteMarkdown is enabled (the default), Streamdown uses the remend package to preprocess Markdown before rendering. It automatically detects and completes:

• Unclosed bold/italic markers
• Incomplete links and images
• Partial code blocks
• Unterminated headings

This means your AI responses look polished from the very first token, not just after the stream completes. You can also use remend as a standalone package in your own projects.

2. GitHub Flavored Markdown (GFM)

Full GFM support out of the box, including task lists, tables, strikethrough, and autolinks. No extra configuration needed.

3. Code Blocks with Shiki

Streamdown uses Shiki for syntax highlighting, supporting 200+ programming languages including JavaScript, TypeScript, Python, Rust, Go, HTML, CSS, and many more.

Every code block automatically includes a copy button and optional download button, making it easy for users to grab code snippets from AI responses.

You can customize the theme:

<Streamdown
  shikiTheme={['github-light', 'github-dark']}
>
  {markdown}
</Streamdown>

4. LaTeX Mathematics

Mathematical notation is supported through remark-math and KaTeX. Enable it with the math plugin:

import { math } from '@streamdown/math';
import 'katex/dist/katex.min.css';

<Streamdown plugins={{ math }}>
  {`The quadratic formula: $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$`}
</Streamdown>

5. Mermaid Diagrams

Interactive diagram rendering with full controls — zoom, pan, fullscreen view, download as SVG, and source code copy:

import { mermaid } from '@streamdown/mermaid';

<Streamdown plugins={{ mermaid }}>
  {markdown}
</Streamdown>

You can also customize the Mermaid theme and provide custom error components:

const mermaidConfig = {
  theme: 'base',
  themeVariables: {
    fontFamily: 'Inter, sans-serif',
    primaryColor: 'hsl(var(--primary))',
    lineColor: 'hsl(var(--border))',
  },
};

<Streamdown mermaid={{ config: mermaidConfig }}>
  {content}
</Streamdown>

6. CJK Language Support

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

import { cjk } from '@streamdown/cjk';

<Streamdown plugins={{ cjk }}>
  {markdown}
</Streamdown>

7. Carets (Streaming Indicators)

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

8. Memoization

Streamdown is memoized to prevent unnecessary re-renders. The component only updates when the children content actually changes, which is essential for performance in streaming scenarios where parent components may re-render frequently.

9. Static Mode

For pre-rendered or non-streaming content (blog posts, documentation), use static mode to skip streaming optimizations:

<Streamdown mode="static">
  {blogContent}
</Streamdown>

Security: Built-In Protection

Security isn't an afterthought with Streamdown — it's a core feature. This is particularly important when rendering content from AI models, which can be susceptible to prompt injection attacks.

Streamdown ensures that untrusted Markdown does not contain images or links to unexpected origins. The library includes:

• URL prefix restrictions — Configure which domains are allowed for images and links
• Image origin validation — Prevents loading of images from untrusted sources
• Link safety — Blocks links to malicious destinations
• HTML sanitization — Prevents XSS attacks through embedded HTML
• rehype-harden — Built-in security hardening enabled by default

This makes Streamdown safe for rendering AI-generated content in production without requiring additional sanitization libraries.

Styling & Customization

Tailwind CSS Variables

Streamdown's components are built using shadcn/ui's design system, which means they use CSS variables for theming. Customize colors, borders, and design tokens by modifying variables in your globals.css:

:root {
  --primary: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  /* ... other variables */
}

Data Attribute Selectors

Every Streamdown element exposes a data-streamdown attribute for granular CSS targeting:

/* Target specific elements */
[data-streamdown="heading-1"] { /* H1 styles */ }
[data-streamdown="code-block"] { /* Code block styles */ }
[data-streamdown="table"] { /* Table styles */ }
[data-streamdown="blockquote"] { /* Blockquote styles */ }
[data-streamdown="mermaid-block"] { /* Mermaid diagram styles */ }

Custom Components

Like react-markdown, Streamdown supports full component overrides:

<Streamdown
  components={{
    h1: ({ children }) => <h1 className="custom-heading">{children}</h1>,
    a: ({ href, children }) => <a href={href} target="_blank">{children}</a>,
  }}
>
  {markdown}
</Streamdown>

Plugin Architecture: Tree-Shakeable by Design

One of Streamdown's smartest design decisions is its plugin system.

Instead of bundling everything into a single heavy package, features like code highlighting, Mermaid diagrams, math, and CJK support are separate, tree-shakeable plugins:

Plugin Architecture: Tree-Shakeable by Design

Install only what you need. If your app doesn't render math equations, don't import the math plugin it won't be included in your bundle.

Streamdown also supports standard remark and rehype plugins, making it compatible with the vast majority of existing react-markdown plugins.

Default plugins include remarkGfm, remarkMath, and rehypeKatex.

Next.js Integration Tips

If you're using Streamdown with Next.js (which most Vercel users are), here are some common configurations to be aware of:

Shiki Warning Fix

If you see a warning about Shiki being treated as an external package:

npm install shiki

Then add it to your next.config.ts

export default {
  transpilePackages: ['shiki'],
};

Mermaid Bundling Errors

Mermaid's dependency tree includes some Node.js-only packages.

Fix this by excluding them from client-side bundling:

// next.config.ts
export default {
  serverComponentsExternalPackages: ['langium', '@mermaid-js/parser'],
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'vscode-jsonrpc': false,
        'langium': false,
      };
    }
    return config;
  },
};

Compatibility

• React: 18+ (optimized for React 19)
• AI SDK: Designed for v6+ (status-based streaming state)
• Frameworks: Next.js, Remix, Create React App, and any React-based framework

Real-World Use Cases

Streamdown isn't just for chat interfaces (though it excels there). Here are the primary scenarios where it adds significant value:

AI Chat Applications Build ChatGPT-style interfaces where responses stream in real time with properly formatted code, math, and diagrams.

The isAnimating prop combined with the caret indicator creates a polished streaming experience.

Technical Documentation Platforms Use Streamdown's static mode to render AI-generated documentation with proper syntax highlighting, interactive diagrams, and responsive typography.

Customer Support Chatbots Enterprise teams use Streamdown's security features to build chatbots that display rich Markdown responses while maintaining strict content security policies.

Educational Platforms AI tutoring systems that explain complex concepts using LaTeX equations and Mermaid flowcharts, all rendered beautifully as the AI generates responses.

Developer Tools Code review assistants, API documentation generators, and any tool where AI-generated technical content needs to be rendered in real time.

Streamdown vs. react-markdown: What's Different?

Streamdown vs. react-markdown

The key takeaway: if you're building anything that involves streaming Markdown from an AI model, Streamdown is purpose-built for your use case while react-markdown requires significant customization to achieve similar results.

Final Thoughts

Streamdown fills a genuine gap in the React ecosystem.

As AI-powered applications become the norm rather than the exception, the need for a Markdown renderer that handles streaming gracefully, securely, and beautifully isn't a nice-to-have it's essential.

The fact that it's open source, maintained by Vercel, and designed as a drop-in replacement for react-markdown means the migration path is smooth and the long-term support is reliable.

The tree-shakeable plugin architecture is a particularly thoughtful design choice that keeps bundle sizes minimal.

If you're building AI-powered interfaces with React, Streamdown should be your default Markdown renderer.

It solves problems you didn't know you had until you started streaming tokens from an LLM.

Get started now:

npm i streamdown

📖 Full Documentation: streamdown.ai/docs

💻 GitHub: github.com/vercel/streamdown

📦 npm: npmjs.com/package/streamdown

Frequently Asked Questions

What makes Streamdown different from react-markdown?

Streamdown is specifically designed for AI-powered streaming applications.

It integrates with the remend preprocessor to handle incomplete markdown syntax, which means it can render markdown gracefully even while it's being generated by AI models.

It also includes security features like URL prefix restrictions and performance optimizations for streaming contexts.

Can I use custom components with Streamdown?

Yes. Streamdown fully supports custom components through the components prop, just like react-markdown.

You can override any markdown element with your own React components.

How does the incomplete markdown parsing work?

When parseIncompleteMarkdown is enabled (default), Streamdown uses the remend package to preprocess the markdown before rendering. Remend automatically detects and completes common issues like unclosed bold/italic markers, incomplete links, and partial code blocks.

Does Streamdown support remark and rehype plugins?

Yes. Streamdown supports both remark and rehype plugins, making it compatible with most react-markdown plugins. It includes popular plugins like remarkGfm, remarkMath, and rehypeKatex by default.

Is Streamdown free?

Yes. Streamdown is fully open source under the MIT license, maintained by Vercel.