Configure the UI Elements in CreativeEditor SDK

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

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

Element Configurations#

The CE.SDK User Interface is build from the ground up to be highly adaptable to multiple use-cases. This includes hiding or showing individual ui elements, repositioning panels or definining the content of the inspector.

View#

Two different views of the editor are available: The 'advanced' view always shows an inspector panel to the side of the canvas. The 'default' view hides the inspector panel until it is needed, and uses a minimal inspector bar on top of the canvas instead.

view: string is used to toggle between 'advanced' and 'default' view.

show: boolean is used to show or hide the complete navigation
position: string is used to set the location of the navigation bar to either top or bottom .

Actions (Buttons)#

action configures the available buttons in the navigation and call-to-action menu.

close: boolean shows or hides all close buttons.
back: boolean shows or hides all back buttons.
load: boolean shows or hides all load buttons.
save: boolean shows or hides all save buttons.
export.show: boolean shows or hides all export buttons.
export.format: 'application/pdf' | 'image/png' an array of mime types available for export. Supported are application/pdf and image/png. If not set it will add all supported mime types.
download: boolean shows or hides all download buttons.

Custom Call-To-Action Buttons#

action.custom receives an array of custom actions. These will appear as buttons in the call-to-action menu (that also contains the 'save', 'export' and 'download' actions). The first item in the array will be shown in the navigation bar (in place of the 'save' action); all other items will be listed in the dropdown menu. A custom actions has the following properties:

label a string, which can be an i18n key that will be looked up in the translation table.
iconName defines the icon shown on the button. Options are: "default", "download", "upload", or "save"
callback a custom callback function with the signature () => void | Promise<void>. This function is called when the button is clicked. If the function returns a promise, the button is disabled and a spinner is shown on the button until the promise resolves.

Panels#

inspector.position: string is used to set the location of the inspector to either left or right.
inspector.show: boolean shows or hides the inspector.
inspector.floating: boolean configures if the inspector panel is floating over the canvas or set aside of it.
assetLibrary.position: string is used to set the location of the asset library to either left or right.
assetLibrary.show: boolean shows or hides the asset library.
settings: boolean shows or hides the settings panel.

Dock#

iconSize: string is used to set the dock button icon size to large (24px) or normal (16px).
hideLabels: boolean shows or hides the labels inside the docks buttons.

Libraries#

insert.floating: boolean configures if the asset library panel is floating over the canvas or set aside of it.
insert.autoClose: boolean | () => boolean configures if the asset library panel is closed after an asset was inserted (default is false).
replace.floating: boolean configures if the image replacement library panel is floating over the canvas or set aside of it.
replace.autoClose: boolean | () => boolean configures if the asset library panel is closed after an asset was replaced (default is true).

Blocks#

opacity: boolean shows or hides the opacity section in the inspector ui for every block.
transform: boolean shows or hides the transform section in the inspector ui for every block.
adjustments: boolean shows or hides the adjustments section in the inspector ui for the image block.
filters: boolean shows or hides the filters section in the inspector ui for the image block.
effects: boolean shows or hides the effects section in the inspector ui for the image block.
blur: boolean shows or hides the blur section in the inspector ui for the image block.
crop: boolean shows or hides the crop section in the inspector ui for the image block.

Pages#

manage: boolean if false removes all UI elements to add/duplicate/delete pages for every role.
format: boolean if false removes all UI elements to change the format of pages for every role.
maxDuration: number controls the maximum allowed duration of a page, if in video mode


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

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default', // 'default' or 'advanced'
      navigation: {
        show: true, // 'false' to hide the navigation completely
        position: 'top', // 'top' or 'bottom'
        action: {
          close: true, // true or false
          back: true, // true or false
          load: true, // true or false
          save: true, // true or false
          export: {
            show: true,
            format: ['application/pdf']
          },
          download: true, // true  or false
          custom: [
            {
              label: 'common.custom', // string or i18n key
              iconName: 'default', // one of 'default', 'download', 'upload', or 'save'
              callback: () => {
                // callback signature is `() => void | Promise<void>`
                // place custom functionality here
              }
            }
          ]
        }
      },
      panels: {
        inspector: {
          show: true, // true or false
          position: 'left', // 'left' or 'right'
          floating: false // true or false
        },
        assetLibrary: {
          show: true, // true or false
          position: 'left' // 'left' or 'right'
        },
        settings: {
          show: true // true or false
        }
      },
      dock: {
        iconSize: 'large', // 'large' or 'normal'
        hideLabels: false, // false or true
      },
      libraries: {
        insert: {
          floating: true, // true or false
          autoClose: false // true or false
        },
        replace: {
          floating: true, // true or false
          autoClose: false // true or false
        }
      },
      blocks: {
        opacity: false, // true  or false
        transform: false, // true  or false
        '//ly.img.ubq/graphic': {
          adjustments: true, // true  or false
          filters: false, // true  or false
          effects: false, // true  or false
          blur: true, // true  or false
          crop: false // true  or false
        },
        '//ly.img.ubq/page': {
          manage: true,
          format: true,
          maxDuration: 30 * 60
        }
      }
    }
  },
  callbacks: { onUpload: 'local' } // Enable local uploads in Asset Library.
};

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