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>);