Skip to main content
CESDK/Web/Configuration/User Interface
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.

  • style: 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 .
  • action.close: boolean shows or hides all close buttons.
  • action.back: boolean shows or hides all back buttons.
  • action.load: boolean shows or hides all load buttons.
  • action.save: boolean shows or hides all save buttons.
  • action.export.show: boolean shows or hides all export buttons.
  • action.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.
  • action.download: boolean shows or hides all download buttons.

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.
  • 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.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/cesdk.umd.js';
const config = {
ui: {
elements: {
view: {
style: '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
}
},
panels: {
inspector: {
show: true, // true or false
position: 'right' // '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
}
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK * */
});