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 navigationposition: string
is used to set the location of the navigation bar to eithertop
orbottom
.
Actions (Buttons)#
action
configures the available buttons in the navigation and call-to-action menu.
close: boolean
shows or hides allclose
buttons.back: boolean
shows or hides allback
buttons.load: boolean
shows or hides allload
buttons.save: boolean
shows or hides allsave
buttons.export.show: boolean
shows or hides allexport
buttons.export.format: 'application/pdf' | 'image/png'
an array of mime types available for export. Supported areapplication/pdf
andimage/png
. If not set it will add all supported mime types.download: boolean
shows or hides alldownload
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 eitherleft
orright
.inspector.show: boolean
shows or hides the inspector.assetLibrary.position: string
is used to set the location of the asset library to eitherleft
orright
.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 tolarge
(24px) ornormal
(16px).hideLabels: boolean
shows or hides the labels inside the docks buttons.groups: DockGroup[] | ((currentDockGroup: DockGroup[]) => DockGroup[])
: Array or function returningDockGoup[]
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 sameid
being used indefaultGroupId
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 isfalse
).- '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 istrue
).
Blocks#
opacity: boolean
shows or hides theopacity
section in the inspector ui for every block.transform: boolean
shows or hides thetransform
section in the inspector ui for every block.adjustments: boolean
shows or hides theadjustments
section in the inspector ui for the image block.filters: boolean
shows or hides thefilters
section in the inspector ui for the image block.effects: boolean
shows or hides theeffects
section in the inspector ui for the image block.blur: boolean
shows or hides theblur
section in the inspector ui for the image block.crop: boolean
shows or hides thecrop
section in the inspector ui for the image block.
Pages#
manage: boolean
iffalse
removes all UI elements to add/duplicate/delete pages for every role.format: boolean
iffalse
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 '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 completelyposition: 'top', // 'top' or 'bottom'action: {close: true, // true or falseback: true, // true or falseload: true, // true or falsesave: true, // true or falseexport: {show: true,format: ['application/pdf']},download: true, // true or falsecustom: [{label: 'common.custom', // string or i18n keyiconName: '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 falseposition: 'left' // 'left' or 'right'},assetLibrary: {show: true, // true or falseposition: 'left' // 'left' or 'right'},settings: {show: true // true or false}},dock: {iconSize: 'large', // 'large' or 'normal'hideLabels: false, // false or truegroups: [{id: 'ly.img.template', // stringentryIds: ['ly.img.template'] // string[]},{id: 'ly.img.defaultGroup', // stringshowOverview: true // true or false}],defaultGroupId: 'ly.img.defaultGroup' // string},libraries: {insert: {entries: (defaultEntries) => defaultEntries,floating: true, // true or falseautoClose: false // true or false},replace: {entries: (defaultEntries) => defaultEntries,floating: true, // true or falseautoClose: false // true or false}},blocks: {opacity: false, // true or falsetransform: false, // true or false'//ly.img.ubq/image': {adjustments: true, // true or falsefilters: false, // true or falseeffects: false, // true or falseblur: true, // true or falsecrop: 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();});