CESDK/CE.SDK/Web Editor/Customization/API Reference

Adjusting the Content of the Inspector Bar

Learn how to adjust the content of the inspector bar in the editor

There are 2 APIs for getting and setting the order of components in the Inspector Bar.

The content of the Inspector Bar changes based on the current edit mode ('Transform' (the default), 'Text', 'Crop', 'Trim', or a custom value), so both APIs accept an orderContext argument to specify the mode.

For example usage of these APIs, see also Moving Existing Buttons in the Guides section.

Get the Current Order#

JavaScript


cesdk.ui.getInspectorBarOrder(
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order for the 'Transform' edit mode is returned, e.g.

JavaScript


cesdk.ui.getInspectorBarOrder();
// => [
// {id: 'ly.img.text.typeFace.inspectorBar'},
// {id: 'ly.img.text.fontSize.inspectorBar'},
// ...
// ]

Set a new Order#

JavaScript


cesdk.ui.setInspectorBarOrder(
  inspectorBarOrder: (InspectorBarComponentId | OrderComponent)[],
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order is set for the default edit mode ('Transform'), e.g.:

JavaScript


// Sets the order for transform mode by default
cesdk.ui.setInspectorBarOrder([ 'my.component.for.transform.mode']);

Inspector Bar Components#

The following lists the default Inspector Bar components available within CE.SDK.

Take special note of the "Feature ID" column. Most components can be hidden/disabled by disabling the corresponding feature using the Feature API.

Also note that many components are only rendered for the block types listed in the "Renders for" column, because their associated controls (e.g. font size) are only meaningful for specific kinds of blocks (e.g. text).

Layout Helpers#

Component ID Description

Component ID	Description
Component ID `ly.img.separator`	Description Adds a vertical separator (`<hr>` element) in the Inspector Bar. Separators follow some special layouting rules: - If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered. - Separators that end up being the first or last element in the Inspector Bar will not be rendered. - Separators directly adjacent to the left side of a spacer (see below) will not be rendered.
Component ID `ly.img.spacer`	Description Adds horizontal spacing in the Inspector Bar. Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Inspector Bar.

Component ID

ly.img.separator

Description

Adds a vertical separator (<hr> element) in the Inspector Bar.
Separators follow some special layouting rules:
- If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered.
- Separators that end up being the first or last element in the Inspector Bar will not be rendered.
- Separators directly adjacent to the left side of a spacer (see below) will not be rendered.

Component ID

ly.img.spacer

Description

Adds horizontal spacing in the Inspector Bar.
Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Inspector Bar.

Common Controls#

These components are useful for editing various different block types.

Component ID	Description	Feature ID	Renders for
Component ID `ly.img.fill.inspectorBar`	Description Fill controls button: Opens the Fill panel, containing controls for selecting the fill type (Color, Image, Video, Audio) , and for editing the fill. For Color, this contains the Color Picker and the Color Library. For Images, this contains a Preview card, a "Replace" button to replace the media, and a "Crop" button for opening the Crop panel. For Video, this contains a Preview card, a "Replace" button to replace the media, a "Crop" button for opening the Crop panel, a "Trim" button for opening the Trim panel, and a Volume slider.	Feature ID `ly.img.fill`	Renders for All blocks except: Stickers and Cutouts
Component ID `ly.img.combine.inspectorBar`	Description Combine button: Opens a dropdown offering a choice of boolean operations (Union, Subtract, Intersect, Exclude).	Feature ID `ly.img.combine`	Renders for Selections containing multiple Shapes or Cutouts
Component ID `ly.img.crop.inspectorBar`	Description Crop button: Enters Crop mode when pressed. See the section on Crop Mode for components used during that mode.	Feature ID `ly.img.crop`	Renders for Image, Video, Shapes with Image Fill
Component ID `ly.img.stroke.inspectorBar`	Description Stroke controls button: Renders a labeled color swatch button when stroke is inactive, which opens the Color Panel when pressed. When stroke is active, renders 2 additional controls: a "Width" button opening a dropdown containing a number input to control stroke width, and a "Style" button opening a dropdown containing a selection of stroke styles (Solid, Dashed, Dashed Round, Long Dashes, Long Dashed Round, Dotted).	Feature ID `ly.img.stroke`	Renders for Image, Shape, Text, Video
Component ID `ly.img.adjustment.inspectorBar`	Description Adjustment button: Opens the Adjustment panel containing sliders to influence numerous image properties (Brightness, Saturation, Contrast, Gamma, Clarity, Exposure, Shadows, Highlights, Blacks, Whites, Temperature, Sharpness).	Feature ID `ly.img.adjustment`	Renders for Image, Shape, Text, Video
Component ID `ly.img.filter.inspectorBar`	Description Filter button: Opens the Filter panel containing a large selection of image filters, and an "Intensity" slider for the currently selected filter.	Feature ID `ly.img.filter`	Renders for Image, Shape, Text, Video
Component ID `ly.img.effect.inspectorBar`	Description Effect button: Opens the Effect panel containing a large selection of image effects, and various sliders controlling the properties of the selected effect.	Feature ID `ly.img.effect`	Renders for Image, Shape, Text, Video
Component ID `ly.img.blur.inspectorBar`	Description Blur button: Opens the Blur panel containing a selection of blur effects, and various sliders controlling the properties of the selected blur.	Feature ID `ly.img.blur`	Renders for Image, Shape, Text, Video
Component ID `ly.img.shadow.inspectorBar`	Description Shadow controls button: Opens the Shadow panel containing a "Color" Subinspector controlling the shadow color, an "Angle" number input controlling the shadow offset direction, a "Distance" number input controlling the shadow offset, and a "Blur" number input controlling the shadows blur intensity).	Feature ID `ly.img.shadow`	Renders for All blocks expect Pages, Cutouts, and Groups
Component ID `ly.img.position.inspectorBar`	Description Position button: Opens a dropdown containing a selection of position commands (Bring to Front, Bring Forward, Send Backward, Send to Back, Fixed to Front, Fixed to Back, Align Left/Centered/Right/Top/Middle/Bottom)	Feature ID `ly.img.position`	Renders for Any block except: Pages. Selections containing multiple elements.
Component ID `ly.img.options.inspectorBar`	Description More options button: Opens a dropdown containing an Opacity slider (if opacity is supported by the selected block), a Blend mode button opening a dropdown containing a selection of different blend modes (if blending is supported by the selected block), a "Copy Element" button to copy the element, a "Paste Element" button to insert a previously copied element, and a "Show Inspector" button that opens the Advanced UI Inspector when pressed.	Feature ID `ly.img.options`	Renders for Every block

Text#

These components are relevant for editing text blocks, and will only render when a text block is selected.

Component ID	Description	Feature ID
Component ID `ly.img.text.typeFace.inspectorBar`	Description Typeface selection button: Opens a dropdown containing available typefaces.	Feature ID `ly.img.text.typeface`
Component ID `ly.img.text.fontSize.inspectorBar`	Description Font size controls: A labeled number input to set the font size, with a button to open a dropdown containing many preset sizes and the "Auto-Size" option.	Feature ID `ly.img.text.fontSize`
Component ID `ly.img.text.bold.inspectorBar`	Description Bold font toggle: Toggles the bold cut for the selected text, if available in the currently used font.	Feature ID `ly.img.text.fontStyle`
Component ID `ly.img.text.italic.inspectorBar`	Description Italic font toggle: Toggles the italic cut for the selected text, if available in the currently used font.	Feature ID `ly.img.text.fontStyle`
Component ID `ly.img.text.alignHorizontal.inspectorBar`	Description Text alignment button: Opens a dropdown containing options to align the selected text horizontally (to the left, to the right, or centered).	Feature ID `ly.img.text.alignment`

Shape#

These components are relevant for editing shape blocks, and will only render when a shape block is selected.

Component ID	Description	Feature ID
Component ID `ly.img.shape.options.inspectorBar`	Description Shape options button: Opens a dropdown containing sliders to set number of sides, number of points, and inner diameter (depending on the specific shape selected). Only renders when a shape block is selected.	Feature ID `ly.img.shape.options`

Cutout#

These components are relevant for editing cutouts, and will only render when a cutout block is selected.

Component ID	Description	Feature ID
Component ID `ly.img.cutout.type.inspectorBar`	Description Cutout type button: Opens a dropdown to select the cut type (Cut, Perforated).	Feature ID `ly.img.cutout`
Component ID `ly.img.cutout.offset.inspectorBar`	Description Cutout offset button: Opens a dropdown containing a labeled number input to set the cutout offset.	Feature ID `ly.img.cutout`
Component ID `ly.img.cutout.smoothing.inspectorBar`	Description Cutout smoothing button: Opens a dropdown containing a labeled slider controlling the outline smoothing.	Feature ID `ly.img.cutout`

Video, Audio#

These components are relevant for editing video and audio.

Component ID	Description	Feature ID	Renders for
Component ID `ly.img.trim.inspectorBar`	Description Trim button: Enters Trim mode when pressed. See the section on Trim Mode for components used during that mode.	Feature ID `ly.img.trim`	Renders for Video, Audio
Component ID `ly.img.volume.inspectorBar`	Description Volume control for audio and video.	Feature ID `ly.img.volume`	Renders for Video, Audio
Component ID `ly.img.audio.replace.inspectorBar`	Description Replace button: Opens the "Replace Audio" panel when pressed.	Feature ID `ly.img.replace`	Renders for Audio

Groups#

Component ID	Description	Feature ID	Renders for
Component ID `ly.img.group.create.inspectorBar`	Description Group button: When pressed, creates a new group from all selected elements.	Feature ID `ly.img.group`	Renders for Selections containing multiple elements
Component ID `ly.img.group.ungroup.inspectorBar`	Description Ungroup button: When pressed, the selected group is dissolved, and all contained elements are released.	Feature ID `ly.img.group`	Renders for Groups

Crop#

This component only appears in Crop mode by default. Registering it for other edit modes is not meaningful.

Component ID	Description	Feature ID
Component ID `ly.img.cropControls.inspectorBar`	Description Controls used when cropping images: These include a "Done" button to finish cropping, a "Straighten" slider for rotating the image, a "Turn" button to rotate the image by 90 degrees, "Mirror" buttons to flip the image vertically/horizontally, and a "Reset" button to reset the crop.)	Feature ID `ly.img.crop`

Trim#

This component only appears in Trim mode by default. Registering it for other edit modes is not meaningful.

Component ID	Description	Feature ID
Component ID `ly.img.trimControls.inspectorBar`	Description Controls used when trimming video and audio: These include a "Play" button to preview the trimmed video, a "Duration" number input to set the trim duration, a video/audio strip visualizing the trimmed section in relation to the full media, and a "Done" button to finish trimming.	Feature ID `ly.img.trim`

Default Order#

The default order of the Inspector Bar is the following:

Transform Mode#

JavaScript


[
  'ly.img.text.typeFace.inspectorBar',
  'ly.img.text.fontSize.inspectorBar',
  'ly.img.shape.options.inspectorBar',
  'ly.img.cutout.type.inspectorBar',
  'ly.img.cutout.offset.inspectorBar',
  'ly.img.cutout.smoothing.inspectorBar',
  'ly.img.group.create.inspectorBar',
  'ly.img.group.ungroup.inspectorBar',
  'ly.img.audio.replace.inspectorBar',

  'ly.img.separator',

  'ly.img.text.bold.inspectorBar',
  'ly.img.text.italic.inspectorBar',
  'ly.img.text.alignHorizontal.inspectorBar',
  'ly.img.combine.inspectorBar',

  'ly.img.separator',

  'ly.img.fill.inspectorBar',
  'ly.img.trim.inspectorBar',
  'ly.img.volume.inspectorBar',
  'ly.img.crop.inspectorBar',

  'ly.img.separator',

  'ly.img.stroke.inspectorBar',

  'ly.img.separator',

  'ly.img.adjustment.inspectorBar',
  'ly.img.filter.inspectorBar',
  'ly.img.effect.inspectorBar',
  'ly.img.blur.inspectorBar',

  'ly.img.separator',

  'ly.img.shadow.inspectorBar',

  'ly.img.spacer',
  'ly.img.separator',

  'ly.img.position.inspectorBar',

  'ly.img.separator',

  'ly.img.options.inspectorBar'
]

Crop Mode#

JavaScript


[
  'ly.img.cropControls.inspectorBar'
]

Trim Mode#

JavaScript


[
  'ly.img.trimControls.inspectorBar'
]