> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Languages

> Show the editor in a built-in language, replace some of its texts, or bring a whole new language.

Set the editor's language, or your own texts, with the `lang` prop.

## Built-In Languages

| Code | Language |
| - | - |
| `en-us` | English (default) |
| `es-es` | Spanish |
| `pt-br` | Brazilian Portuguese |

```tsx React theme={"dark"}
import { EmbedEditor } from '@embededitor/full/react';

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor lang='es-es' src={src} />
  </div>
);

export default PhotoEditor;
```

```js JavaScript theme={"dark"}
import { mountEditor } from '@embededitor/full/standalone';

mountEditor(document.getElementById('editor'), {
  lang: 'es-es',
  src: '/photos/sunset.jpg'
});
```

The language switches live. A string outside the list reads English, with no error.

## Your Own Texts

Pass an object instead of a code. It takes three keys:

| Key | Required | What it does |
| - | - | - |
| `texts` | Yes | Any subset of the editor's messages, by key, each one a string. |
| `extend` | No | The built-in language that fills the texts you leave out. |
| `locale` | No | A BCP 47 tag that formats numbers only (a lens's zoom as "2,5×"), through `Intl.NumberFormat`. Defaults to the `extend` language, then `en-us`. |

```tsx App.tsx theme={"dark"}
// replace some texts of a built-in language; the rest read pt-br
<EmbedEditor lang={{ extend: 'pt-br', texts: { buttonSave: 'Gravar' } }} src={src} />

// a new language; a text it leaves out reads English
<EmbedEditor lang={{ locale: 'fr-fr', texts: frFr }} src={src} />
```

Each message is read key by key: your `texts` first, then the `extend` dictionary, or English when there is no `extend`. A partial translation never shows a gap.

An object written inline in a render is fine. The editor compares it by value, so a new object with the same content re-renders nothing.

`MessageKey` and `LangTexts` are exported to type your texts.

## Start from a Dictionary

The built-in dictionaries ship as JSON, with every message key and its text. Copy one, translate the values, and pass it as `texts`.

```ts i18n.ts theme={"dark"}
import enUs from '@embededitor/full/i18n/en-us.json';
// also '@embededitor/full/i18n/es-es.json'
// and '@embededitor/full/i18n/pt-br.json'
```

Some messages have `{ name }` placeholders, such as `Limit of { count } areas reached`. Keep exactly the placeholders of the English message, in whatever order your language needs. The editor fills them in.

## What Is Invalid

A `lang` object is validated like every other prop. The error screen names the problem, `onLoadError` receives an `INVALID_PROPS` error, and the editor reads English until the value is valid.

| Problem | Named as |
| - | - |
| A `texts` key that is no message | `lang.texts.<key>` |
| A `texts` value that is not a string | `lang.texts.<key>` |
| Placeholders that differ from the English message's | `lang.texts.<key>` |
| An `extend` outside the built-in languages | `lang.extend` |
| A `locale` that `Intl.NumberFormat` rejects | `lang.locale` |
| No `texts`, or a key besides `extend`, `locale` and `texts` | `lang.texts`, `lang.<key>` |

> [!NOTE]
>
> The editor is always laid out left to right, so a right-to-left page never mirrors it.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.