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, the Dialogs folder and the shell regions operators navigate. How-to →
- Components — Reusable page fragments you build once and place with input properties, and with slots for widgets the page supplies. How-to →
- Datasources — OPC-UA connections and static data. How-to →
- Translations — The message catalog behind every
$lockey, per language. How-to → - 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. How-to →
- Users — Accounts and groups driving who can see and interact with what. How-to →
- Admin — Live diagnostics for this project: fast subscriptions, custom-widget build status, connected runtimes. Also the project's allowed HTTP origins. How-to →
Installation-wide settings — the runtime home, HTTPS, the device-admin password, logs — are not here; they live on the Manager's Settings page. See Diagnostics.
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 — there is no separate publish step. An open live view shows the change after a browser reload.
Other writers. The editor also follows changes made elsewhere: in a second editor tab, by an AI assistant over MCP, or by another system over API v1. With nothing unsaved, the editor shows the change straight away, without a reload, on the page you have open. With unsaved changes it shows a banner instead — "Config was updated by another writer." — and leaves your work as it is: Reload page drops your changes and shows theirs, Keep unsaved changes closes the banner. A change you saved yourself, in this tab, never raises it.
Each save also refreshes the picture of this project shown on the Manager's project list: the main page is rendered off-screen and stored as a thumbnail. It runs after the save, never blocks it, and never fires your project's onHmiLoaded event — so a save cannot write to a datasource as a side effect.
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 the editor reloads to show it — or, when you have unsaved changes, shows a banner ("A custom widget was recompiled. Reload to use it.") while the canvas already shows the new widget. An open live view shows it after a browser reload. That is unrelated to the editor's Save button. See Building your own widgets.
Keyboard shortcuts
| Keys | Does |
|---|---|
| Ctrl/Cmd + S | Save every pending change. |
| Ctrl/Cmd + Z | Undo. |
| Ctrl/Cmd + Shift + Z · Ctrl/Cmd + Y | Redo. |
| Ctrl/Cmd + C · Ctrl/Cmd + V | Copy / paste — the property when one is selected in the panel, otherwise the selected tree node (widget, page, page group, component) with everything under it. |
| Ctrl/Cmd + X | Cut the selected tree node: the next paste moves it instead of copying it, keeping its id. |
| Enter · Escape | Commit / cancel an inline rename, a table cell, or a modal. |
Working habits worth knowing
- Copy & paste crosses the tree. A copied widget pastes into another page; a copied property value carries its source and all its nested bindings with it, onto any compatible field.
- Copy duplicates, cut moves. A paste after Copy is a new node with fresh ids; a paste after Cut is the same node in a new place, so anything bound to its id still resolves. Dragging a row does the same move — drop on the middle of a row to go inside it, on its top or bottom edge to sit beside it.
- 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. Scaling zooms the canvas beside it, for reading a dense screen without changing the size it is laid out at.
- Try the screen without leaving the editor. The preview toolbar's Mode control has two buttons: the pencil is Config mode, where a click selects the widget you clicked, and the play button is Test mode, where clicks run actions and navigation works — press your own buttons, open your own overlays, watch a write land. Writes, recipe loads and alarm acknowledgements made here are live, and recorded as
engineer. - 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. Click a finding to jump to it; see Diagnostics. - 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. Reload that tab after a save to see the change.
- Send the project from here. The header's Transfer button pushes the open project to another NEXT HMI device, without a detour through the Manager. What travels is the project on disk, so the button stays disabled — "Save your changes before transferring" — until your edits are saved. It appears only where a Manager is serving the editor. See Push & pull between devices.