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. You can use any of the icon ids found within our IMG.LY Icon Set 'Essentials' (see full list here), or any icon id that you've added yourself using the addIconSet API (see details here).
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.50.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: '@imgly/icons/Essentials/Download', // icon id from our 'Essentials' set, or a custom icon id
              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();
});