Languages

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

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;

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`.

App.tsx

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

i18n.ts

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>`

The editor is always laid out left to right, so a right-to-left page never mirrors it.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Built-In Languages

Your Own Texts

Start from a Dictionary

What Is Invalid

​Built-In Languages

​Your Own Texts

​Start from a Dictionary

​What Is Invalid

Built-In Languages

Your Own Texts

Start from a Dictionary

What Is Invalid