Localization

Translate the editor interface into any language, support right-to-left layouts, and override individual UI strings.

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function LocalizedEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        locale: 'fr',
        textDirection: 'ltr',
        translations: {
          'toolbar.save': 'Sauvegarder',
          'toolbar.preview': 'Aperçu',
          'panel.content': 'Contenu',
          'panel.settings': 'Paramètres',
        },
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    locale="fr"
    text-direction="ltr"
    :translations="translations"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

const translations = {
  'toolbar.save': 'Sauvegarder',
  'toolbar.preview': 'Aperçu',
  'panel.content': 'Contenu',
};
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';

@Component({
  selector: 'app-localized-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      locale="ar"
      textDirection="rtl"
      [translations]="translations"
    ></pexelize-editor>
  `,
})
export class LocalizedEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;

  translations = {
    'toolbar.save': 'حفظ',
    'toolbar.preview': 'معاينة',
    'panel.content': 'المحتوى',
  };
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    locale: 'ar',
    textDirection: 'rtl',
    translations: {
      'toolbar.save': 'حفظ',
      'toolbar.preview': 'معاينة',
      'panel.content': 'المحتوى',
    },
  },
});

RTL support

Set textDirection: 'rtl' to mirror the entire editor layout for right-to-left languages like Arabic and Hebrew. This affects the panel positions, text alignment defaults, and toolbar layout.

Built-in locales

Pexelize includes built-in translations for: en, fr, de, es, pt, it, nl, ar, he, ja, ko, zh. Set the locale option to use them. The translations object overrides individual keys.

Update at runtime

Switch language or direction without reinitializing:

// React
editorRef.current?.editor?.setLocale('de');
editorRef.current?.editor?.setTextDirection('ltr');
editorRef.current?.editor?.setLanguage('de', {
  'toolbar.save': 'Speichern',
  'toolbar.preview': 'Vorschau',
});

// Vanilla JS
pexelize.setLocale('de');
pexelize.setTextDirection('ltr');
pexelize.setLanguage('de', { 'toolbar.save': 'Speichern' });

Partial overrides

You don't need to provide every translation key. The translations object merges with the built-in locale, so you can override just the strings you want to customize.

Method reference

Method	Returns	Description
setLocale(locale)	void	Switch to a built-in locale
setLanguage(locale, translations)	void	Set locale with custom translation overrides
setTextDirection(dir)	void	Set 'ltr' or 'rtl' layout direction

Next steps

• Customize Appearance — theme the editor UI
• Custom Fonts — add fonts for non-Latin scripts
• Collaboration — localized commenting and review UI