---
title: Survey Creator Interface Localization
product: Survey Creator
description: SurveyJS Creator provides multi-language support for localization of its interface. Leverage 30+ community-sourced dictionary files to create a multilingual form and add it to your JavaScript app.
framework: React
source: https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Survey Creator Interface Localization (React)
Localization is the adaptation of a product to the local language of its users. Survey Creator supports UI translation into over 30 languages out of the box. In this demo, the Survey Creator UI is translated into German.
Translated strings are shipped as [dictionary files](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization). The localization engine that works with the dictionaries is available as a separate script/module. This script/module imports dictionaries for all languages. Reference this script in the `` tag of your page or import this module into the component that renders Survey Creator:
```html
```
```js
import "survey-creator-core/survey-creator-core.i18n";
```
Since Survey Creator v1.9.112, you may reference or import only the languages you need, as shown below:
```html
```
```js
import "survey-creator-core/i18n/french";
import "survey-creator-core/i18n/german";
import "survey-creator-core/i18n/italian";
```
The default language for UI elements is English. To select another language, set the `currentLocale` property or Survey Creator's [`locale`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#locale) property. This demo shows Survey Creator UI translated into German.
If you want to change individual UI translations, get an object with all translation strings for a specific locale using the `getLocaleStrings(localeCode)` method and override the required properties in this object. You can find a full list of available properties in the [English dictionary](https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-core/src/localization/english.ts). Refer to the Code tab for a code example.
You can also introduce a custom locale to override multiple UI translations in a batch. The following code shows how to do it in a separate TypeScript translation file (dictionary):
```js
// custom-locale.ts
import { setupLocale } from "survey-creator-core";
const customLocaleStrings = {
ed: {
addNewQuestion: "New Question",
deletePage: "Remove Page"
}
};
setupLocale({
localeCode: "customlocale", // A short code used as a locale identifier (for example, "en", "de", "fr")
strings: customLocaleStrings // An object with custom translations
});
```
```js
import "./localization/custom-locale.ts";
import { editorLocalization } from "survey-creator-core";
// ...
// Activate the custom locale
editorLocalization.currentLocale = "customlocale";
// ----- or -----
creator.locale = "customlocale";
```
If any translation strings or other settings are missing in your custom locale, they will be taken from the English locale. You can specify the `defaultLocale` property to use another fallback locale:
```js
editorLocalization.defaultLocale = "fr";
```
## Files
### `public/index.html`
```html
```
### `src/SurveyCreatorComponent.jsx`
```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { getLocaleStrings } from "survey-creator-core";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";
registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes
// Override individual translations in an existing locale
const deuLocale = getLocaleStrings("de");
deuLocale.ed.addNewQuestion = "Neue Frage";
deuLocale.ed.addNewTypeQuestion = "Neue {0}";
function SurveyCreatorRenderComponent() {
const creator = new SurveyCreator();
// Enable the Deutsch locale for Survey Creator UI
creator.locale = "de";
// Enable the Deutsch locale for the survey being configured
creator.survey.locale = "de";
return ();
}
export default SurveyCreatorRenderComponent;
```
### `src/index.css`
```css
/* You can add your custom CSS here. */
```
### `src/index.js`
```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";
const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render();
```
### `package.json`
```json
{
"dependencies": {
"react": "latest",
"react-dom": "latest",
"survey-core": "latest",
"survey-react-ui": "latest",
"survey-creator-core": "latest",
"survey-creator-react": "latest"
},
"devDependencies": {
"react-scripts": "latest"
}
}
```
## Other Frameworks
- [Angular](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/survey-creator-interface-localization/vanillajs.md)