Skip to main content
Version: Latest

Localization

Dragble Editor ships with 29 built-in languages out of the box. You can also provide custom translation overrides for any string, or add entirely new languages. The default locale is English US (en-US).

Setting the locale​

Pass a BCP 47 locale code (e.g. en-US, fr-FR, ja-JP) when initializing the editor. You can also pass bare language codes like en, fr, de — the editor automatically maps them to the default region.

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

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

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      options={{
        locale: "fr-FR",
        textDirection: "ltr",
      }}
    />
  );
}

Supported languages​

The editor includes full translations for 29 languages across 22 language families. Each locale contains over 1,100 translated strings covering all UI elements.

LanguageRegionLocale CodeRTL
ArabicUAEar-AEYes
Chinese (Simplified)Chinazh-CNNo
Chinese (Traditional)Taiwanzh-TWNo
CzechCzech Republiccs-CZNo
DanishDenmarkda-DKNo
DutchNetherlandsnl-NLNo
EnglishUSA (Default)en-USNo
EnglishCanadaen-CANo
EstonianEstoniaet-EENo
Farsi (Persian)Iranfa-IRYes
FinnishFinlandfi-FINo
FrenchFrancefr-FRNo
FrenchCanadafr-CANo
GermanGermanyde-DENo
HungarianHungaryhu-HUNo
IndonesianIndonesiaid-IDNo
ItalianItalyit-ITNo
JapaneseJapanja-JPNo
KoreanKoreako-KRNo
NorwegianNorwayno-NONo
PolishPolandpl-PLNo
PortugueseBrazilpt-BRNo
PortuguesePortugalpt-PTNo
RussianRussiaru-RUNo
SpanishSpaines-ESNo
SwedishSwedensv-SENo
TurkishTurkeytr-TRNo
UkrainianUkraineuk-UANo
VietnameseVietnamvi-VNNo

:::tip Shorthand locale codes You can pass just the language code (e.g. fr instead of fr-FR). The editor automatically maps it to the default region for that language. For languages with multiple regions (English, French, Portuguese, Chinese), the mapping defaults to: en → en-US, fr → fr-FR, pt → pt-BR, zh → zh-CN. :::

RTL support​

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

The editor automatically detects RTL for ar-AE and fa-IR locales, but you can explicitly set it for any locale:

options: {
  locale: 'ar-AE',
  textDirection: 'rtl',
}

Custom translation overrides​

You don't need to translate every string. The translations object merges with the built-in locale — you only override the keys you want to customize:

<DragbleEditor
  ref={editorRef}
  editorKey="db_your_key"
  options={{
    locale: "fr-FR",
    translations: {
      "fr-FR": {
        "buttons.save": "Sauvegarder",
        "buttons.cancel": "Annuler",
        "editor.background_color": "Couleur de fond",
      },
    },
  }}
/>

Adding a new language​

To add a language not in the built-in list, set the locale to your custom code and provide a full set of translations:

options: {
  locale: 'th',
  translations: {
    th: {
      'buttons.save': 'บันทึก',
      'buttons.cancel': 'ยกเลิก',
      'buttons.delete': 'ลบ',
      // ... provide all 1,114 translation keys
    },
  },
}

:::info Translation merge priority Translations are resolved in this order (highest priority wins):

  1. Your custom translations (translations[locale])
  2. Built-in locale (e.g. fr-FR.json)
  3. English US defaults (en-US.json — always complete, every key exists)

Any key you don't override falls back through this chain automatically. :::

Translation key reference​

The editor uses 1,114 translation keys organized by feature area using dot-notation (e.g. editor.background_color, buttons.save, audit.BUTTON_MISSING_LINK.title).

Download the full English translation file (en-US.json) to use as a reference when creating custom translations. This file contains every key with its English value.

Key namespaces include:

NamespaceDescriptionExamples
ai.*AI features (image generation, smart text, alt text)ai.image_generator.title, ai.smart_text.rephrase
audit.*Design audit rules and messagesaudit.IMAGE_MISSING_ALT.title, audit.all_checks_passed
buttons.*Common button labelsbuttons.save, buttons.cancel, buttons.delete
comments.*Collaboration commentscomments.resolve, comments.reply
content_tools.*Content tool namescontent_tools.image, content_tools.button
editor.*Editor properties and controlseditor.background_color, editor.font_family
file_manager.*File manager and image uploadsfile_manager.upload_images, file_manager.search_placeholder
labels.*General labelslabels.desktop, labels.mobile, labels.preview
modals.*Modal dialogsmodals.delete_item.title, modals.display_conditions.add
modules.*Saved modulesmodules.saved_modules, modules.rows
option_groups.*Property panel group headersoption_groups.general, option_groups.spacing
tabs.*Side panel tab namestabs.content, tabs.styles, tabs.modules
tooltips.*Tooltip texttooltips.undo, tooltips.duplicate, tooltips.delete

Update at runtime​

Switch language or direction without reinitializing the editor:

// Switch to German
editor.setLocale("de-DE");

// Switch to Arabic with RTL
editor.setLocale("ar-AE");
editor.setTextDirection("rtl");

// Switch to a custom locale with overrides
editor.setLocale("th", {
  "buttons.save": "บันทึก",
  "buttons.cancel": "ยกเลิก",
});

Method reference​

MethodReturnsDescription
setLocale(locale, translations?)voidSwitch to a built-in or custom locale. Optional translations object overrides specific keys.
setTextDirection(dir)voidSet 'ltr' or 'rtl' layout direction.

Next steps​