Code block and table components

Streamdown exports its internal code block and table components so you can compose custom UIs around them. All components are exported from the streamdown package.

Code block components

CodeBlock

The primary code block component. Renders a container with a language header, an optional actions slot, and the highlighted code body. Syntax highlighting is loaded lazily via React Suspense; the unhighlighted tokens are shown as a fallback while the highlighter loads.

import { CodeBlock, CodeBlockCopyButton, CodeBlockDownloadButton } from "streamdown";

<CodeBlock code={code} language="typescript">
  <CodeBlockCopyButton />
  <CodeBlockDownloadButton />
</CodeBlock>

Props (HTMLAttributes<HTMLDivElement> plus:)

code

string

required

The raw source code to display and highlight.

language

string

required

The language identifier used for syntax highlighting and file extension mapping.

isIncomplete

boolean

When true, marks the block as still streaming. The container receives a data-incomplete attribute and highlighting may be deferred. Defaults to false.

startLine

number

Custom starting line number for line numbering. Defaults to 1.

lineNumbers

boolean

Whether to show line numbers. Inherits from StreamdownContext (default true) when not provided directly.

children

React.ReactNode

Action buttons rendered in a sticky overlay in the top-right corner of the code block. Typically CodeBlockCopyButton and/or CodeBlockDownloadButton.

CodeBlockContainer

The outer wrapper <div> for a code block. Applies Tailwind classes for border, background, padding, and rounded corners, plus content-visibility: auto for off-screen rendering performance.

import { CodeBlockContainer } from "streamdown";

<CodeBlockContainer language="typescript" isIncomplete={false}>
  {/* custom code block content */}
</CodeBlockContainer>

Props (ComponentProps<"div"> plus:)

language

string

required

Set as the data-language attribute on the container element.

isIncomplete

boolean

When true, sets data-incomplete on the container. Useful for conditional styling during streaming.

CodeBlockHeader

A small header bar that displays the language name in lowercase monospace text.

import { CodeBlockHeader } from "streamdown";

<CodeBlockHeader language="typescript" />

Props:

language

string

required

The language label to display. Rendered in lowercase.

CodeBlockCopyButton

A button that copies the code to the clipboard. Must be rendered inside a CodeBlock (which provides the code via context) or receive the code prop directly. Disabled during animation (isAnimating from StreamdownContext).

import { CodeBlockCopyButton } from "streamdown";

// Inside a CodeBlock — code is read from context:
<CodeBlock code={code} language="typescript">
  <CodeBlockCopyButton />
</CodeBlock>

// Standalone with explicit code:
<CodeBlockCopyButton code={code} />

Props (ComponentProps<"button"> plus:)

code

string

The text to copy. When omitted, the code is read from the nearest CodeBlock via context.

onCopy

() => void

Called after the code has been successfully written to the clipboard.

onError

(error: Error) => void

Called when copying fails (e.g. clipboard API unavailable).

timeout

number

Duration in milliseconds for which the “copied” state is shown. Defaults to 2000.

CodeBlockDownloadButton

A button that triggers a file download of the code. The file extension is inferred from the language identifier. Disabled during animation.

import { CodeBlockDownloadButton } from "streamdown";

// Inside a CodeBlock — code and language are read from context:
<CodeBlock code={code} language="python">
  <CodeBlockDownloadButton />
</CodeBlock>

// Standalone:
<CodeBlockDownloadButton code={code} language="python" />

Props (ComponentProps<"button"> plus:)

code

string

The text to download. When omitted, the code is read from the nearest CodeBlock via context.

language

string

Used to determine the file extension (e.g. "typescript" → .ts, "python" → .py). Falls back to .txt for unknown languages.

onDownload

() => void

Called after the file download is triggered.

onError

(error: Error) => void

Called when the download fails.

CodeBlockSkeleton

A loading placeholder that matches the shape of a code block. Shows a spinner icon. Use this as a loading state while a code block is being prepared.

import { CodeBlockSkeleton } from "streamdown";

<CodeBlockSkeleton />

No props. Uses icons from the nearest IconProvider.

Table components

TableCopyDropdown

A dropdown button that copies the nearest ancestor table to the clipboard in Markdown, CSV, or TSV format. The HTML representation of the table is also placed on the clipboard alongside the plain-text format.

import { TableCopyDropdown } from "streamdown";

<TableCopyDropdown
  onCopy={(format) => console.log("Copied as", format)}
/>

onCopy

(format: string) => void

Called with the chosen format after the table has been written to the clipboard.

onError

(error: Error) => void

Called when copying fails.

timeout

number

Duration in milliseconds for the “copied” confirmation state. Defaults to 2000.

className

string

Additional CSS class names for the trigger button.

children

React.ReactNode

Custom trigger content. Defaults to a copy icon.

TableDownloadButton

A button that downloads the nearest ancestor table as a file in the specified format.

import { TableDownloadButton } from "streamdown";

<TableDownloadButton format="csv" filename="my-data" />

format

string

The download format. Defaults to "csv".

filename

string

The base filename without extension. Defaults to "table".

onDownload

() => void

Called after the file download is triggered.

onError

(error: Error) => void

Called when the download fails.

className

string

Additional CSS class names for the button.

children

React.ReactNode

Custom button content. Defaults to a download icon.

TableDownloadDropdown

A dropdown button that lets the user choose between CSV and Markdown download formats.

import { TableDownloadDropdown } from "streamdown";

<TableDownloadDropdown
  onDownload={(format) => console.log("Downloaded as", format)}
/>

onDownload

(format: string) => void

Called with the chosen format after the file download is triggered.

onError

(error: Error) => void

Called when the download fails.

className

string

Additional CSS class names for the trigger button.

children

React.ReactNode

Custom trigger content. Defaults to a download icon.

Table utility functions

The following functions are exported from streamdown and operate on the TableData structure. They are used internally by the table components but are available for standalone use.

TableData

interface TableData {
  headers: string[];
  rows: string[][];
}

headers

string[]

required

The column header values extracted from the <thead> row.

rows

string[][]

required

The data rows extracted from <tbody>. Each inner array corresponds to one table row; values are the text content of each <td> cell.

extractTableDataFromElement()

function extractTableDataFromElement(tableElement: HTMLElement): TableData

Extracts structured data from a <table> DOM element by querying thead th for headers and tbody tr td for rows.

tableElement

HTMLElement

required

The <table> element to extract data from.

tableDataToCSV()

function tableDataToCSV(data: TableData): string

Converts TableData to a CSV string. Values containing commas, double quotes, or newlines are quoted and internal double quotes are escaped by doubling them (" → ""). The header row is included first when headers is non-empty.

tableDataToTSV()

function tableDataToTSV(data: TableData): string

Converts TableData to a TSV (tab-separated values) string. Tabs, newlines, and carriage returns within cell values are escaped as \t, \n, and \r.

tableDataToMarkdown()

function tableDataToMarkdown(data: TableData): string

Converts TableData to a GFM Markdown table string. Returns an empty string when headers is empty. Rows shorter than the header row are padded with empty cells. Pipe characters and backslashes in cell values are escaped.

escapeMarkdownTableCell()

function escapeMarkdownTableCell(cell: string): string

Escapes a single table cell value for safe inclusion in a GFM Markdown table. Backslashes are escaped first (\ → \\), then pipe characters (| → \|). Returns the original string unchanged when no escaping is needed (fast path).

cell

string

required

The raw cell string to escape.

Core

Plugins

Utilities

Code block and table components

Code block components

CodeBlock

CodeBlockContainer

CodeBlockHeader

CodeBlockCopyButton

CodeBlockDownloadButton

CodeBlockSkeleton

Table components

TableCopyDropdown

TableDownloadButton

TableDownloadDropdown

Table utility functions

TableData

extractTableDataFromElement()

tableDataToCSV()

tableDataToTSV()

tableDataToMarkdown()

escapeMarkdownTableCell()

Build docs developers (and LLMs) love

Core

Plugins

Utilities

​Code block components

​CodeBlock

​CodeBlockContainer

​CodeBlockHeader

​CodeBlockCopyButton

​CodeBlockDownloadButton

​CodeBlockSkeleton

​Table components

​TableCopyDropdown

​TableDownloadButton

​TableDownloadDropdown

​Table utility functions

​TableData

​extractTableDataFromElement()

​tableDataToCSV()

​tableDataToTSV()

​tableDataToMarkdown()

​escapeMarkdownTableCell()

Build docs developers (and LLMs) love

Code block components

CodeBlock

CodeBlockContainer

CodeBlockHeader

CodeBlockCopyButton

CodeBlockDownloadButton

CodeBlockSkeleton

Table components

TableCopyDropdown

TableDownloadButton

TableDownloadDropdown

Table utility functions

TableData

extractTableDataFromElement()

tableDataToCSV()

tableDataToTSV()

tableDataToMarkdown()

escapeMarkdownTableCell()