Override default English labels with your own translations.
Streamdown ships with English labels for all interactive controls — copy buttons, download menus, link modals, and more. Override any label via the translations prop.
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>Code block
Mermaid diagrams
Table
Image
Link modal
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>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>
);
}import type { StreamdownTranslations } from "streamdown";
import { defaultTranslations, useTranslations } from "streamdown";StreamdownTranslations— interface with all 37 translation keysdefaultTranslations— the built-in English defaultsuseTranslations()— React hook returning the active translations object