.png)
2 hours ago
1
A drop-in replacement for react-markdown, designed for AI-powered streaming.
or install it directly with npm i streamdown
Overview
Formatting Markdown is easy, but when you tokenize and stream it, new challenges arise.
With AI Elements, we wanted a way to stream safe and perfectly formatted Markdown without having to worry about the details.
So we built Streamdown, a drop-in replacement for react-markdown, designed for AI-powered streaming.
It powers the AI Elements Response component, but you can install it as a standalone package if you want.
Built-in typography styles
Streamdown comes with built-in Tailwind classes for common Markdown components — headings, lists, code blocks, and more.
GitHub Flavored Markdown
Streamdown supports GitHub Flavored Markdown (GFM) out of the box, so you get things like task lists, tables, and more.
Beautiful, interactive code blocks
Streamdown uses Shiki to highlight code blocks, and comes with a copy button so you can easily copy the code. Hover to reveal the copy button!
Mathematical Expressions
Streamdown supports LaTeX math expressions through remark-math and KaTeX, enabling beautiful mathematical notation in your markdown.
Interactive Mermaid Diagrams
Streamdown supports Mermaid diagrams with customizable themes. Current theme is "base".
Style unterminated Markdown blocks
Streamdown comes with built-in support for parsing unterminated Markdown blocks (# headings, `inline code`, **bold**, _italic_, [links]() and more), which makes streaming Markdown content much prettier.
Built-in security hardening
Streamdown ensures that untrusted markdown does not contain images from and links to unexpected origins which might have been subject to prompt injection.
Props
StreamdownProps extends the react-markdown component props with additional properties for streaming and security features.
All props are optional and have sensible defaults for typical use cases.
childrenstring
The markdown content to render. Can be a string of markdown or React nodes.
parseIncompleteMarkdownboolean
Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists).
Default: true
classNamestring
CSS class names to apply to the wrapper div element.
componentsobject
Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components).
rehypePluginsarray
Array of rehype plugins to use for processing HTML. Includes rehype-harden for security, rehype-raw for HTML support, and rehype-katex for math rendering by default. You can import defaultRehypePlugins to access individual default plugins when overriding.
Default: [[harden, { allowedImagePrefixes: ["*"], allowedLinkPrefixes: ["*"], defaultOrigin: undefined }], rehypeRaw, [rehypeKatex, { errorColor: "var(--color-muted-foreground)" }]]
remarkPluginsarray
Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default. You can import defaultRemarkPlugins to access individual default plugins when overriding.
Default: [[remarkGfm, {}], [remarkMath, { singleDollarTextMath: false }]]
shikiTheme[BundledTheme, BundledTheme] (from Shiki)
The themes to use for code blocks. Defaults to ["github-light", "github-dark"].
Default: ["github-light", "github-dark"]
mermaidConfigMermaidConfig (from Mermaid)
Custom configuration for Mermaid diagrams including theme, colors, fonts, and other rendering options. See Mermaid documentation for all available options.
controlsboolean | { table?: boolean, code?: boolean, mermaid?: boolean }
Control the visibility of copy and download buttons. Can be a boolean to show/hide all controls, or an object to selectively control buttons for tables, code blocks, and Mermaid diagrams.
Default: true
isAnimatingboolean
Whether the component is currently animating. This is used to disable the copy and download buttons when the component is animating.
Default: false
Try Streamdown today and take your AI-powered streaming to the next level.
FAQ
Common questions about Streamdown and how it works with AI-powered streaming applications.
