Skip to main content
Language:

Configure the UI Elements in CreativeEditor SDK

In this example, we will show you how to theme CreativeEditor SDK. Explore a full code sample of the integration on CodeSandbox 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.

Navigation#

  • 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.
  • 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.
  • groups: DockGroup[] | ((currentDockGroup: DockGroup[]) => DockGroup[]): Array or function returning DockGoup[] which describes the dock input layout. DockGroup[] is being described below.
  • defaultGroupId: string: The id of the dock button group being defined as default.

Inside groups we are using the type DockGroup[] for which DockGroup consists of the following properties:

  • id: string is an unique id being used to identify the group. This is the same id being used in defaultGroupId to define the default group.
  • entryIds: string[] is an array of asset source ids which are included in a group.
  • showOverview: boolean: This controls if an overview library will be rendered for the group which includes all entries of that group

Libraries#

  • insert.entries: AssetLibraryEntry[] | (AssetLibraryEntry[]) => AssetLibraryEntry[] configures the entries of the asset library shown for insertion. If a function is provided it will receive the default entries as argument.
  • 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.entries: AssetLibraryEntry[] | (AssetLibraryEntry[]) => AssetLibraryEntry[] ' configures the entries of the asset library shown for replacement. If a function is provided it will receive the default entries as argument.
  • 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
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.16.1/cesdk.umd.js';


const config = {
  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'
        },
        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
        groups: [
          {
            id: 'ly.img.template', // string
            entryIds: ['ly.img.template'] // string[]
          },
          {
            id: 'ly.img.defaultGroup', // string
            showOverview: true // true or false
          }
        ],
        defaultGroupId: 'ly.img.defaultGroup' // string
      },
      libraries: {
        insert: {
          entries: (defaultEntries) => defaultEntries,
          floating: true, // true or false
          autoClose: false // true or false
        },
        replace: {
          entries: (defaultEntries) => defaultEntries,
          floating: true, // true or false
          autoClose: false // true or false
        }
      },
      blocks: {
        opacity: false, // true  or false
        transform: false, // true  or false
        '//ly.img.ubq/image': {
          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();
});