Streamdown
A markdown renderer designed for streaming content from AI models. Highly interactive, customizable, and easy to use.
A fully-loaded Markdown renderer
Built-in typography, streaming carets, animations, plugins, and more.
Powering AI experiences for
Typography & GFM
Built-in Tailwind typography for headings, lists, and code blocks. GitHub Flavored Markdown adds tables, task lists, strikethrough, and autolinks.
Streaming experience
Built-in caret indicators show users content is generating. Unterminated block styling parses incomplete Markdown for prettier streaming with smooth animations.
Interactive code blocks
Shiki-powered syntax highlighting with copy and download buttons. Supports language detection and line numbers.
Math, diagrams & CJK
LaTeX math through KaTeX, interactive Mermaid diagrams with fullscreen viewing, and CJK support for correct ideographic punctuation.
Security & link safety
Security hardening blocks images and links from unexpected origins. Link safety modals display the full URL before navigation to protect users.
Fully customizable
Override any element with custom components, apply your own styles, and fine-tune behavior through configuration. Tree-shakeable plugins keep your bundle lean.
Get started in seconds
Install only what you need. Plugins are optional and tree-shakeable for minimal bundle size.
import { useChat } from "@ai-sdk/react";import { Streamdown } from "streamdown";import { code } from "@streamdown/code";import { mermaid } from "@streamdown/mermaid";import { math } from "@streamdown/math";import { cjk } from "@streamdown/cjk";import "katex/dist/katex.min.css";
export default function Chat() { const { messages, status } = useChat();
return ( <div> {messages.map(message => ( <div key={message.id}> {message.role === 'user' ? 'User: ' : 'AI: '} {message.parts.map((part, index) => part.type === 'text' ? ( <Streamdown key={index} plugins={{ code, mermaid, math, cjk }} isAnimating={status === 'streaming'} > {part.text} </Streamdown> ) : null, )} </div> ))} </div> );}Showcase
See Streamdown in action with one of our templates.
