Can I customize/build the UI in CE.SDK editor?

Yes, while we ship predefined customizable UIs, you can always opt-out and build your own user interfaces on top of the CE.SDK engine. We still handle all editing logic, and you bring your own UI component system and style.

Our CE.SDK UIs offer three levels of UI customization support: built-in themes, a theme generator, and a custom theme.

Built-in Themes: We provide two built-in themes, dark and light, which can be selected by configuring the "theme" option. The dark theme is the default. You can also use the "ui.scale" option to switch between normal and large UI scales for improved readability.
Theme Generator: In the "Settings" panel, you can use our built-in theme generator to quickly generate a custom theme. You only need to choose three base colors to create a theme that you can copy&paste into your stylesheet or a <style> Tag.
Custom Theme: For a more granular theming, you can adapt the CSS variables from the theme generator. For the best user experience, it is recommended to provide different CSS variables for both a light and a dark theme, as well as the ability to switch between normal and large UI scales.

In general, the theming API consists of custom CSS variables that you can use to tailor the editor's look and feel to your preferences. These variables should be defined in a ubq-public class. Using the data attributes data-ubq-theme and data-ubq-scale in the class selector, you can also adjust your theme based on the light/dark mode UI and the normal/large mode UI, respectively.

For instance, using this style you would see a purple canvas background, but only if the editor is configured to use a dark theme and normal scale.

.ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'] {
  --ubq-canvas: purple;
}

For more detailed information on the extent of UI customization possible, please refer to our documentation.