Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (
Streamdown is a streaming-optimized React Markdown renderer designed as a drop-in replacement for react-markdown with native support for AI streaming applications. It solves the common challenge of rendering markdown content in real-time streaming scenarios, particularly when integrating with AI chat interfaces and language model APIs like the Vercel AI SDK. Unlike traditional markdown renderers, Streamdown is built from the ground up to handle partial content updates smoothly, displaying streaming text with animated cursors and proper incremental parsing.
The library provides comprehensive markdown rendering capabilities through a plugin architecture, supporting syntax-highlighted code blocks via Shiki, Mermaid diagrams, LaTeX math equations, and CJK (Chinese-Japanese-Korean) text optimization. It includes built-in security features like link safety confirmations and HTML sanitization, interactive controls for code copying and diagram downloads, and seamless Tailwind CSS integration for styling. The renderer operates in two modes: streaming mode for real-time content updates with animation support, and static mode optimized for pre-rendered content like blog posts and documentation.
Streamdown is ideal for developers building AI chat interfaces, conversational AI applications, documentation sites with live previews, and any React application requiring robust markdown rendering with streaming capabilities. It targets frontend developers working with modern React frameworks (Next.js, Vite), AI application developers integrating language models, and teams building content-heavy applications that need reliable, secure, and performant markdown rendering with minimal configuration overhead.
The most commonly missed step is configuring Tailwind CSS to scan Streamdown's dist files. You must add @source directives (Tailwind v4) or content paths (Tailwind v3) for streamdown and any installed plugins, otherwise styles won't be applied correctly.
No, plugins are optional. Install only what you need: @streamdown/code for syntax highlighting, @streamdown/mermaid for diagrams, @streamdown/math for LaTeX, and @streamdown/cjk for CJK text optimization. Only add Tailwind @source paths for installed plugins.
Streamdown is specifically optimized for streaming scenarios with built-in support for partial content rendering, animated cursors during streaming, and integration with AI SDKs. It includes security features, interactive controls, and a plugin system out of the box, while maintaining API compatibility as a drop-in replacement.
Yes, use mode='static' for pre-rendered content like blogs and documentation. Static mode optimizes rendering for complete markdown content without streaming-specific features like animated cursors.
Streamdown works with any modern React framework including Next.js, Vite, Create React App, and others. It requires Tailwind CSS for styling and is compatible with both client and server components in Next.js App Router.
Quick Setup:
.claude/skills/Repository
vercel/streamdown