Getting around the interface
The builder has four areas: a toolbar across the top, the widget toolbox on the left, the canvas in the centre and the properties panel on the right.
Toolbar
| Control | What it does |
|---|---|
| Undo / Redo | Step back or forward through your edits |
| Preview | Switch to an interactive test of the layout (see Previewing and testing your design) |
| New | Start a new, blank project |
| Templates | Browse 20 built-in layouts and your own saved templates |
| Themes | Choose one of 35 colour themes or build a custom palette |
| My targets | Sign in and pick the site groups, devices, zones and variables your widgets will control |
| Open | Open a saved project file |
| Save / Save options (arrow) | Save the project; the arrow offers Save as... (.zen) and an Auto-save tick box |
| ? (Help) | Show onboarding tour and Documentation |
| Sun / moon | Toggle the builder between light and dark mode (does not change your design) |
Widget toolbox (left)
Widgets are grouped as Buttons, Controls, Display and Navigation. Double-click a widget to add it to the first free cell, or drag it onto the grid. The arrow at the top collapses the toolbox to give the canvas more room.
The footer shows the version number, What's new (the changelog), Privacy policy and Privacy settings.
Canvas (centre)
Page tabs run across the top. Click a tab to edit that page; click + to add a page; right-click a tab to Rename, Duplicate or Delete it.
The grid shows the page's rows and columns. Widgets snap to cells.
Zoom controls sit at the bottom right: - and +, the current percentage, 1:1 (actual size) and Fit to screen (95%).
Properties panel (right)
The panel has two tabs:
Page: page name, page type (Grid or Plan view), grid size, background, widget consistency, and the project-wide Panel settings, Menu items, Menu style, Animation settings and Project metadata.
Widget: everything about the selected widget. The < 1 of 15 > arrows at the top step through every widget on the page, which is handy for checking targets one by one.
Click an empty part of the canvas to deselect widgets and return to the Page tab. The arrow at the top left of the panel collapses it.
Right-click menus
| Right-click on | Options |
|---|---|
| A page tab | Rename, Duplicate, Delete |
| A widget | Duplicate, Delete |
Privacy settings
Privacy settings (toolbox footer) shows your browser-storage consent and what is stored locally: theme mode, theme name, custom colour palette, the onboarding flag and your consent choice. From there you can Export my data (JSON) or Clear all my data.
