Basic Configuration Settings of CreativeEditor SDK

In this example, we will show you how to configure the CreativeEditor SDK.

Explore a full code sample on Stackblitz or view the code on Github.

Basic Configuration#

The CE.SDK comes with a set of basic configuration parameters that let's you influence its look & feel.

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.

baseURL: string defines the root for all assets that are used by the CE.SDK. It defaults to our CDN, but should be changed in production environments. See Serving Assets for an in-depth explanation of how to serve assets from your own servers.

locale: string defines the current language in the user interface. The CE.SDK is shipped 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.

theme: string sets the active theme. The CE.SDK includes predefined dark or light themes but is also highly customizable to match any style. See Theming for an in-depth explanation of how to create your own theme.

role: string sets the initial role to either 'Creator', 'Adopter'. See Roles for more details on roles in the editor and how to use them properly.

logger: (message: string, logLevel: 'Error'|'Warning'|'Info') => void lets you redirect log output from the CreativeEngine/CreativeEditor SDK

Roles#

User roles allow the CE.SDK to change and adapt its UI layout and functionality to provide the optimal editing experience for a specific purpose.

Creator#

The Creator role is the most powerful and least restrictive role that is offered by the CE.SDK. Running the editor with this role means that there are no limits to what the user can do with the loaded scene.

Elements can be added, moved, deleted, and modified. All types of controls for modifying the selected elements are shown inside of the inspector.

Adopter#

The Adopter role allows new elements to be added and modified. Existing elements of a scene are only modifiable based on the set of constraints that the Creator has manually enabled.

This provides the Adopter with a simpler interface that is reduced to only the properties that they should be able to change and prevents them from accidentally changing or deleting parts of a design that should not be modified.

An example use case for how such a distinction between Creator and Adopter roles can provide a lot of value is the process of designing business cards.

A professional designer (using the Creator role) can create a template design of the business card with the company name, logo, colors, etc. They can then use the constraints to make only the name text editable for non-creators. Non-designers (either the employees themselves or the HR department) can then easily open the design in a CE.SDK instance with the Adopter role and are able to quickly change the name on the business card and export it for printing, without a designer having to get involved.

Role customization#

Roles in the CE.SDK are sets of global scopes and settings. When changing the role via the setRole command in the EditorAPI, the internal defaults for that role are applied as described in the previous sections.

The CE.SDK and Engine provide a onRoleChanged callback subscription on the EditorAPI. Callbacks registered here are invoked whenever the role changes and can be used to configure additional settings or adjust the default scopes and settings.


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

const config = {
  license: 'YOUR_API_KEY',
  userId: 'USER_ID',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.39.0/assets',
  locale: 'en', // 'de'
  theme: 'light', // 'dark'
  role: 'Creator', // 'Adopter' 'Viewer'
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
  logger: (message, logLevel) => {
    console.log(`${logLevel}: ${message}}`);
  }
};

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

  instance.engine.editor.onRoleChanged((role) => {
    if (role === 'Adopter') {
      // Enable the filter tab in the appearance panel when previewing the
      // design in the Adopter role.
      instance.engine.editor.setGlobalScope('appearance/filter', 'Allow');
    }
  });

  await instance.createDesignScene();
});