Internationalization

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:

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

Available translation keys

Code block

Mermaid diagrams

Table

Image

Link modal

Partial overrides

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

// 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:

import { useTranslations } from "streamdown";

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

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

Exported types and values

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