The editor workspace
Every part of a project is edited in the same shape: a tree on the left, a working area in the middle, a properties panel on the right. Learn it once and it applies to pages, datasources, alarms — everything.
The config areas
The editor's left rail switches between the areas that make up a project, top to bottom. Each opens the same tree / editor / properties layout, scoped to that subject.
- Editor — The screen tree — pages, groups, dialogs and the shell regions operators navigate. How-to →
- Components — Reusable page fragments you build once and place with input properties. How-to →
- Datasources — OPC-UA connections and static data. How-to →
- Translations — The message catalog behind every
$lockey, per language. - Themes — Colors, type, spacing and radii as tokens. How-to →
- Alarms — Condition-based definitions with acknowledgement. How-to →
- Recipes — Parameter sets you download to and upload from live variables. How-to →
- Historian — Which variables are logged, at what rate, and for how long.
- Users — Accounts and groups driving who can see and interact with what.
- Admin — Project-wide settings: the runtime home, the default projects root, and installation options.
The canvas in the middle is a live preview — every edit renders exactly as an operator will see it.
Saving your work
Edits are held in the editor until you save them, so you can undo freely before anything touches disk.
| Control | Does |
|---|---|
| Save (Ctrl/Cmd + S) | Writes every pending change across all areas. The header shows ● Unsaved changes until you do. |
| Undo (Ctrl/Cmd + Z) · Redo (Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z) | Step back and forward through the edit history. |
| Save users · Discard users | Accounts and groups save separately — a security change is never mixed into a normal save. These appear in the header only while that draft is dirty. |
Closing the tab with unsaved work prompts you first. Once a save lands, the server writes the project files and broadcasts a config_changed message, so every open runtime picks the change up on its own — there is no separate publish step.
Two different "saves". A custom widget is a file you edit outside the editor; the backend compiles it the moment you save the .tsx and hot-swaps it into open pages. That is unrelated to the editor's Save button. See Building your own widgets.
Working habits worth knowing
- Copy & paste properties. With a property selected, Ctrl/Cmd C copies its value (source and all) and Ctrl/Cmd V pastes it onto a compatible field.
- Preview at any size. The viewport selector switches the canvas between Fit to screen, Laptop (1440×900), Tablet (1024×768) and Phone (390×844) so you can check responsive branches.
- Watch the warnings pill. The header runs a project-wide validation pass and surfaces findings — an incomplete
$varbinding, a reference to a datasource that no longer exists — without blocking the save. - Open the runtime beside it. The header's second button opens this project's operator runtime in a new tab, so you can keep a real screen open while you edit.