The editor

The page editor workspace — toolbar, Layers and Properties panels, canvas, tools, selection, and keyboard shortcuts.

A page is built in a visual editor. This page covers the workspace and the tools you use to place and arrange elements; for what you can add, see Elements and Equipment symbols.

The workspace

The editor is arranged around a central canvas with a single toolbar above it and two panels at the sides:

• Toolbar — everything you act with: the Layers panel toggle and the Automation menu on the left, then undo and redo, the tools for selecting and drawing, and the Templates and Assets menus. On the right sit the preview, fullscreen, and Properties panel toggles.
• Layers panel — a tree of every element on the page (see below).
• Properties panel — the settings for whatever is selected (see Element properties). With nothing selected, it shows the page’s own settings.
• Canvas — where the page is drawn, with an optional grid and the zoom controls in its corner.

Cancel and Save sit in the page header, above the toolbar. Saving closes the editor; Cmd/Ctrl + S saves and keeps it open.

Both side panels can be collapsed from the toolbar, which is worth doing on a laptop screen — the canvas is the part you’re actually working in.

Tools

Select and Edit share one toolbar button, as do the four shape tools — click the button to use the tool shown, or open its dropdown to switch. Pressing a tool’s key selects it directly whichever is currently shown.

Edit is the one that isn’t obvious. With Select, dragging an element’s handles resizes its bounding box. With Edit, you’re moving the element’s own points — the vertices of a polyline, the ends of a line. Esc returns you to Select.

Assets

Everything that isn’t a plain shape is added from the Assets menu, grouped into:

• Dynamic — animated symbols: an animated fan, and a spray.
• System — the equipment symbols: pumps, fans, valves, dampers, heat exchangers, boilers, meters, sensors, LEDs, state indicators, and the rest.
• Embed — an Image, and a Camera showing a camera feed.

The menu has its own search box, which is much quicker than scanning two dozen symbol icons for the one you want.

Selecting elements

• Click an element to select it, or click its entry in the Layers panel.
• Drag on empty canvas to marquee-select everything the box touches. Hold Shift while you drag to add that to the current selection instead of replacing it. The same drag-to-select works down the Layers panel.
• Shift-click empty canvas to keep the current selection rather than clearing it.

With more than one element selected, the Properties panel switches to bulk editing — set a property once and it applies to everything selected. Dragging a corner handle resizes the whole selection together, keeping the elements’ relative positions.

The Layers panel

Every element on the page appears in the Layers panel as an entry in a tree, in stacking order — top of the list is in front. From here you can:

• Select an element by clicking its layer, or reveal where it sits on the page.
• Reorder layers by dragging, to change what’s in front of what.
• Group elements so they move and scale together, and ungroup them again. Dragging a layer onto a group puts it inside; dragging it out takes it out.
• Rename a layer, toggle its visibility, and copy, cut, paste, duplicate, or delete it.
• Search the tree, which is how you find one label among hundreds on a busy plant diagram.

Grouping matters more than it looks: a symbol built from several shapes, or a piece of equipment with its labels, should be one group so it survives being moved or resized later.

Hiding a group hides everything inside it. A layer inside a hidden parent can’t be shown on its own — select the hidden parent and show that instead, which the panel tells you if you try.

Copying between pages

Copy and paste work across browser tabs. Open two pages side by side, copy a symbol or a whole group in one and paste it into the other — the element arrives complete, with its bindings intact. It’s the practical way to reuse a plant room you’ve already drawn without exporting and importing the whole page.

Shapes copied from other SVG tools paste in too.

Grid, snap, and zoom

The canvas has an optional grid with a configurable size and a snap-to-grid toggle, so elements line up neatly. Zoom goes from 1% out to 400× in, with zoom to fit to frame the whole page. Selected elements can be nudged with the arrow keys, snapping to the grid when it’s on.

Edit, preview, and fullscreen

The editor has three ways to look at a page:

• Edit — the full editor, where you place and configure elements.
• Preview (P) — the page as an operator sees it, with live values and working interactions, without leaving the editor.
• Fullscreen (F) — a clean, chrome-free display for wall boards and panels.

P has two behaviors, and the second is the useful one: tap P to toggle preview on and stay there, or hold P to peek at the live page and have it snap back to editing the moment you let go. Hold-to-peek is how you check a binding without losing your place.

Automation

The Tools → Automation menu applies automation rules across the page — Rebind all, Rebind selected, and a link to the project’s rules.

Keyboard shortcuts