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 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.
  • 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