portalRef.current}>{markdown}

); ``` The getter form is useful when the portal element is assigned after the first render. Returning `null` falls back to `document.body`. A custom `linkSafety.renderModal` controls its own placement and is not moved by this prop. Like `urlTransform` and `allowElement`, `portal` is an initializing prop: swapping it for a different target alone does not re-render, so prefer the getter form — it is resolved each time an overlay opens. ### Mermaid Options The `mermaid` prop accepts an object with the following properties: ", }, }} /> ## Element Filtering Props These props match the [react-markdown](https://github.com/remarkjs/react-markdown) API, making Streamdown a drop-in replacement. boolean", }, unwrapDisallowed: { description: "When true, disallowed elements are replaced by their children instead of being removed entirely.", type: "boolean", default: "false", }, skipHtml: { description: "Ignore raw HTML in Markdown completely (removes raw HTML nodes from the tree).", type: "boolean", default: "false", }, urlTransform: { description: "Transform all URLs in the Markdown (links, images, etc). Return an empty string to remove the URL. Defaults to defaultUrlTransform (passthrough). URL security is handled by rehype-sanitize and rehype-harden.", type: "(url: string, key: string, node: Element) => string | null | undefined", default: "defaultUrlTransform", }, }} /> ### Element filtering example ```tsx title="app/page.tsx" // Only allow paragraphs, links, and emphasis {markdown} // Remove images but keep everything else {markdown} // Remove images but keep their alt text {markdown} // Custom filter: remove all h3+ headings !["h3", "h4", "h5", "h6"].includes(element.tagName) } > {markdown} ``` ### URL transform example ```tsx title="app/page.tsx" import { Streamdown, defaultUrlTransform } from 'streamdown'; // Proxy all image URLs through your CDN { if (key === 'src') { return `https://your-cdn.com/proxy?url=${encodeURIComponent(url)}`; } return defaultUrlTransform(url, key, node); }} > {markdown} ``` ## Advanced Props ", default: "Block", }, parseMarkdownIntoBlocksFn: { description: "Custom function to parse markdown into blocks", type: "(markdown: string) => string[]", default: "parseMarkdownIntoBlocks", }, }} /> The `controls` prop can be configured granularly. Set a block type to `false` to hide all of its buttons, or pass an object to toggle individual actions. For downloads, pass `{ filename: "customName" }` to set a custom base filename — the file extension is added automatically. ```tsx title="app/page.tsx" {markdown} ``` You can still use `download: true` (or omit it) to keep the default filenames: `file.` for code, `table.csv` / `table.md` for tables, and `diagram.svg` / `diagram.png` / `diagram.mmd` for mermaid. ### 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: as comparison operators in list items", type: "boolean", default: "true", }, htmlTags: { description: "Strip incomplete HTML tags at end of streaming text", type: "boolean", default: "true", }, linkMode: { description: "How to handle incomplete links: 'protocol' uses a placeholder URL, 'text-only' displays plain text", type: '"protocol" | "text-only"', default: '"protocol"', }, handlers: { description: "Custom handlers to extend remend with your own completion logic", type: "RemendHandler[]", }, }} /> ```tsx title="app/page.tsx" {markdown} ``` --- For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md) For an index of all available documentation, see [/llms.txt](/llms.txt) For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)