{children}

; }; export default function Page() { return ( {markdown} ); } ``` The hook returns `true` when all of the following are true: - `isAnimating={true}` (streaming mode is active) - The component is in the last block being streamed - That block has an unclosed code fence (` ``` ` without a closing ` ``` `) Once the code fence closes, the hook returns `false` and your component can render normally—even while the rest of the markdown continues streaming. > This is particularly useful for Mermaid diagrams and syntax highlighters where continuous re-rendering during streaming would cause performance issues. ```tsx title="app/page.tsx" ( {children} ), }} > {markdown} ``` ## Preserving Table Interactivity When overriding the `table` component, the built-in copy and download buttons are lost because custom components fully replace default implementations. To restore them, import the table action components and include them in your custom table: ```tsx title="app/page.tsx" import { Streamdown, TableCopyDropdown, TableDownloadDropdown, } from "streamdown"; (

{children}

), }} > {markdown} ``` > The `data-streamdown="table-wrapper"` attribute is required — the action components use `.closest()` to find this wrapper, then `.querySelector("table")` to locate the `` element inside it. Your custom table component must render a `

` element as a descendant of the wrapper div. A `TableDownloadButton` component is also available for rendering a single-format download button instead of a dropdown: ```tsx title="app/page.tsx" import { TableDownloadButton } from "streamdown"; ``` You can control the CSV delimiter for table copy and download with `controls.table.csvSeparator`. Supported values are `","`, `";"`, `"\t"`, and `"auto"` (locale-aware selection). The default is `","`. ```tsx title="app/page.tsx" {markdown} ``` ### Lower-level utilities For fully custom implementations, use the extraction and conversion utilities directly: ```tsx title="app/page.tsx" import { extractTableDataFromElement, type CSVSeparator, tableDataToCSV, tableDataToTSV, tableDataToMarkdown, } from "streamdown"; // Extract structured data from a

DOM element const data = extractTableDataFromElement(tableElement); // Convert to various formats const csv = tableDataToCSV(data, "auto"); const tsv = tableDataToTSV(data); const markdown = tableDataToMarkdown(data); ``` The `tableDataToCSV` helper accepts an optional `CSVSeparator` argument (`"," | ";" | "\t" | "auto"`) so you can choose the delimiter explicitly or let `"auto"` pick a locale-friendly separator. ## Custom HTML Tags You can render custom HTML tags from AI responses (like ``, ``, etc.) using the `allowedTags` prop alongside `components`. This is useful when you instruct the AI to output structured data that renders as interactive components. For example, you might add a system prompt: ``` When referencing a source, use: Source Title ``` The AI then outputs markdown containing: ```markdown According to the documentation Getting Started Guide, you should... ``` ### Setup Use the `allowedTags` prop to specify which custom tags and attributes to allow through sanitization, then map them to React components: ```tsx title="app/page.tsx" tag with id attribute }} components={{ source: ({ id, children }) => ( ), }} > {markdown} ``` ### Multiple Custom Tags You can allow multiple custom tags: ```tsx title="app/page.tsx" ( {children} ), mention: ({ user_id, children }) => ( {children} ), action: ({ name, payload, children }) => ( {children} ), }} > {markdown} ``` ### Fallback for missing map entries When you only need a shared renderer for tags that are **not** already in the built-in map (or your `components` overrides), use `fallbackComponent` instead of enumerating every tag: ```tsx title="app/page.tsx" import { createElement } from "react"; createElement(node!.tagName, props, children) } components={{ // Still wins over fallbackComponent for this tag mention: ({ user_id, children }) => ( {children} ), }} > {markdown} ``` `fallbackComponent` also applies to standard HTML tags absent from both the built-in set and `components` (for example ``, ``, `
`, `
`). > This is **not** a full unstyled mode. Built-in renderers (`h1`, `p`, `code`, > …) and any explicit `components` entries always take precedence. To restyle > those tags, override them in `components`. ### Data Attributes Use `data*` in the attributes array to allow all `data-*` attributes on a tag: ```tsx title="app/page.tsx" , }} > {markdown} ``` ### Important Notes - Without `allowedTags`, custom tags are stripped by the sanitizer (content is preserved, tags are removed) - Only attributes listed in `allowedTags` are preserved; unlisted attributes are stripped - The `allowedTags` prop only works with the default rehype plugins > If you provide custom `rehypePlugins`, you'll need to configure `rehype-sanitize` yourself to allow custom tags. See the [Security](/docs/security) documentation for details. ### Plain text tag content By default, children of custom HTML tags are parsed as markdown. This means underscores, asterisks, and other markdown metacharacters in tag content get formatted unexpectedly — for example, `some_user_name` renders with italicized text instead of a literal underscore. Use the `literalTagContent` prop to treat the children of specific tags as plain text: ```tsx title="app/page.tsx" ( @{children} ), }} > {markdown} ``` > Tags listed in `literalTagContent` must also be listed in `allowedTags`. Otherwise the tag is stripped by the sanitizer before literal content handling applies. ### Security Considerations When allowing custom HTML tags: - Only whitelist tags you explicitly need - Only whitelist attributes you explicitly need - Validate attribute values in your component before using them - Never allow `script`, `style`, or event handler attributes (`onclick`, etc.) See the [Security](/docs/security) documentation for more details on HTML handling. --- 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)