Learn how to configure Streamdown in your project.
Streamdown can be configured to suit your needs. This guide will walk you through the available options and how to configure them.
Default Rehype Plugins:
rehype-raw- HTML supportrehype-sanitize- XSS protection and safe HTML renderingrehype-harden- Security hardening (allows all image and link prefixes, data images enabled)
Default Remark Plugins:
remark-gfm- GitHub Flavored Markdown
Math rendering and CJK support require installing separate plugins. See Mathematics and CJK Language Support.
Mermaid Options
The mermaid prop accepts an object with the following properties:
These props match the react-markdown API, making Streamdown a drop-in replacement.
Element filtering example
// Only allow paragraphs, links, and emphasis
<Streamdown allowedElements={["p", "a", "em"]}>
{markdown}
</Streamdown>
// Remove images but keep everything else
<Streamdown disallowedElements={["img"]}>
{markdown}
</Streamdown>
// Remove images but keep their alt text
<Streamdown disallowedElements={["img"]} unwrapDisallowed>
{markdown}
</Streamdown>
// Custom filter: remove all h3+ headings
<Streamdown
allowElement={(element) =>
!["h3", "h4", "h5", "h6"].includes(element.tagName)
}
>
{markdown}
</Streamdown>URL transform example
import { Streamdown, defaultUrlTransform } from 'streamdown';
// Proxy all image URLs through your CDN
<Streamdown
urlTransform={(url, key, node) => {
if (key === 'src') {
return `https://your-cdn.com/proxy?url=${encodeURIComponent(url)}`;
}
return defaultUrlTransform(url, key, node);
}}
>
{markdown}
</Streamdown>The controls prop can be configured granularly:
<Streamdown
controls={{
table: {
copy: true, // Show table copy button
download: true, // Show table download button
fullscreen: true, // Show table fullscreen button
},
code: {
copy: true, // Show code copy button
download: true, // Show code download button
},
mermaid: {
download: true, // Show mermaid download button
copy: true, // Show mermaid copy button
fullscreen: true, // Show mermaid fullscreen button
panZoom: true, // Show mermaid pan/zoom controls
},
}}
>
{markdown}
</Streamdown>Remend Options
The remend prop configures which Markdown completions are performed during streaming. All options default to true when not specified. Set an option to false to disable that completion:
<Streamdown
remend={{
links: false, // Disable link completion
katex: false, // Disable KaTeX completion
}}
>
{markdown}
</Streamdown>