Skip to main content

Adding Translations to the CreactiveEditor SDK

In this example, we will show you how to configure the CreativeEditor SDK. CE.SDK has full i18n support and allows overwriting and extending all strings to any valid language.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

I18N Configuration#

The CE.SDK comes with a set of configuration parameters that lets you translate any label in the user interface.


JavaScript
const config = {
locale: 'en',
i18n: {
en: {
block: {
page: {
title: "Artboard {{number}}"
}
}
}
}
};
  • locale: string defines the current language in the user interface. The CE.SDK ships with locales for English en and German de, but any other language is possible. See Internationalization for an in-depth explaination of how to add new languages or modify the predefined translations.
JavaScript
locale: 'en',
  • i18n: Object is a recursive map of strings that defines the translations for multiple locales. Since the CE.SDK supports maintaining multiple locales at the same time, the first key in the map must always be the locale the translation is targeting. For a list of possible keys see en.json or de.json. In this example, the page name is modified from "Page" to "Artboard" for the locale 'en'.
JavaScript
i18n: {
en: {
block: {
page: {
title: "Artboard {{number}}"
}
}
}
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.0/cesdk.umd.js';
const config = {
locale: 'en',
i18n: {
en: {
block: {
page: {
title: "Artboard {{number}}"
}
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});