Adding Translations to the CreativeEditor 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 on Stackblitz or view the code on Github.

I18N Configuration#

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

locale: string defines the default language of the user interface. This can later be changed in the editor customization panel. The CE.SDK currently ships with locales for English en and German de. Additional languages will be available in the future. Until then, or if you want to provide custom wording and translations, you can provide your own translations under the i18n configuration option, as described in the next paragraph.

i18n: Object is a map of strings that define 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. In this example, we change the back-button label for the locales 'fr' and 'it'.
Please note that the fallback locale is 'en'. So, with this configuration, the complete user interface would be English except for the back-button. Also, if you want to change a single label for one of our shipped translations, you do not have to add all keys, but only the one you want to override.
A detailed overview of all available keys can be found in form of predefined language files inside assets/i18n. You can download the English version from our CDN here: en.json

Under the special key meta.currentLanguage, you should provide a short label for your provided language. This will be used to display the language in the language select dropdown of the editor customization panel.


import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.41.1/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  locale: 'fr',
  i18n: {
    fr: {
      'common.back': 'Retour',
      'meta.currentLanguage': 'Français'
    },
    it: {
      'common.back': 'Indietro',
      'meta.currentLanguage': 'Italiano'
    }
  },
  ui: {
    elements: {
      navigation: {
        action: {
          back: true // Enable 'Back' button to show translation label.
        }
      },
      panels: {
        settings: true // Enable Settings panel for switching languages.
      }
    }
  },
  callbacks: { onUpload: 'local' } // Enable local uploads in Asset Library.
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});