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.

I18N API#

Internationalisation can also be handled during runtime with a complementary set of APIs.

cesdk.i18n.getLocale(): string returns the currently set locale string, e.g. "en" for our default english locale.

cesdk.i18n.setLocale(locale: string) updates the locale to the string passed in as locale parameter. This is either one of our predefined strings ("en" for english or "de" for german) or any additionally configured locales.

cesdk.i18n.setTranslations(definition: { [locale: string]: object }) adds an object with translations to CE.SDK. This has the same format as the above described i18n configuration object.


import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.45.0/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();

  const currentLocale = instance.i18n.getLocale();
  console.log({ currentLocale }); // Output: "fr"

  instance.i18n.setLocale('it');
  const updatedLocale = instance.i18n.getLocale();
  console.log({ updatedLocale }); // Output: "it"

  instance.i18n.setTranslations({
    hr: {
      'common.back': 'Poništi',
      'meta.currentLanguage': 'Hrvatski'
    },
    sv: {
      'common.back': 'Ångra',
      'meta.currentLanguage': 'Svenska'
    }
  });
});