---
url: https://plugin.stripo.email/extensions/features/localization.md
---
# Localization

The Stripo editor is multilingual and supports full localization of the user interface.
The parameter that controls the interface language is passed during initialization:

```javascript
const stripoConfig = {
  locale: 'en',
  ...
}

window.UIEditor.initEditor(domContainer, stripoConfig);
```

To support message localization, you need to:

1. Register a map of keys and values for each supported language
2. Call the `translate` API method where needed instead of plain text, passing the translation key and optional parameters for interpolation into the translated string

## Additional Considerations

When modifying a template, the `apply` method accepts a `ModificationDescription` parameter with a description of the changes.
To ensure this text is displayed in the version history in the user's language, it is strongly recommended to use translation keys in `ModificationDescription` as well.

## Example

```javascript
//------------en.js-------------
export default {
    "Buy": "Buy",
    "Sell": "Sell {count} units.",
    "Set event-id": "Set event-id {eventId}"
}
//------------uk.js-------------
export default {
    "Buy": "Купити",
    "Sell": "Продати {count} од.",
    "Set event-id": "Встановлено event-id {eventId}"
}
//------------SimpleBlock.js-------------
import {Block, ModificationDescription} from '@stripoinc/ui-editor-extensions';

export class SimpleBlock extends Block {
    getTemplate() {
        return `
            <td>
                <a href="https://stripo.email/">
                    ${this.api.translate('Buy')}
                </a>
                <a href="https://stripo.email/">
                    ${this.api.translate('Sell', {count: 2})}
                </a>
            </td>
        `
    }

    onCreated(node) {
        const eventId = '1234-56';
        this.api.getDocumentModifier()
            .modifyHtml(node)
            .setAttribute('event-id', eventId)
            .apply(new ModificationDescription('Set event-id')
                .withParams({ eventId: eventId }));
    }

    // Additional block configuration methods...
}

//------------Extension.js-------------
import uk from './uk';
import en from './en';
import {ExtensionBuilder} from '@stripoinc/ui-editor-extensions';
import {SimpleBlock} from './blocks/SimpleBlock';

export default new ExtensionBuilder()
    .withLocalization({
        'en': en,
        'uk': uk,
    })
    .addBlock(SimpleBlock)
    .build();
```