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.
  • 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.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.2/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
}
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK * */
});