How Comlumen works.

Two modes, one document

The visual canvas and the code editor are two views of the same structure. Neither is a serialisation of the other, and neither owns the truth — dragging a box and typing left: 40px are the same operation expressed twice.

This matters because the usual arrangement makes the visual tree authoritative and generates code out of it. That produces a panel you can read and cannot meaningfully write: hand-edit it and the next drag regenerates over the top.

Committing code edits

Markup is parsed on Apply (or ⌘↵), not on every keystroke — half-typed markup is invalid markup, and parsing it live would churn the tree through garbage states and destroy the selection on every character. The stylesheet is different: it applies live, because an invalid declaration is simply ignored by the browser.

Anything the parser cannot represent is reported rather than dropped in silence. If a paste loses an attribute, the panel says so at the moment it happens.

Sections

A page is a spine of sections. Vertical is flow: sections stack in order, each owns a height, and inserting one pushes everything below it down. Horizontal and depth are free: a section's children are positioned absolutely against it, to the pixel.

A section's vertical position is derived, never stored — it is the sum of the heights above it. That is why sections resize from the bottom edge only, and why reordering one cannot leave a gap.

• Drag the grip in the Structure panel to reorder.
• Double-click a name to rename it.
• Lock to make it ignore pointer input; hide to remove it from the canvas and the export.
• Collapse only affects the panel — it is not the same as hide.

Breakpoints

The cascade runs downward, exactly like max-width media queries. Desktop is the base; Laptop, Tablet and Phone are layers that apply at their own width and below.

So an edit made at Phone writes into the phone layer and Desktop never sees it. An edit made at Desktop moves the base, and therefore reaches every width that has not already overridden that specific field.

Layers store only the fields you changed. A field the current breakpoint pins is marked in the inspector, so you can see whether an edit is local or global before you make it — and Reset drops the layer so the field inherits again.

Classes and the stylesheet

Every element carries a class list, and the stylesheet that gives those classes meaning is one panel away in Theme (or the lower pane in Code mode). The stylesheet is per project, not per page — a class that only exists on one page is an inline style with extra steps.

The Theme panel lists any class used in the document that has no rule yet, which is the fastest way to find the thing you named and never styled.

Presets

The Add panel carries ready-made sections — navbar, two heroes, feature grid, call to action, pricing and footer — each with its own namespaced CSS, appended to your stylesheet once on first use.

A preset is copied by value. There is no live link back to it, so editing one you have placed changes only yours, and a future release changing a preset cannot alter a page you already built.

Keyboard

• ⌘Z / ⇧⌘Z — undo, redo
• ⌘D — duplicate the selection
• ⌫ — delete the selection
• Esc — deselect
• ⌘↵ — apply markup, in Code mode

Shortcuts never fire while a field has focus, so ⌘Z in the code pane undoes your typing rather than the document.

Pages

A site holds pages; each page holds its own sections and nodes. The stylesheet is shared across all of them.

Switching page is recorded in undo history. That looks odd until you undo after a switch — without it, the undo would apply to a page you are no longer looking at.

Not yet built

These are real gaps, listed so nothing above has to be hedged. The roadmap carries the full list, feature by feature, including four known problems you are likely to hit.

Further reading

This page covers how the designer behaves. These cover why it is shaped that way, and what is coming.