UI View displays a live preview of how a module renders for end-users. Creators use it to check layout, spacing, and visual behavior during development.
To open UI View, select UI View in the canvas toolbar.
Canvas
The UI View canvas renders the module as it displays in a running application. It updates as Creators make changes in Config View.
UI View Toolbar
The UI View toolbar sits above the canvas and provides tools for inspecting, simulating, and controlling the preview.
| Control | Description |
|---|---|
 Change Stylesheet |
Switches the stylesheet applied to the preview. |
 App Context |
When set to ON, this setting renders the preview with the application's styles and any associated header and footer modules. Displays only for modules with an application . |
 Show Outlines |
When set to ON, this setting displays a dashed outline around each component and the component's Property ID. Requires Direct Select to be on. |
 Preview as Role |
Renders the preview as a specific Creator role, simulating how the module displays to end-users with that role. |
 Runtime Version |
Selects the runtime version used to render the preview. |
 Viewport Size |
Sets the preview width to simulate different device sizes: Mobile (375px), Tablet (768px), and Desktop (1024px). The preview opens at Mobile. The icon shows the viewport you're previewing at, and hovering the control names it. |
 Direct Select |
When set to ON, selecting a component highlights it with a blue overlay and opens the Properties panel. When set to OFF, Creators interact with the module as end-users would. See Select Behavior below. |
| Zoom | Displays the current zoom percentage. Select it to open a menu of preset levels: 50%, 75%, 100%, 125%, 150%, and 200%. The menu ends with Reset View, which returns the preview to 100%. |
Select Behavior
- Direct Select ON, single click: Highlights the component with a blue overlay and opens the Properties panel.
- Direct Select ON, drag: Draws a selection rectangle to select multiple components. A settings gear displays at the top right of the selection box; selecting it opens the Properties panel for the selected components.
- Direct Select OFF: Disables component selection. Creators can interact with fields and enter values as an end-user would.
Properties Panel
Selecting a component in the canvas opens the Properties panel on the right side of the canvas. See Component General Settings for the settings shared by all components.
Changelog
| Date | Change |
|---|---|
| 2026-08-05 | Replaced the Zoom out, Zoom level, Zoom in, and Reset view rows with one Zoom row. The toolbar now uses a single preset menu ending in Reset View. Control shared with the Logic and Config Views. |
| 2026-08-04 | Viewport Size now shows the active viewport's icon rather than a fixed monitor glyph, and names it on hover. The Auto (fill) option is removed — previews are always sized to a device — and the preview now opens at Mobile. Control shared with the Smart Component and theme editors. |
| 2026-08-03 | Accuracy sweep (EN-7982): UI View icon added to opening sentence; all icon columns merged inline; Zoom level row added; View in App section removed (no longer in toolbar); App Context conditional note added; Show Outlines Direct Select dependency noted; Viewport Size capitalized to match source; Select Behavior bullets restructured to match Direct Select ON/OFF states. |
| 2026-06-30 | Full toolbar rewrite — confirmed controls against qa22: Direct Select, Show Outlines, App Context, Change Stylesheet, Preview as Role, Runtime Version, Viewport size. Runtime Toolbar toggle removed. |
| 2026-05-22 | Expanded Toolbar section with icons and descriptions for all controls: Select, Outlines, App Context, Desktop/Tablet/Mobile viewports, Autofill, Hide Toolbar, and Show Runtime Toolbar. |
| 2026-05-22 | Initial publication. |