Skip to main content
Language:

Basic Configuration Settings of CreativeEditor SDK

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

Explore a full code sample of the integration on CodeSandbox 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.


  • 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 active role to either 'Creator', 'Adopter'. See Roles for more details on roles in the editor and how to use them properly.
  • initialSceneMode: 'Design' | 'Video' controls the mode of the initial empty scene created by the editor. Defaults to 'Design'.
  • initialSceneString: string sets a scene description that will be loaded on startup. See Load A Scene for more details on scene loading.
  • initialSceneURL: string will load a scene file from the given URL. Takes precedence over initialSceneString, but initialSceneString will be used as fallback if fetching fails. See Load A Scene for more details on scene loading.
  • initialImageURL: string will instantiate the editor with a single page containing the image stored at the given URL. Takes precedence over any of the other initial options. Falls back to initialSceneURL if image is not avialable or not an image.

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.

File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.2/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.2/assets',
locale: 'en', // 'de'
theme: 'light', // 'dark'
role: 'Creator', // 'Adopter' 'Viewer'
initialSceneMode: 'Design' // 'Video'
initialSceneString: 'UBQ1ewoiZm9ybW…', // A scene string
initialSceneURL: `${window.location.protocol}//${window.location.host}/example.scene`, // A URL pointing at a scene file
initialImageURL: undefined, // A URL pointing to an image file
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});