Skip to main content
Streamdown ships with English labels for all interactive controls — copy buttons, download menus, link-safety modals, and image fallbacks. You can replace any or all of them without touching the component’s internals.

​
Translations

​
Basic usage

Pass a partial translations object to the translations prop. Any key you omit falls back to the built-in English default:
app/page.tsx
<Streamdown
  translations={{
    copyCode: 'Copiar código',
    close: 'Cerrar',
    openLink: 'Abrir enlace',
    downloadImage: 'Descargar imagen',
  }}
>
  {markdown}
</Streamdown>

​
Available translation keys

​
Code blocks

​
copyCode
string
default:"\"Copy Code\""
Tooltip for the copy button on code blocks.
​
downloadFile
string
default:"\"Download file\""
Tooltip for the download button on code blocks.

​
Mermaid diagrams

​
downloadDiagram
string
default:"\"Download diagram\""
Label for the diagram download dropdown button.
​
downloadDiagramAsSvg
string
default:"\"Download diagram as SVG\""
Download-as-SVG menu option.
​
downloadDiagramAsPng
string
default:"\"Download diagram as PNG\""
Download-as-PNG menu option.
​
downloadDiagramAsMmd
string
default:"\"Download diagram as MMD\""
Download-as-MMD menu option.
​
viewFullscreen
string
default:"\"View fullscreen\""
Toggle-fullscreen button label.
​
exitFullscreen
string
default:"\"Exit fullscreen\""
Exit-fullscreen button label.
​
mermaidFormatSvg
string
default:"\"SVG\""
Short format label used inside the download dropdown.
​
mermaidFormatPng
string
default:"\"PNG\""
Short format label used inside the download dropdown.
​
mermaidFormatMmd
string
default:"\"MMD\""
Short format label used inside the download dropdown.

​
Tables

​
copyTable
string
default:"\"Copy table\""
Label for the table copy button.
​
copyTableAsMarkdown
string
default:"\"Copy table as Markdown\""
Copy-as-Markdown menu option.
​
copyTableAsCsv
string
default:"\"Copy table as CSV\""
Copy-as-CSV menu option.
​
copyTableAsTsv
string
default:"\"Copy table as TSV\""
Copy-as-TSV menu option.
​
downloadTable
string
default:"\"Download table\""
Label for the table download button.
​
downloadTableAsCsv
string
default:"\"Download table as CSV\""
Download-as-CSV menu option.
​
downloadTableAsMarkdown
string
default:"\"Download table as Markdown\""
Download-as-Markdown menu option.
​
tableFormatMarkdown
string
default:"\"Markdown\""
Short format label used inside the download dropdown.
​
tableFormatCsv
string
default:"\"CSV\""
Short format label used inside the download dropdown.
​
tableFormatTsv
string
default:"\"TSV\""
Short format label used inside the download dropdown.

​
Images

​
imageNotAvailable
string
default:"\"Image not available\""
Fallback text shown when an image fails to load.
​
downloadImage
string
default:"\"Download image\""
Tooltip for the image download button.
​
openExternalLink
string
default:"\"Open external link?\""
Title of the link-safety confirmation modal.
​
externalLinkWarning
string
default:"You're about to visit an external website."
Body text in the link-safety modal.
​
close
string
default:"\"Close\""
Close button label in the link-safety modal.
​
copyLink
string
default:"\"Copy link\""
Copy-link button label in the link-safety modal.
​
copied
string
default:"\"Copied\""
Confirmation label shown after a successful copy action.
​
openLink
string
default:"\"Open link\""
Confirm-and-open button label in the link-safety modal.

​
Accessing translations in custom components

The useTranslations hook reads the active translations object inside any component rendered within a <Streamdown> tree. Use it in custom components to keep your labels consistent with the rest of the UI:
components/my-code-block.tsx
import { useTranslations } from 'streamdown';

function MyCodeBlock({ children }: { children: React.ReactNode }) {
  const t = useTranslations();

  return (
    <div className="relative">
      <button className="absolute top-2 right-2 text-xs">
        {t.copyCode}
      </button>
      <pre><code>{children}</code></pre>
    </div>
  );
}

​
TypeScript types

import type { StreamdownTranslations } from 'streamdown';
import { defaultTranslations } from 'streamdown';

// Full type for the translations object
const myTranslations: Partial<StreamdownTranslations> = {
  copyCode: 'Kopieren',
};

// Built-in English defaults, useful as a reference or base
console.log(defaultTranslations.copyCode); // "Copy Code"
Exported from streamdown:
  • StreamdownTranslations — interface with all translation keys
  • defaultTranslations — the built-in English defaults object
  • useTranslations — React hook that returns the active translations

​
Icons

Streamdown uses a small set of SVG icons in its built-in controls. You can replace any icon with a custom component via the icons prop.

​
Usage

app/page.tsx
import { Copy, Download, X } from 'lucide-react';

<Streamdown
  icons={{
    CopyIcon: Copy,
    DownloadIcon: Download,
    XIcon: X,
  }}
>
  {markdown}
</Streamdown>

​
IconMap interface

The icons prop accepts Partial<IconMap>. Any key you omit keeps the default icon.
KeyDefault iconWhere it appears
CheckIconCheck markAfter a successful copy action
CopyIconClipboardCode block and table copy buttons
DownloadIconDownload arrowCode block and table download buttons
ExternalLinkIconExternal link arrowLink-safety modal
Loader2IconSpinning loaderLoading states
Maximize2IconExpand arrowsFullscreen toggle button
RotateCcwIconRotate counter-clockwiseMermaid error retry button
XIconClose XClose button in link-safety modal
ZoomInIconMagnifying glass +Pan/zoom in on Mermaid diagrams
ZoomOutIconMagnifying glass −Pan/zoom out on Mermaid diagrams
Each icon component must match this type: 
type IconComponent = React.ComponentType<
  React.SVGProps<SVGSVGElement> & { size?: number }
>;
This is compatible with Lucide React icons out of the box.

​
TypeScript types

import type { IconMap } from 'streamdown';

const myIcons: Partial<IconMap> = {
  CopyIcon: MyCopyIcon,
};

<Streamdown icons={myIcons}>{markdown}</Streamdown>

Build docs developers (and LLMs) love

Get started for freeTalk to us