---
name: streamdown
description: Streaming-optimized React Markdown renderer with syntax highlighting, diagrams, math, and AI chat integration. Supports four optional plugins: code syntax highlighting via Shiki (200+ languages), M...
---

# streamdown

Streaming-optimized React Markdown renderer with syntax highlighting, diagrams, math, and AI chat integration. Supports four optional plugins: code syntax highlighting via Shiki (200+ languages), Mermaid diagrams, LaTeX math rendering, and CJK text support Two rendering modes: streaming (with animated caret cursor for AI chat) and static (for blogs and documentation) Built-in security features including link safety modals, HTML tag filtering, URL sanitization, and configurable element...

# streamdownby vercel
Streaming-optimized React Markdown renderer with syntax highlighting, diagrams, math, and AI chat integration. Supports four optional plugins: code syntax highlighting via Shiki (200+ languages), Mermaid diagrams, LaTeX math rendering, and CJK text support Two rendering modes: streaming (with animated caret cursor for AI chat) and static (for blogs and documentation) Built-in security features including link safety modals, HTML tag filtering, URL sanitization, and configurable element...

`npx skills add https://github.com/vercel/streamdown --skill streamdown`Download ZIPGitHub

## 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";
`
```

Add plugin `@source` lines only for packages you have installed (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths:

* Code: `@source "../node_modules/@streamdown/code/dist/*.js";`

* CJK: `@source "../node_modules/@streamdown/cjk/dist/*.js";`

* Math: `@source "../node_modules/@streamdown/math/dist/*.js";`

* Mermaid: `@source "../node_modules/@streamdown/mermaid/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

PropTypeDefaultPurpose`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[]`allTag 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
For full API reference, see references/api.md.

## Plugin Quick Reference

PluginPackagePurposeCode`@streamdown/code`Syntax highlighting (Shiki, 200+ languages)Mermaid`@streamdown/mermaid`Diagrams (flowcharts, sequence, etc.)Math`@streamdown/math`LaTeX via KaTeX (requires CSS import)CJK`@streamdown/cjk`Chinese/Japanese/Korean text support
Math requires CSS:

```
`import 'katex/dist/katex.min.css';
`
```

For plugin configuration details, see references/plugins.md.

## References

Use these for deeper implementation details:

* references/api.md — Complete props, types, and interfaces

* references/plugins.md — Plugin setup, configuration, and customization

* references/styling.md — CSS variables, data attributes, custom components, theme examples

* references/security.md — Hardening, link safety, custom HTML tags, production config

* references/features.md — Carets, remend, static mode, controls, GFM, memoization, troubleshooting

## Example Configurations

Copy and adapt from `assets/examples/`:

* basic-streaming.tsx — Minimal AI chat with Vercel AI SDK

* with-caret.tsx — Streaming with block caret cursor

* full-featured.tsx — All plugins, carets, link safety, controls

* static-mode.tsx — Blog/docs rendering

* custom-security.tsx — Strict security for AI content

## Common Gotchas

* Tailwind styles missing — Add `@source` directive or `content` entry for `node_modules/streamdown/dist/*.js`

* Math not rendering — Import `katex/dist/katex.min.css`

* Caret not showing — Both `caret` prop AND `isAnimating={true}` are required

* Copy buttons during streaming — Disabled automatically when `isAnimating={true}`

* Link safety modal appearing — Enabled by default; disable with `linkSafety={{ enabled: false }}`

* Shiki warning in Next.js — Install `shiki` explicitly, add to `transpilePackages`

* `allowedTags` not working — Only works with default rehype plugins

* Math uses `$$` not `$` — Single dollar is disabled by default to avoid currency conflicts

## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

---

**Source**: https://github.com/vercel/streamdown/tree/HEAD/skills/streamdown
**Author**: vercel
**Discovered via**: mcpservers.org