---
title: Internationalization
description: Localize UI labels and set text direction for RTL and mixed-script content.
url: "https://streamdown.ai/docs/internationalization"
docs_index: /llms.txt
lastUpdated: 2026-10-02
type: reference
summary: Localize UI labels and configure text direction (dir) for RTL content.
prerequisites:
  - /docs/getting-started
related:
  - /docs/configuration
  - /docs/interactivity
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Streamdown ships with English labels for all interactive controls — copy buttons, download menus, link modals, and more. Override any label via the `translations` prop.

## Basic usage

Pass a partial translations object to replace specific labels:

```tsx title="app/page.tsx"
<Streamdown
  translations={{
    copyCode: "Copiar código",
    close: "Cerrar",
    openLink: "Abrir enlace",
    downloadImage: "Descargar imagen",
  }}
>
  {markdown}
</Streamdown>
```

## Available translation keys

### Code block

| Property       | Type     | Description                          |
| -------------- | -------- | ------------------------------------ |
| `copyCode`     | `string` | Tooltip for the code copy button     |
| `downloadFile` | `string` | Tooltip for the file download button |

### Mermaid diagrams

| Property               | Type     | Description                           |
| ---------------------- | -------- | ------------------------------------- |
| `downloadDiagram`      | `string` | Label for the diagram download button |
| `downloadDiagramAsSvg` | `string` | Download diagram as SVG option        |
| `downloadDiagramAsPng` | `string` | Download diagram as PNG option        |
| `downloadDiagramAsMmd` | `string` | Download diagram as MMD option        |
| `viewFullscreen`       | `string` | Toggle fullscreen button label        |
| `exitFullscreen`       | `string` | Exit fullscreen button label          |
| `mermaidFormatSvg`     | `string` | Short format label for SVG            |
| `mermaidFormatPng`     | `string` | Short format label for PNG            |
| `mermaidFormatMmd`     | `string` | Short format label for MMD            |

### Table

| Property                  | Type     | Description                         |
| ------------------------- | -------- | ----------------------------------- |
| `copyTable`               | `string` | Label for the table copy button     |
| `copyTableAsMarkdown`     | `string` | Copy as Markdown option             |
| `copyTableAsCsv`          | `string` | Copy as CSV option                  |
| `copyTableAsTsv`          | `string` | Copy as TSV option                  |
| `downloadTable`           | `string` | Label for the table download button |
| `downloadTableAsCsv`      | `string` | Download table as CSV option        |
| `downloadTableAsMarkdown` | `string` | Download table as Markdown option   |
| `tableFormatMarkdown`     | `string` | Short format label for Markdown     |
| `tableFormatCsv`          | `string` | Short format label for CSV          |
| `tableFormatTsv`          | `string` | Short format label for TSV          |

### Image

| Property            | Type     | Description                           |
| ------------------- | -------- | ------------------------------------- |
| `imageNotAvailable` | `string` | Fallback text for broken images       |
| `downloadImage`     | `string` | Tooltip for the image download button |

### Link modal

| Property              | Type     | Description                    |
| --------------------- | -------- | ------------------------------ |
| `openExternalLink`    | `string` | Modal title for external links |
| `externalLinkWarning` | `string` | Warning text in the link modal |
| `close`               | `string` | Close button label             |
| `copyLink`            | `string` | Copy link button label         |
| `copied`              | `string` | Label shown after copying      |
| `openLink`            | `string` | Open link button label         |

## Partial overrides

The `translations` prop accepts `Partial<StreamdownTranslations>`. Any key you omit falls back to the built-in English default:

```tsx title="app/page.tsx"
// Only override what you need — everything else stays English
<Streamdown translations={{ copyCode: "コピー", close: "閉じる" }}>
  {markdown}
</Streamdown>
```

## Access translations in custom components

Use the `useTranslations` hook inside custom components to read the active translations:

```tsx title="app/page.tsx"
import { useTranslations } from "streamdown";

function CustomCodeBlock({ children }) {
  const translations = useTranslations();

  return (
    <div>
      <button>{translations.copyCode}</button>
      <pre><code>{children}</code></pre>
    </div>
  );
}
```

## Text direction

For right-to-left languages or mixed-script Markdown, set the `dir` prop. Prefer `dir="auto"` so each block gets its own base direction:

```tsx title="app/page.tsx"
<Streamdown dir="auto">
  {markdown}
</Streamdown>
```

In static mode, Streamdown keeps the document as one Markdown parse (so footnotes and references still resolve) and assigns `dir` per heading, paragraph, list item, quote, and table cell. Code blocks stay LTR. Detection uses a majority count of strong Unicode letters, with first-strong as the tie-breaker.

See [Configuration → Text direction](/docs/configuration#text-direction-dir) for the full behavior matrix.

## Exported types and values

```tsx
import type { StreamdownTranslations } from "streamdown";
import { defaultTranslations, useTranslations } from "streamdown";
```

- `StreamdownTranslations` — interface with all 37 translation keys
- `defaultTranslations` — the built-in English defaults
- `useTranslations()` — React hook returning the active translations object

---

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)