Streamdown v2: Smaller bundle, CDN loading, and new Remend options

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 CDN

The most requested feature since launch has been to reduce the bundle size. While there are many simple ways of doing this, we needed time to find one that preserved both the DX and the end user experience.

Streamdown v2 now ships with a bundle size 83.5% smaller than the previous version and uses a CDN to dynamically load in languages, themes, CSS, and other libraries on-demand. This new slim bundle unlocks the ability to run on Cloudflare Workers.

If you cannot use the CDN (for example, in an air-gapped or slow-internet environment), you can self-host the language, theme, and Mermaid assets.

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>
);​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​‌‍‌‍‌‌‌‌‍​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‌​​‌​​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​‌‍‌‍‌‌‌‌‍​​‍‍‌‍​‌‍‌‍‌​‍‌​‌​​‌‍​‌‌‍​‌‍‌‌‌​​‍‌‍‌‌​‌‌​​​‍​​​‍‌‍‍​‌‍​‌‌​​‌​‌​‌​‌‍‍‌​‍‌‍‌‌‌‍‍‌‌‍‌‍‍‌‌​‍‌‍‌‍‍‌‍‌‌‍‌‌‌‍‍‌‌​‌​​‍‌‍‌‌‍​‌‌​‌‌​‌‍‌‌‌​‍​‍‌‍‌‌‌‍‍‌‌​‌​‍‌‍‍‌‌‍‌‌‌​​‍​‌​‌​‌‌‍‍​‌‌‍​‍‌​‌‍‌‍​‌‌‍‍‌‌​‍‌​‌​​​​‌‌‌‍​‌‍‌‌‌‍​‌‌‍​‌‌‍​‌‍‌‍​‌‍‌‌​‍​‌‍‌‍‌‍‌‍​‌‌‌‌​‌‍‌‌‌‍‌​‌​‌‍‌‍‍‌‌‍‌‌‌‍​‌‍‌​​‌‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‍‌‍‌‍‌‍​‌‌‌‌​‌‍‌‌‌‍‌​‌​​‌‍‌‍​‌‍​‌‌‍​‌‍‌‌​‌‌‍‌‌‌‍‍​‍‌‌‌‌‌‌‌​​‍‌‍‌​‌‍‌‌‌‌​‍‌‍​‌‍‌‌​‌‌‌‍‌‍‌‌‌​‍‌‍​‌‍‌‌‌‍​​‍‌‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌‍​‌‍‍‌‌‍‍‌‍‍​‍​‍​‍​​‍​‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​‌‍‌‍‌‌‌‌‍​​‍​‍​‍‍‌‍​‍​‍‌​‌​​‌‍​‌‌‍​‌‍‌‌​‍​‍​‍‍​‍​‍‌‍‌‌​‌‌​​​‍​​​‍‌‍‍​‌‍​‌‌​​‌​‌​‌​‌‍‍‌​‍​‍​‍​​‍​‍‌‍‌‌‌‍‍‌‌‍‌‍‍‌‌​‍‌‍‌‍‍‌‍‌‌‍‌‌‌‍‍‌‌​​‍​‍​‍‍​‍​‍‌‍‌‌‍​‌‌​‌‌​‌‍‌‌‌​‍​‍​‍​‍​​‍​‍‌‍‌‍‌‍‍‌‌‍‌‌‌‍​‌‍‌​​‍​‍​‍‍​‍​‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍​‍​‍​​‍​‍‌‍​‌‍‌‍​‌‍​‌‌‍​‌‍‌‌​‍​‍​‍‍​‍​‍‌‍‌‌‌‍‍​‍‌‌‌‌‌‌‌​​‍​‍​‍​​‍​‍‌‍‌‌‌‍‍‌‌​‌‍‍‌‌‌​‌‍‌​‍​‍​‍‍​‍​‍​‌​‌​‌‌‍‍​‌‌‍​‍‌​‌‍‌‍​‌‌‍‍‌‌​‍‌​‌​​​​‌‌‌‍​‌‍‌‌‌‍​‌‌‍​‌‌‍​‌‍‌‍​‌‍‌‌​‍​‍​‍​​‍​‍‌‍‌‌‌‍‍‌‌​‌‍‍‌‌‌​‌‍‌‌‌‌​‌‍‌‌​​‌‍‌‌​‍​‍​‍‍​‍​‍‌​‌‌‌‍‍‌‌​‌​‍‌‍‌​‍​‍​‍​​‍​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍‌​‍‌‌‍‍‌‌​‌‍‌‌‌​‍‌‍‌‍‌‍​‌‌‍​‌‍‌‌​‍​‍​‍‍‌‍​‍​‍‌‌‌‍‍‌‌‍‌​‌‍‌‌‍‌‌‌‌​‌​‍‌‌‍‌​​‍​‍​‍‍​‍​‍‌​‍‌‍‍‌‌‍​‌‍‍​‌‌‌​‌‍‌‌‌‍​‌‌​‌​‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍​‍​‍​​‍​‍‌‌‌‍‍‌‌‍‌​‌‍‌‌‍‌‌‌‌​‌​‍‌‍​‌‌‍‌‌‍‌‌‌​‌​​‌‍​‌‌‍​‌‍‌‌​‍​‍​‍‍​‍​‍‌‍​‍‌‌‌‌‍‍‌‌‍​‌‌​‌‍‍‌‌‍‍​‍​‍‌‌​‍​​‍​‍‌‍‌‍‌‍‍‌‌‍‌‌‌‍​‌‍‌​‌‌‌​‌‍‌‌​​‌‍‌‌​‍​‍​‍‍​‍​‍‌‌​‍‌‍‍‌‌‍​‌‍‍​‌‌‌​‌‍‌‌‌‍​‌‌​​‍​‍‌‌‌‌