Streamdown
A drop-in replacement for react-markdown, designed for AI-powered streaming.
Last verified:
What is Streamdown?
Streamdown is a React component library designed as a drop-in replacement for react-markdown, specifically built for AI-powered streaming applications. It renders markdown content beautifully in real-time as it streams from AI models, handling the unique challenges that arise when markdown is tokenized and delivered progressively.
Key features include built-in support for incomplete markdown parsing (using the remend preprocessor), Shiki-powered syntax highlighting with copy and download buttons, interactive Mermaid diagrams with fullscreen viewing, LaTeX math rendering through KaTeX, CJK text support for Chinese/Japanese/Korean, GitHub Flavored Markdown with tables and task lists, streaming caret indicators and animations, security hardening with URL prefix restrictions, and dual theme support for light/dark modes. The library is fully customizable through the components prop and tree-shakeable plugins keep bundle size minimal.
Streamdown is ideal for developers building AI chat applications, AI-powered chatbots, vibe coding platforms, documentation sites with AI-generated content, and any React application that needs to display streaming markdown from AI models. It requires Node.js >= 18, React >= 19.1.1 (compatible with React 18+), and Tailwind CSS for styling.
Streamdown pricing
Pricing model: Freemium
Streamdown is free and open-source. It can be installed via npm with 'npm i streamdown'. All core features are free including typography, streaming carets, animations, and GitHub Flavored Markdown. Optional plugins (@streamdown/code, @streamdown/mermaid, @streamdown/math, @streamdown/cjk) are also free and tree-shakeable. The library is available on npm (version 1.0.11) and GitHub under the vercel/streamdown repository.
Streamdown pros
- Drop-in replacement for react-markdown with same API
- Handles incomplete markdown blocks during streaming gracefully
- Renders unterminated bold, italic, and code elements properly
- Built-in streaming caret indicators show content is generating
- Shiki-powered syntax highlighting with 200+ languages
- Copy and download buttons for code blocks
- Interactive Mermaid diagrams with fullscreen, download, copy controls
- Built-in LaTeX math rendering with KaTeX (2-3x faster than MathJax)
- CJK support for proper Chinese/Japanese/Korean text formatting
- GitHub Flavored Markdown with tables, task lists, strikethrough
- Security hardening blocks images/links from unexpected origins
- Link safety modals display full URL before navigation
- Dual theme support (light/dark mode) for code blocks
- Tree-shakeable optional plugins for minimal bundle size
- Memoized rendering for better performance in streaming contexts
- Custom components fully supported through components prop
- Static mode available for pre-generated markdown content
- Automatic error handling with retry for Mermaid diagrams
Streamdown cons
- Requires React >= 19.1.1 (though compatible with React 18+)
- Requires Tailwind CSS for styling (not optional)
- Node.js >= 18 required
- Plugins (@streamdown/code, @streamdown/mermaid, @streamdown/math, @streamdown/cjk) are separate packages to install
- KaTeX CSS must be manually imported for math plugin
- Vite SSR requires additional configuration for CSS files
- Next.js requires excluding server-only packages like langium from client bundling
- Mermaid diagrams are expensive to render and may cause performance issues with large diagrams
Frequently asked questions about Streamdown
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 better performance optimizations for streaming contexts that react-markdown does not have.
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 to customize the rendering.
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 in incomplete markdown like unclosed bold/italic markers, incomplete links, and partial code blocks. This preprocessing ensures smooth rendering even as markdown is being streamed from AI models. You can also use remend as a standalone package in your own projects.
Is Streamdown compatible with all react-markdown plugins?
Streamdown supports both remark and rehype plugins, making it compatible with most react-markdown plugins. It includes remarkGfm by default, and supports additional plugins like @streamdown/math and @streamdown/mermaid through the plugins prop. You can also add custom remark and rehype plugins through the remarkPlugins and rehypePlugins props.
What plugins are available for Streamdown?
Streamdown offers four optional tree-shakeable plugins: @streamdown/code for Shiki syntax highlighting with 200+ languages, @streamdown/mermaid for interactive diagrams (flowcharts, sequence diagrams, state diagrams, etc.), @streamdown/math for LaTeX rendering with KaTeX, and @streamdown/cjk for improved Chinese/Japanese/Korean text handling with proper emphasis formatting near ideographic punctuation.
Why do I get a Package shiki can't be external warning?
This warning occurs when Next.js tries to treat Shiki as an external package. To fix this, you need to install Shiki explicitly with npm install shiki and add it to your transpilePackages array in your next.config.ts: { transpilePackages: ['shiki'] }. This ensures Shiki is properly bundled with your application.
How do I configure Tailwind CSS to work with Streamdown?
For Tailwind v4, add a @source directive to your globals.css file: @source '../node_modules/streamdown/dist/*.js;'. For Tailwind v3, add Streamdown to your content array in tailwind.config.js: content: ['./app/*//.{js,ts,jsx,tsx,mdx}', './node_modules/streamdown/dist/*.js']. If you install optional plugins, add their matching @source lines or content paths as well.
Why do I get Module not found: Can't resolve 'vscode-jsonrpc' errors with Next.js?
This happens due to Mermaid's dependency tree including server-side packages like vscode-jsonrpc and langium. To fix this, configure Next.js to exclude these packages from client-side bundling by adding serverComponentsExternalPackages: ['langium', '@mermaid-js/parser'] and aliasing vscode-jsonrpc and langium to false in the webpack config for non-server builds.
What is static mode and when should I use it?
Static mode is designed for rendering pre-generated markdown content like blog posts or documentation where content is already complete. Enable it by setting mode='static'. It skips streaming-related optimizations: no block parsing, no incomplete markdown handling, and uses optimized rendering for static code blocks. Use static mode when streaming optimizations are unnecessary and you're rendering complete markdown.
How do Mermaid diagram controls work?
Each Mermaid diagram includes interactive controls: fullscreen mode for viewing in an overlay, download button to save as SVG, and copy button to copy to clipboard. You can customize which controls are shown through the controls prop: controls={{ mermaid: { fullscreen: true, download: true, copy: true, panZoom: true } }}. You can also disable all controls with controls={{ mermaid: false }}.