DevExtreme React - UI Text Localization

DevExtreme UI text localization uses dictionaries from devextreme/localization/messages/<code>.json. Each dictionary contains over 800 localized strings.

A dictionary key (for example de, fr, zh-tw) is a BCP 47 language tag. If you set a region-qualified locale and no exact dictionary exists, DevExtreme resolves the locale through parent fallback and then to English (en). For example, de-AT resolves to de, and ca-ES resolves to ca.

Locale matching is case-insensitive. For example, zh-TW and zh-tw resolve to the same dictionary.

Use one of the following dictionary delivery formats:

  • <code>.json in module-based projects (Angular, Vue, React, or any bundler workflow).
  • dx.messages.<code>.js in script-tag projects (jQuery, CDN, or non-module setups).
jQuery

Use the script-tag dictionary file and set the locale after the file is loaded:

HTML
<head>
    <!-- DevExtreme library -->
    <script src="https://cdn3.devexpress.com/jslib/26.1.3/js/dx.all.js"></script>
    <!-- German dictionary -->
    <script src="https://cdn3.devexpress.com/jslib/26.1.3/js/localization/dx.messages.de.js"></script>
</head>
<body>
    <script>
        DevExpress.localization.locale("de");
        // ...
    </script>
</body>
Angular
app.component.ts
import { Component } from '@angular/core';
import deMessages from 'devextreme/localization/messages/de.json';
import { loadMessages, locale } from 'devextreme/localization';

@Component({
    selector: 'app-root',
    template: '',
    standalone: true
})
export class AppComponent {
    constructor() {
        loadMessages(deMessages);
        locale('de');
    }
}
Vue
App.vue
<script setup lang="ts">
import deMessages from 'devextreme/localization/messages/de.json';
import { loadMessages, locale } from 'devextreme/localization';

loadMessages(deMessages);
locale('de');
</script>
React
App.tsx
import deMessages from 'devextreme/localization/messages/de.json';
import { loadMessages, locale } from 'devextreme/localization';

loadMessages(deMessages);
locale('de');

export default function App() {
    return null;
}

DevExtreme Dictionaries Reference

Codes and Tags

  • Code: the value passed to locale(code) and the top-level dictionary key.
  • BCP 47 Tag: a representative regional locale for the language.
  • Dictionary files are language-level files (de, fr, zh-tw).
  • Region-qualified locales resolve through fallback (de-AT -> de -> en).
  • Locale matching is case-insensitive (zh-TW and zh-tw resolve to the same dictionary).

Input and Layout Notes

  • RTL: right-to-left script. Enable mirrored layout with rtlEnabled: true.
  • IME: text usually uses an input method editor (CJK languages). Handle composition input in text validation and keystroke logic.

Available Dictionaries

Language File Language Code BCP 47 Tag Note
ar.json Arabic ar ar-SA RTL
bg.json Bulgarian bg bg-BG
ca.json Catalan ca ca-ES
cs.json Czech cs cs-CZ
da.json Danish da da-DK
de.json German de de-DE
el.json Greek el el-GR
en.json English en en-US Base fallback locale
es.json Spanish es es-ES
fa.json Persian (Farsi) fa fa-IR RTL
fi.json Finnish fi fi-FI
fr.json French fr fr-FR
hu.json Hungarian hu hu-HU
it.json Italian it it-IT
ja.json Japanese ja ja-JP IME
ko.json Korean ko ko-KR IME
lt.json Lithuanian lt lt-LT
lv.json Latvian lv lv-LV
nb.json Norwegian Bokmal nb nb-NO
nl.json Dutch nl nl-NL
pl.json Polish pl pl-PL
pt.json Portuguese pt pt-BR Brazilian Portuguese mapping
pt-BR.json Portuguese (Brazil) pt-BR pt-BR Regional dictionary
pt-PT.json Portuguese (Portugal) pt-PT pt-PT Regional dictionary
ro.json Romanian ro ro-RO
ru.json Russian ru ru-RU
sl.json Slovenian sl sl-SI
sv.json Swedish sv sv-SE
tr.json Turkish tr tr-TR
uk.json Ukrainian uk uk-UA
vi.json Vietnamese vi vi-VN
zh.json Chinese (Simplified) zh zh-CN IME
zh-CN.json Chinese (Simplified, China) zh-CN zh-CN IME, regional dictionary
zh-Hans.json Chinese (Simplified, Script) zh-Hans zh-Hans IME, script dictionary
zh-tw.json Chinese (Traditional) zh-tw zh-TW IME
NOTE
DevExtreme includes these translations for convenience. Review and validate all translated strings before you use them in production. DevExpress does not guarantee that these translations are complete or free of linguistic errors, omissions, or inaccuracies. You are responsible for confirming that translations meet your requirements.

Dictionary Delivery Formats

DevExtreme ships each dictionary in two formats.

JSON (<code>.json)

Use this format in module-based projects.

TypeScript
import deMessages from 'devextreme/localization/messages/de.json';
import { loadMessages, locale } from 'devextreme/localization';

loadMessages(deMessages);
locale('de');

Script (dx.messages.<code>.js)

Use this format in script-tag and non-module projects.

HTML
<script src="https://cdn3.devexpress.com/jslib/<version>/js/dx.all.js"></script>
<script src="https://cdn3.devexpress.com/jslib/<version>/js/localization/dx.messages.de.js"></script>
<script>
    DevExpress.localization.locale('de');
</script>

File Locations

Form Package Path
<code>.json devextreme devextreme/localization/messages/<code>.json
dx.messages.<code>.js devextreme-dist devextreme-dist/js/localization/dx.messages.<code>.js
dx.messages.<code>.js (CDN) CDN https://cdn3.devexpress.com/jslib/<version>/js/localization/dx.messages.<code>.js

Create a New Dictionary

DevExtreme ships one message dictionary per language. To create a dictionary for a new language or a regional variant (for example fr-CA, en-GB, or de-CH), follow these steps:

  1. Copy a base dictionary file, for example fr.json.
  2. Rename the file with a BCP 47 tag, for example fr-CA.json.
  3. Change the top-level key in the dictionary from "fr" to "fr-CA".
  4. Translate or adjust messages for the target language/region.
  5. Load messages and set the locale to the same tag.

Use standard BCP 47 casing in file names and keys:

  • Language subtags: lowercase (fr, en, zh).
  • Region subtags: uppercase (CA, GB, TW).
  • Script subtags: title case (Hant).
NOTE
You can use modern LLM-based translation tools to generate a custom dictionary from an existing DevExtreme dictionary. This approach gives you a fast starting point for additional languages and dialects and can reduce localization effort. AI-generated translations can contain inaccuracies, inconsistencies, or context-related errors. Review and validate all generated strings before production use. You are responsible for final translation quality.

Add Strings to a Dictionary

Use loadMessages(messages) to add custom keys to one or more dictionaries. Use formatMessage(key, value) to retrieve the message for the active locale.

The following examples add the greetingMessage to English and German dictionaries.

jQuery
JavaScript
HTML
$(function() {
    const userName = "John";
    DevExpress.localization.loadMessages({
        "en": {
            "greetingMessage": "Good morning, {0}!"
        },
        "de": {
            "greetingMessage": "Guten Morgen, {0}!"
        }
    });
    DevExpress.localization.locale(navigator.language);
    $("#greeting").text(
        DevExpress.localization.formatMessage("greetingMessage", userName)
    );
});
<h1 id="greeting"></h1>
Angular
app.component.ts
app.component.html
import { Component } from '@angular/core';
import { formatMessage, loadMessages, locale } from 'devextreme/localization';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true
})
export class AppComponent {
    constructor() {
        loadMessages({
            'en': {
                'greetingMessage': 'Good morning, {0}!'
            },
            'de': {
                'greetingMessage': 'Guten Morgen, {0}!'
            }
        });
        locale('de');
    }

    userName: string = 'John';
    get greeting() {
        return formatMessage('greetingMessage', this.userName);
    }
}
<h1>{{ greeting }}</h1>
Vue
App.vue
<template>
    <h1>{{ greeting }}</h1>
</template>

<script setup lang="ts">
import { formatMessage, loadMessages, locale } from 'devextreme/localization';

loadMessages({
    'en': {
        'greetingMessage': 'Good morning, {0}!'
    },
    'de': {
        'greetingMessage': 'Guten Morgen, {0}!'
    }
});
locale('de');

const userName = 'John';
const greeting = formatMessage('greetingMessage', userName);
</script>
React
App.tsx
import { formatMessage, loadMessages, locale } from 'devextreme/localization';

loadMessages({
    'en': {
        'greetingMessage': 'Good morning, {0}!'
    },
    'de': {
        'greetingMessage': 'Guten Morgen, {0}!'
    }
});
locale('de');

export default function App() {
    const greeting = formatMessage('greetingMessage', 'John');
    return <h1>{greeting}</h1>;
}

See this approach in the following demos:

Using Intl Demo Using Globalize Demo

Override Strings in a Dictionary

To override a message, find its key in a dictionary and load a new value for that key.

The following examples override two messages from the English dictionary:

jQuery
JavaScript
$(function() {
    DevExpress.localization.loadMessages({
        "en": {
            "dxDataGrid-editingDeleteRow": "Remove",
            "dxDataGrid-editingUndeleteRow": "Recover"
        }
    });
    DevExpress.localization.locale("en");
});
Angular
app.component.ts
import { Component } from '@angular/core';
import { loadMessages, locale } from 'devextreme/localization';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true
})
export class AppComponent {
    constructor() {
        loadMessages({
            "en": {
                "dxDataGrid-editingDeleteRow": "Remove",
                "dxDataGrid-editingUndeleteRow": "Recover"
            }
        });
        locale('en');
    }
}
Vue
App.vue
<template>
    <!-- ... -->
</template>

<script setup lang="ts">
import { loadMessages, locale } from 'devextreme/localization';

loadMessages({
    "en": {
        "dxDataGrid-editingDeleteRow": "Remove",
        "dxDataGrid-editingUndeleteRow": "Recover"
    }
});
locale('en');
</script>
React
App.tsx
import { loadMessages, locale } from 'devextreme/localization';

loadMessages({
    "en": {
        "dxDataGrid-editingDeleteRow": "Remove",
        "dxDataGrid-editingUndeleteRow": "Recover"
    }
});
locale('en');

export default function App() {
    return null;
}