Skip to content
English
Get in Touch Customer portal Sign in
img.ly
  • There are no suggestions because the search field is empty.

Can I customize the UI in CE.SDK?

Yes, and you have two distinct paths to choose from. You can customize the built-in editor UI to match your brand, or you can opt out of it entirely and build your own interface from scratch. In both cases, CE.SDK handles all the editing logic under the hood. You are always in control of how it looks and feels.

Path 1: Customize the built-in UI

The built-in UI supports two levels of customization, and you can use them together or independently depending on how much control you need.

Themes and scale

You can set the theme at runtime using cesdk.ui.setTheme(). Three options are available: 'light', 'dark', or 'system', which automatically follows the user's operating system preference. The light theme is active by default.

cesdk.ui.setTheme('system');

For UI scale, use cesdk.ui.setScale() with one of three options:

  • 'normal' for standard desktop scaling.
  • 'large' for increased sizes, useful for accessibility and touch devices.
  • 'modern' for a refined visual design, which is the current default.

You can also pass a dynamic callback that adapts the scale based on the container width and whether the user is on a touch device:

cesdk.ui.setScale(({ containerWidth, isTouch }) => {
  if (containerWidth < 600 || isTouch) return 'large';
  return 'normal';
});

Custom CSS theming

For full brand control, CE.SDK exposes a comprehensive set of CSS custom properties. You scope your variables using the .ubq-public class with data-ubq-theme and data-ubq-scale attributes:

.ubq-public[data-ubq-theme='light'][data-ubq-scale='normal'] {
  --ubq-canvas: hsl(95, 25%, 88%);
  --ubq-interactive-accent-default: hsl(135, 45%, 48%);
}

The theming API covers colors, typography, and spacing. On the color side, you can control canvas, elevation surfaces, foreground, interactive states, borders, and notices. Typography tokens let you define font family, size, line height, letter spacing, and weight for every UI text element. Spacing tokens cover margins, border radius, and scale base units. For the best user experience, it is worth providing variants for both light and dark themes and for all three scale options.

The full theming reference is available at img.ly/docs/cesdk/js/user-interface/appearance/theming-4b0938.

Path 2: Build your own UI

If the built-in UI does not fit your product at all, you can bypass it entirely and build your own interface using whatever component system and styles you prefer. CE.SDK continues to handle all editing logic through the engine API. You can also use the custom components builder system to create bespoke UI elements that receive reactive state updates and interact with the engine directly.

The full reference for building custom UI is at img.ly/docs/cesdk/js/user-interface/ui-extensions-d194d1.

Need help deciding which path is right for you?

If you are unsure which approach fits your use case, submit a request through our support form and the team will help you think it through.