---
title: createTranslator
description: Build a typed translator from a resolved translation map
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

`createTranslator` wraps the flat map returned by `getI18nTranslations` and returns a typed translator. Providers call this internally after merging registry, lazy-loaded built-in packs, browser-translated fallback copy, and provider layers. Use it directly for custom UI outside built-in controls.

<FrameworkCase frameworks={["html"]}>

```ts
import { createTranslator, getI18nTranslations } from '@videojs/html/i18n';

const t = createTranslator(getI18nTranslations('fr'), 'fr');
t('buttons.play', { default: 'Play' });
t('seek.forward', { seconds: 5, default: 'Seek forward {seconds} seconds' });
```

</FrameworkCase>

<FrameworkCase frameworks={["react"]}>

```ts
import { createTranslator, getI18nTranslations } from '@videojs/react/i18n';

const t = createTranslator(getI18nTranslations('fr'), 'fr');
t('buttons.play', { default: 'Play' });
t('seek.forward', { seconds: 5, default: 'Seek forward {seconds} seconds' });
```

</FrameworkCase>

<UtilReference util="createTranslator" />
