Configuration - Vanilla JS

The CreativeEditor SDK (CE.SDK) works out of the box with almost zero configuration effort. However, almost every part of CE.SDK can be adapted and its behaviour and look & feel changed.

Here is a list of all available configuration options:

Key	Type	Description
baseURL	`string`	Definition of the the base URL of all assets required by the SDK.
callbacks	`object`	Deprecated - Use `cesdk.actions.register()` API after initialization. Legacy callback configuration for SDK triggers.
i18n	`object`	Deprecated - Use `cesdk.i18n.setTranslations()` instead. Options to add custom translations to the SDK.
license	`string`	A license key that is unique to your product.
userID	`string`	An unique ID tied to your application’s user. This helps us accurately calculate monthly active users (MAU). Especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they’re counted once. Providing this aids in better data accuracy.
locale	`string`	Deprecated - Use `cesdk.i18n.setLocale()` instead. Chosen language the editor uses. Possible values are ‘en’, ‘de’, …
role	`string`	Chosen role. Possible values are ‘Creator’ or ‘Adopter’.
theme	`string`	Deprecated - Use `cesdk.ui.setTheme()` instead. The preferred theme the SDK is launched with. Possible values are ‘system’, ‘dark’, ‘light’. Default is ‘light’.
ui	`object`	Options to adapt the user interface elements.

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

const config = {
  license: 'YOUR_API_KEY',
  userId: 'USER_ID',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.62.0/assets',
  role: 'Creator', // 'Adopter' 'Viewer'
  logger: (message, logLevel) => {
    console.log(`${logLevel}: ${message}}`);
  },
};

CreativeEditorSDK.create('#cesdk_container', config).then(async cesdk => {
  // Set theme using the UI API
  cesdk.ui.setTheme('dark'); // 'system', 'dark', or 'light'

  // Get the current theme
  const currentTheme = cesdk.ui.getTheme(); // Returns 'light' or 'dark'

  cesdk.i18n.setLocale('en'); // 'de'

  // Populate the asset library with default / demo asset sources.
  cesdk.addDefaultAssetSources();
  cesdk.addDemoAssetSources({
    sceneMode: 'Design',
    withUploadAssetSources: true,
  });

  await cesdk.createDesignScene();

  // Theme can be changed at runtime
  // cesdk.ui.setTheme('light');
});