Today, we're releasing a major update to Streamdown, our drop-in replacement for react-markdown, designed for AI-powered streaming.
Copy 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 rendering
import 'katex/dist/katex.min.css';
export default function Page() {
const markdown = `# Hello, world`;
return (
<Streamdown plugins={{ code, mermaid, math, cjk }}>
{markdown}
</Streamdown>
);
}
Copy 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.
Copy 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>
);
0 Comments
Log in to join the conversation.No comments yet. Be the first to share your thoughts.