Streamdown

Streamdown is a React component library built by Vercel for rendering streaming Markdown content from AI models. It is designed as a drop-in replacement for react-markdown, solving the unique challenges that arise when Markdown is tokenized and streamed in real-time. The library is open source and available on GitHub under the Apache 2.0 license.

What It Is

Streamdown is a streaming-optimized Markdown renderer for React applications. Traditional Markdown renderers were not built to handle incomplete syntax — bold text without closing markers, code blocks missing backticks, or links without closing brackets — all of which are common when AI models stream output token by token. Streamdown addresses these problems with intelligent incomplete-block parsing, progressive formatting, and smooth animations, so the user experience remains polished even as content is still generating.

Core Features

• Unterminated block parsing — automatically detects and completes incomplete Markdown syntax mid-stream
• Streaming carets — built-in caret indicators signal to users that content is still generating
• Smooth animations — transitions from incomplete to complete states without jarring reflows
• Shiki-powered code blocks — syntax highlighting with copy and download buttons, language detection, and line numbers
• GitHub Flavored Markdown (GFM) — tables, task lists, strikethrough, and autolinks
• Built-in Tailwind typography — headings, lists, and code blocks styled out of the box
• Security hardening — blocks images and links from unexpected origins; link safety modals display the full URL before navigation

Plugin Architecture

Streamdown uses a tree-shakeable plugin system to keep bundle sizes minimal. Plugins are optional and imported only when needed:

• @streamdown/code — Shiki-powered syntax highlighting for interactive code blocks
• @streamdown/mermaid — interactive Mermaid diagrams with fullscreen viewing
• @streamdown/math — LaTeX math rendering via KaTeX
• @streamdown/cjk — correct ideographic punctuation for Chinese, Japanese, and Korean text

Setup Path

Getting started requires installing the streamdown package and any desired plugins. The library integrates directly with the Vercel AI SDK via the useChat hook from @ai-sdk/react. The isAnimating prop accepts the streaming status to drive caret and animation behavior. Configuration, custom component overrides, and styling are all supported for teams that need to match their own design systems.

Adoption Signal

The Streamdown homepage lists a number of companies the vendor claims are powering AI experiences with the library, including Mintlify, Ollama, Supabase, Cloudflare, ElevenLabs, Langfuse, Dify, Sentry, AWS, Google Cloud, and HuggingFace, among others. These are vendor-published claims on the Streamdown marketing page. The library is showcased alongside Vercel's Next.js Chatbot Template (over 20,000 GitHub stars) and the AI Elements UI collection.

Why It Matters

Most React Markdown renderers assume complete, well-formed input. AI streaming breaks that assumption at every token boundary. Streamdown's core value is making streamed AI output look intentional and polished rather than broken or flickering, without requiring developers to build their own incomplete-syntax handling. Its zero-configuration default and plugin-based extensibility make it practical for both quick prototypes and production AI chat interfaces.