Component Reference

Component IDs in CE.SDK follow the pattern ly.img.[feature].[area] (for example, ly.img.undoRedo.navigationBar). Custom components you create can use any ID pattern.

For information on how to use these IDs with the API methods, see the Component Order API Reference. For task-focused tutorials, see the Quick Start guides.

Layout Components#

These utility components are available across multiple UI areas:

Navigation Bar Components#

Components available in 'ly.img.navigation.bar':

Navigation Controls#

Action Buttons#

Action buttons support inline configuration with onClick handlers:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.navigation.bar', position: 'end' },
  {
    id: 'ly.img.action.navigationBar',
    key: 'my-export',
    label: 'Export',
    icon: '@imgly/Download',
    onClick: async () => {
      // Export logic here
    }
  }
);

Dock Components#

Components available in 'ly.img.dock':

The dock is primarily configured through the ly.img.assetLibrary.dock component. Use the entries array to specify which asset library panels appear:

cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
  'ly.img.spacer',
  {
    id: 'ly.img.assetLibrary.dock',
    entries: ['ly.img.image', 'ly.img.text', 'ly.img.shape']
  }
]);

Inspector Bar Components#

Components available in 'ly.img.inspector.bar'. The inspector bar supports edit mode context via the when option.

Block Operations#

Appearance & Effects#

Text Controls#

Media Controls#

Shape & Cutout Controls#

View Controls#

Canvas Menu Components#

Components available in 'ly.img.canvas.menu'. The canvas menu appears on right-click (desktop) or long-press (mobile) and supports edit mode context.

Block Actions#

Edit Actions#

Layer Ordering#

Page Actions#

Group Actions#

Text Actions#

Other#

Canvas Bar Components#

Components available in 'ly.img.canvas.bar'. This area requires the at option to specify position ('top' or 'bottom').

The canvas bar is the most minimal area, typically showing contextual controls based on the current edit mode.

// Get top canvas bar order
const topBar = cesdk.ui.getComponentOrder({
  in: 'ly.img.canvas.bar',
  at: 'top'
});

// Get bottom canvas bar order
const bottomBar = cesdk.ui.getComponentOrder({
  in: 'ly.img.canvas.bar',
  at: 'bottom'
});

Component Configuration Options#

When components are passed as objects instead of string IDs, they support inline configuration.

Common Properties#

All components support these properties:

Action Button Properties#

Components with ID ly.img.action.* support additional properties:

Asset Library Dock Properties#

The ly.img.assetLibrary.dock component supports:

Troubleshooting#

Component not appearing#

1. Verify the component ID is spelled correctly with the right area suffix
2. Check if the component is included in the current area’s order using getComponentOrder()
3. Confirm the component isn’t hidden by a hidden: true property

Multiple components with same ID#

Use the key property to distinguish between instances:

cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
  { id: 'ly.img.action.navigationBar', key: 'save', label: 'Save' },
  { id: 'ly.img.action.navigationBar', key: 'export', label: 'Export' }
]);

Component disabled unexpectedly#

Check if a feature flag is disabling it:

// Check if feature is enabled
const enabled = cesdk.feature.isEnabled('ly.img.navigation.bar');

// Re-enable if needed
cesdk.feature.enable('ly.img.navigation.bar');

Next Steps#

• Component Order API — How to manipulate components using these IDs
• Show/Hide Components — Hide specific components from UI areas
• Register New Component — Create custom components with the builder API