streamdown

Streamdown

Streaming-optimized React Markdown renderer. Drop-in replacement for react-markdown with built-in streaming support, security, and interactive controls.

Quick Setup

1. Install

npm install streamdown

Optional plugins (install only what's needed):

npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk

2. Configure Tailwind CSS (Required)

This is the most commonly missed step. Streamdown uses Tailwind for styling and the dist files must be scanned.

Tailwind v4 — add to globals.css:

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

Tailwind v3 — add to tailwind.config.js:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/streamdown/dist/*.js",
  ],
};

3. Basic Usage

import { Streamdown } from 'streamdown';

<Streamdown>{markdown}</Streamdown>

4. With AI Streaming (Vercel AI SDK)

'use client';
import { useChat } from '@ai-sdk/react';
import { Streamdown } from 'streamdown';
import { code } from '@streamdown/code';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <>
      {messages.map((msg, i) => (
        <Streamdown
          key={msg.id}
          plugins={{ code }}
          caret="block"
          isAnimating={isLoading && i === messages.length - 1 && msg.role === 'assistant'}
        >
          {msg.content}
        </Streamdown>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} disabled={isLoading} />
      </form>
    </>
  );
}

5. Static Mode (Blogs, Docs)

<Streamdown mode="static" plugins={{ code }}>
  {content}
</Streamdown>

Key Props

Prop	Type	Default	Purpose
children	string	—	Markdown content
mode	"streaming" | "static"	"streaming"	Rendering mode
plugins	{ code?, mermaid?, math?, cjk? }	—	Feature plugins
isAnimating	boolean	false	Streaming indicator
caret	"block" | "circle"	—	Cursor style
components	Components	—	Custom element overrides
controls	boolean | object	true	Interactive buttons
linkSafety	LinkSafetyConfig	{ enabled: true }	Link confirmation modal
shikiTheme	[light, dark]	['github-light', 'github-dark']	Code themes
className	string	—	Container class
allowedElements	string[]	all	Tag names to allow
disallowedElements	string[]	[]	Tag names to disallow
allowElement	AllowElement	—	Custom element filter
unwrapDisallowed	boolean	false	Keep children of disallowed elements
skipHtml	boolean	false	Ignore raw HTML
urlTransform	UrlTransform	defaultUrlTransform	Transform/sanitize URLs