1 min read
Today, we're releasing a major update to Streamdown, our drop-in replacement for react-markdown, designed for AI-powered streaming.
Link to headingStreamdown Plugins
The most requested feature since launch has been to reduce the bundle size. Streamdown v2 now ships with a bundle size much smaller than the previous version and uses a plugin-based architecture.
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 styles for math renderingimport 'katex/dist/katex.min.css';
export default function Page() { const markdown = `# Hello, world`; return ( <Streamdown plugins={{ code, mermaid, math, cjk }}> {markdown} </Streamdown> );}Link to headingCarets
Streamdown now includes built-in caret (cursor) indicators that display at the end of streaming content. Carets provide a visual cue to users that content is actively being generated, similar to a blinking cursor in a text editor.
Link to headingConfigurable Remend
Our underlying markdown-healing library Remend is now configurable. You can choose how much healing you would prefer during the markdown streaming.
import { Streamdown } from "streamdown";βββββο»Ώβο»Ώββββββο»Ώο»Ώβο»Ώβββββββββο»Ώββββββο»Ώββββββο»Ώβββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώβββββββο»Ώββββββββββο»Ώβββββββββββββββο»Ώβββββββββββο»Ώβββο»Ώβββο»Ώβββο»Ώβο»Ώβο»Ώββββο»Ώο»Ώββο»Ώο»Ώβββββο»Ώβββο»Ώββββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώβββο»Ώο»Ώβο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββο»Ώβο»Ώββο»Ώο»Ώβββββο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβββββββββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβο»Ώββββββο»Ώο»Ώββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώο»Ώββο»Ώβββο»Ώβββββββο»Ώββο»Ώβββο»Ώβο»Ώββο»Ώο»Ώββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββο»Ώββββο»Ώο»Ώββββββο»Ώββο»Ώβββο»Ώβββββββββββο»Ώβο»Ώββο»Ώο»Ώβο»Ώββββο»Ώββο»Ώβββο»Ώβο»Ώββββββββββββββββββο»Ώββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβο»Ώβο»Ώβο»Ώββββο»Ώο»Ώβο»Ώβο»Ώβββββο»Ώβββο»Ώβββο»Ώβββο»Ώββββββββο»Ώο»Ώβο»Ώο»Ώο»Ώββββββο»Ώο»Ώβββο»Ώβο»Ώβββο»Ώβο»Ώββββββββββββββββββββββο»Ώββββββο»Ώο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββββββββββο»Ώο»Ώβββο»Ώβο»Ώβββο»Ώβο»Ώββββββββββο»Ώβββο»Ώο»Ώβββο»Ώββββββο»Ώββββββο»Ώο»Ώβββββββο»Ώβββο»Ώββββββββο»Ώβββββο»Ώβο»Ώββο»Ώο»Ώβο»Ώβββο»Ώβββββο»Ώβββββο»Ώο»Ώββο»Ώβββββββο»Ώβββββο»Ώββββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββο»Ώβββο»Ώβββββββο»Ώββββο»Ώββββββο»Ώββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώββββββο»Ώβββο»Ώβο»Ώβββββο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββββββο»Ώβββββββββββο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβββββββββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβο»Ώββββββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώο»Ώββο»Ώβββο»Ώβββββββο»Ώββο»Ώβββββββο»Ώββββββββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββο»Ώββββββββο»Ώβββββββββββββββββββο»Ώββββββββββο»Ώβββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββββββο»Ώβββββββο»Ώβββο»Ώο»Ώβββο»Ώββββββο»Ώββββββββββο»Ώββββββββββββο»Ώβββο»Ώββββββββο»Ώββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώβββο»Ώβββββββο»Ώβββββββο»Ώββββο»Ώββο»Ώβββο»Ώβο»Ώββββββββββββββββββο»Ώββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβο»Ώβο»Ώβο»Ώββββο»Ώο»Ώβο»Ώβο»Ώβββββο»Ώβββο»Ώβββο»Ώβββο»Ώββββββββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώβββο»Ώβββββββο»Ώβββο»Ώβββββββββββο»Ώββββββββββββο»Ώββο»Ώβββο»Ώβββο»Ώββββββββο»Ώββββββββββββββββββο»Ώββββο»Ώο»Ώβο»Ώββββββββο»Ώββο»Ώβββββββο»Ώβββββββββββββο»Ώβββββββββο»Ώβββο»Ώβο»Ώβββββο»Ώβο»Ώβββββββββββο»Ώβββββο»Ώβββββββββββββββο»Ώβββββββο»Ώβββββββββο»Ώβββββββββββββο»Ώβββο»Ώβββββββββββββββο»Ώββββο»Ώο»Ώβο»Ώββββββββο»Ώββββββο»Ώβο»Ώβββββββββββο»Ώβββββο»Ώββββο»Ώβββββββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββββββο»Ώβββββββββββο»Ώββββββββο»Ώββο»Ώββββββββο»Ώββββββο»Ώο»Ώβββο»Ώβββββββββββββββββββο»Ώββββββββββο»Ώβββο»Ώβββββββββββο»Ώβββββββββββββββββο»Ώβββββββββββββο»Ώβββο»Ώβββββββο»Ώο»Ώββο»Ώο»Ώβ
const markdown = "# Hello world!";βββββο»Ώβο»Ώββββββο»Ώο»Ώβο»Ώβββββββββο»Ώββββββο»Ώββββββο»Ώβββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώβββββββο»Ώββββββββββο»Ώβββββββββββββββο»Ώβββββββββββο»Ώβββο»Ώβββο»Ώβββο»Ώβο»Ώβο»Ώββββο»Ώο»Ώββο»Ώο»Ώβββββο»Ώβββο»Ώββββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώβββο»Ώο»Ώβο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββο»Ώβο»Ώββο»Ώο»Ώβββββο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβββββββββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβο»Ώββββββο»Ώο»Ώββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώο»Ώββο»Ώβββο»Ώβββββββο»Ώββο»Ώβββο»Ώβο»Ώββο»Ώο»Ώββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββο»Ώββββο»Ώο»Ώββββββο»Ώββο»Ώβββο»Ώβββββββββββο»Ώβο»Ώββο»Ώο»Ώβο»Ώββββο»Ώββο»Ώβββο»Ώβο»Ώββββββββββββββββββο»Ώββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβο»Ώβο»Ώβο»Ώββββο»Ώο»Ώβο»Ώβο»Ώβββββο»Ώβββο»Ώβββο»Ώβββο»Ώββββββββο»Ώο»Ώβο»Ώο»Ώο»Ώββββββο»Ώο»Ώβββο»Ώβο»Ώβββο»Ώβο»Ώββββββββββββββββββββββο»Ώββββββο»Ώο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββββββββββο»Ώο»Ώβββο»Ώβο»Ώβββο»Ώβο»Ώββββββββββο»Ώβββο»Ώο»Ώβββο»Ώββββββο»Ώββββββο»Ώο»Ώβββββββο»Ώβββο»Ώββββββββο»Ώβββββο»Ώβο»Ώββο»Ώο»Ώβο»Ώβββο»Ώβββββο»Ώβββββο»Ώο»Ώββο»Ώβββββββο»Ώβββββο»Ώββββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββο»Ώβββο»Ώβββββββο»Ώββββο»Ώββββββο»Ώββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώββββββο»Ώβββο»Ώβο»Ώβββββο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββββββο»Ώβββββββββββο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβββββββββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβο»Ώββββββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώο»Ώββο»Ώβββο»Ώβββββββο»Ώββο»Ώβββββββο»Ώββββββββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββο»Ώββββββββο»Ώβββββββββββββββββββο»Ώββββββββββο»Ώβββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββββββο»Ώβββββββο»Ώβββο»Ώο»Ώβββο»Ώββββββο»Ώββββββββββο»Ώββββββββββββο»Ώβββο»Ώββββββββο»Ώββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώβββο»Ώβββββββο»Ώβββββββο»Ώββββο»Ώββο»Ώβββο»Ώβο»Ώββββββββββββββββββο»Ώββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβο»Ώβο»Ώβο»Ώββββο»Ώο»Ώβο»Ώβο»Ώβββββο»Ώβββο»Ώβββο»Ώβββο»Ώββββββββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώβββο»Ώβββββββο»Ώβββο»Ώβββββββββββο»Ώββββββββββββο»Ώββο»Ώβββο»Ώβββο»Ώββββββββο»Ώββββββββββββββββββο»Ώββββο»Ώο»Ώβο»Ώββββββββο»Ώββο»Ώβββββββο»Ώβββββββββββββο»Ώβββββββββο»Ώβββο»Ώβο»Ώβββββο»Ώβο»Ώβββββββββββο»Ώβββββο»Ώβββββββββββββββο»Ώβββββββο»Ώβββββββββο»Ώβββββββββββββο»Ώβββο»Ώβββββββββββββββο»Ώββββο»Ώο»Ώβο»Ώββββββββο»Ώββββββο»Ώβο»Ώβββββββββββο»Ώβββββο»Ώββββο»Ώβββββββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββββββο»Ώβββββββββββο»Ώββββββββο»Ώββο»Ώββββββββο»Ώββββββο»Ώο»Ώβββο»Ώβββββββββββββββββββο»Ώββββββββββο»Ώβββο»Ώβββββββββββο»Ώβββββββββββββββββο»Ώβββββββββββββο»Ώβββο»Ώβββββββο»Ώο»Ώββο»Ώο»Ώβ
return ( <Streamdown remend={{ links: true, // Complete links and images images: true, // Complete images bold: true, // Complete bold formatting italic: true, // Complete italic formatting boldItalic: true, // Complete bold-italic formatting inlineCode: true, // Complete inline code formatting strikethrough: true, // Complete strikethrough formatting katex: true, // Complete block KaTeX math setextHeadings: true, // Handle incomplete setext headings }}>{markdown}</Streamdown>);βββββο»Ώβο»Ώββββββο»Ώο»Ώβο»Ώβββββββββο»Ώββββββο»Ώββββββο»Ώβββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώβββββββο»Ώββββββββββο»Ώβββββββββββββββο»Ώβββββββββββο»Ώβββο»Ώβββο»Ώβββο»Ώβο»Ώβο»Ώββββο»Ώο»Ώββο»Ώο»Ώβββββο»Ώβββο»Ώββββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώβββο»Ώο»Ώβο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββο»Ώβο»Ώββο»Ώο»Ώβββββο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβββββββββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβο»Ώββββββο»Ώο»Ώββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώο»Ώββο»Ώβββο»Ώβββββββο»Ώββο»Ώβββο»Ώβο»Ώββο»Ώο»Ώββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββο»Ώββββο»Ώο»Ώββββββο»Ώββο»Ώβββο»Ώβββββββββββο»Ώβο»Ώββο»Ώο»Ώβο»Ώββββο»Ώββο»Ώβββο»Ώβο»Ώββββββββββββββββββο»Ώββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβο»Ώβο»Ώβο»Ώββββο»Ώο»Ώβο»Ώβο»Ώβββββο»Ώβββο»Ώβββο»Ώβββο»Ώββββββββο»Ώο»Ώβο»Ώο»Ώο»Ώββββββο»Ώο»Ώβββο»Ώβο»Ώβββο»Ώβο»Ώββββββββββββββββββββββο»Ώββββββο»Ώο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββββββββββο»Ώο»Ώβββο»Ώβο»Ώβββο»Ώβο»Ώββββββββββο»Ώβββο»Ώο»Ώβββο»Ώββββββο»Ώββββββο»Ώο»Ώβββββββο»Ώβββο»Ώββββββββο»Ώβββββο»Ώβο»Ώββο»Ώο»Ώβο»Ώβββο»Ώβββββο»Ώβββββο»Ώο»Ώββο»Ώβββββββο»Ώβββββο»Ώββββββο»Ώβββο»Ώββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββο»Ώβββο»Ώβββββββο»Ώββββο»Ώββββββο»Ώββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώββββββο»Ώβββο»Ώβο»Ώβββββο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββββββο»Ώβββββββββββο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβββββββββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβββο»Ώβο»Ώββββββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώββββο»Ώο»Ώββο»Ώβββο»Ώβββββββο»Ώββο»Ώβββββββο»Ώββββββββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββο»Ώββββββββο»Ώβββββββββββββββββββο»Ώββββββββββο»Ώβββββββββο»Ώββο»Ώο»Ώββο»Ώββο»Ώββββββββο»Ώββο»Ώββββββββο»Ώβββββββο»Ώβββο»Ώο»Ώβββο»Ώββββββο»Ώββββββββββο»Ώββββββββββββο»Ώβββο»Ώββββββββο»Ώββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώβββο»Ώβββββββο»Ώβββββββο»Ώββββο»Ώββο»Ώβββο»Ώβο»Ώββββββββββββββββββο»Ώββο»Ώβο»Ώβββο»Ώβο»Ώβο»Ώβο»Ώβο»Ώβο»Ώββββο»Ώο»Ώβο»Ώβο»Ώβββββο»Ώβββο»Ώβββο»Ώβββο»Ώββββββββββββο»Ώβββββββββββο»Ώββο»Ώβββββββο»Ώβββο»Ώβββββββο»Ώβββο»Ώβββββββββββο»Ώββββββββββββο»Ώββο»Ώβββο»Ώβββο»Ώββββββββο»Ώββββββββββββββββββο»Ώββββο»Ώο»Ώβο»Ώββββββββο»Ώββο»Ώβββββββο»Ώβββββββββββββο»Ώβββββββββο»Ώβββο»Ώβο»Ώβββββο»Ώβο»Ώβββββββββββο»Ώβββββο»Ώβββββββββββββββο»Ώβββββββο»Ώβββββββββο»Ώβββββββββββββο»Ώβββο»Ώβββββββββββββββο»Ώββββο»Ώο»Ώβο»Ώββββββββο»Ώββββββο»Ώβο»Ώβββββββββββο»Ώβββββο»Ώββββο»Ώβββββββο»Ώββββββο»Ώβο»Ώβο»Ώβββββββββο»Ώβββββββββο»Ώβββββββββββο»Ώββββββββο»Ώββο»Ώββββββββο»Ώββββββο»Ώο»Ώβββο»Ώβββββββββββββββββββο»Ώββββββββββο»Ώβββο»Ώβββββββββββο»Ώβββββββββββββββββο»Ώβββββββββββββο»Ώβββο»Ώβββββββο»Ώο»Ώββο»Ώο»Ώβ