Configuration
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.
Core Props
Prop
Type
Styling Props
Prop
Type
CDN Props
Prop
Type
Plugin Props
Prop
Type
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.
Feature-Specific Props
Prop
Type
Mermaid Options
The mermaid prop accepts an object with the following properties:
Prop
Type
Element Filtering Props
These props match the react-markdown API, making Streamdown a drop-in replacement.
Prop
Type
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>Advanced Props
Prop
Type
The controls prop can be configured granularly:
<Streamdown
controls={{
table: true, // Show table download button
code: true, // Show code copy 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:
Prop
Type
<Streamdown
remend={{
links: false, // Disable link completion
katex: false, // Disable KaTeX completion
}}
>
{markdown}
</Streamdown>