Inspector Bar

The main location for block-specific functionality is the inspector bar. Any action or setting available to the user for the currently selected block that does not appear in the canvas menu should be added here.

Show or Hide the Inspector Bar

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 when configuring the UI elements.

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default', // 'default' or 'advanced'
      /* ... */
      navigation: {
        /* ... */
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        /* ... */
      },
    },
  },
  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();
});

Show or Hide Sections

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.

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default', // 'default' or 'advanced'
      /* ... */
      navigation: {
        /* ... */
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        opacity: false, // true  or false
        transform: false, // true  or false
        '//ly.img.ubq/graphic': {
          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
        },
        /* ... */
      },
    },
  },
  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();
});

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

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default', // 'default' or 'advanced'
      /* ... */
      navigation: {
        /* ... */
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        /* ... */
        '//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();
});

Rearrange Components

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

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

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

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

Set a new Order

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

// 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

ly.img.separator 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.

ly.img.spacer 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	Description
`ly.img.separator`	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.
`ly.img.spacer`	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
`ly.img.fill.inspectorBar`	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.	`ly.img.fill`	All blocks except: Stickers and Cutouts
`ly.img.combine.inspectorBar`	Combine button: Opens a dropdown offering a choice of boolean operations (Union, Subtract, Intersect, Exclude).	`ly.img.combine`	Selections containing multiple Shapes or Cutouts
`ly.img.crop.inspectorBar`	Crop button: Enters Crop mode when pressed. See the section on Crop Mode below for components used during that mode.	`ly.img.crop`	Image, Video, Shapes with Image Fill
`ly.img.stroke.inspectorBar`	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).	`ly.img.stroke`	Image, Shape, Text, Video
`ly.img.adjustment.inspectorBar`	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).	`ly.img.adjustment`	Image, Shape, Text, Video
`ly.img.filter.inspectorBar`	Filter button: Opens the Filter panel containing a large selection of image filters, and an “Intensity” slider for the currently selected filter.	`ly.img.filter`	Image, Shape, Text, Video
`ly.img.effect.inspectorBar`	Effect button: Opens the Effect panel containing a large selection of image effects, and various sliders controlling the properties of the selected effect.	`ly.img.effect`	Image, Shape, Text, Video
`ly.img.blur.inspectorBar`	Blur button: Opens the Blur panel containing a selection of blur effects, and various sliders controlling the properties of the selected blur.	`ly.img.blur`	Image, Shape, Text, Video
`ly.img.shadow.inspectorBar`	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).	`ly.img.shadow`	All blocks expect Pages, Cutouts, and Groups
`ly.img.position.inspectorBar`	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)	`ly.img.position`	Any block except: Pages. Selections containing multiple elements.
`ly.img.options.inspectorBar`	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.	`ly.img.options`	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
`ly.img.text.typeFace.inspectorBar`	Typeface selection button: Opens a dropdown containing available typefaces.	`ly.img.text.typeface`
`ly.img.text.fontSize.inspectorBar`	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.	`ly.img.text.fontSize`
`ly.img.text.bold.inspectorBar`	Bold font toggle: Toggles the bold cut for the selected text, if available in the currently used font.	`ly.img.text.fontStyle`
`ly.img.text.italic.inspectorBar`	Italic font toggle: Toggles the italic cut for the selected text, if available in the currently used font.	`ly.img.text.fontStyle`
`ly.img.text.alignHorizontal.inspectorBar`	Text alignment button: Opens a dropdown containing options to align the selected text horizontally (to the left, to the right, or centered).	`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
`ly.img.shape.options.inspectorBar`	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.	`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
`ly.img.cutout.type.inspectorBar`	Cutout type button: Opens a dropdown to select the cut type (Cut, Perforated).	`ly.img.cutout`
`ly.img.cutout.offset.inspectorBar`	Cutout offset button: Opens a dropdown containing a labeled number input to set the cutout offset.	`ly.img.cutout`
`ly.img.cutout.smoothing.inspectorBar`	Cutout smoothing button: Opens a dropdown containing a labeled slider controlling the outline smoothing.	`ly.img.cutout`

Video, Audio

These components are relevant for editing video and audio.

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

Groups

Component ID	Description	Feature ID	Renders for
`ly.img.group.create.inspectorBar`	Group button: When pressed, creates a new group from all selected elements.	`ly.img.group`	Selections containing multiple elements
`ly.img.group.ungroup.inspectorBar`	Ungroup button: When pressed, the selected group is dissolved, and all contained elements are released.	`ly.img.group`	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
`ly.img.cropControls.inspectorBar`	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.)	`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
`ly.img.trimControls.inspectorBar`	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.	`ly.img.trim`

Default Order

The default order of the Inspector Bar is the following:

Transform Mode

[
  '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

['ly.img.cropControls.inspectorBar'];

Trim Mode

['ly.img.trimControls.inspectorBar'];