A canvas with the code underneath it.

Eight resize handles, an 8px snap, and drag and resize sharing one pointer session with a different anchor. Each move computes the new box from the total delta since the pointer went down — applying incremental deltas accumulates rounding error, and with snapping on the box visibly drifts away from the cursor.

Pointer events with capture, not mouse events: a drag that leaves the element or the window has to keep tracking, and capture is what guarantees the matching pointerup still arrives. Sections resize from the bottom edge only, because their width is the artboard's and their top is derived.

Geometry travels as inline style — left, top, width, height — rather than as data attributes, precisely so you can move a box by typing a number. That is the entire point of having a code mode.

The document is a flat run of <section> elements in stack order with no wrapper. Inventing a <div id="root"> to hold them would put a node in your export that exists in neither the model nor the page you ship.

Desktop 1200 is the base. Laptop 1024, Tablet 834 and Phone 390 are layers that apply at their own width and below — the cascade runs downward, exactly like a max-width query.

Layers store partials, only the fields you changed. Writing a whole box into the phone layer would pin all four numbers, so a later desktop change to width would silently stop reaching phone. Overridden fields are marked in the inspector, and Reset drops the layer so the field inherits again.

Every element carries a class list, and the stylesheet that gives those classes meaning is one panel away. A builder that exposes only inline style produces documents nobody can restyle: every box holds its own copy of every decision, and changing the button colour means finding forty buttons.

The stylesheet is per project, not per page — a class that 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.

Navbar, two heroes, feature grid, call to action, pricing and footer. Each carries its own CSS, namespaced cs-, so a preset cannot collide with a class you have already written.

A preset is copied by value. There is no live link back, so editing one you placed changes only yours, and a future release changing a preset cannot alter a page you already built. Every multi-part preset is a flex container with media queries for narrow widths, because absolute geometry cannot reflow.

The suite's component library renders live in a panel and imports into your document. Previews are iframed, because each component ships a stylesheet written for a whole page — rules like body and h1 that were never scoped to a card in a 258px rail. Rendering that inline would leak every one of them into the editor's chrome.

Imported nodes stay in flow. A component laid out by its own flex, grid and margins would be destroyed by being assigned absolute coordinates it never asked for. They are still selectable, inspectable and restyleable — they simply are not dragged to a position.

Works: save any section to the library and place it on another page. Placement goes through the same path as a paste, so a placed block cannot diverge from a pasted one.

Missing: the store is a module-level array, so blocks last as long as the tab. The tables exist and are not wired. Placing copies by value and records the link, so the product can later answer "this block is used in twelve places" and offer an explicit re-sync — which is the safe version of a live binding that would otherwise change a client's published homepage without asking.

Works: drop an image, place it at its true aspect ratio, and pick it again later from the inspector.

Missing: no storage bucket. Values are data URIs rather than object URLs — these get written into the document and serialised, and an object URL would produce markup carrying a reference that is already dead by the time anyone reads it. The honest cost is document size, which is why the panel reports the byte count of what you dropped.

Font choices are written into the document's stylesheet, where they will ship — not into a separate settings state that has to be kept in step. Every stack terminates in a generic family, because an unterminated one falls back to Times the moment a webfont fails to load. That is the commonest reason a design "goes serif" for no apparent reason.

One declarative table drives both the key handler and the shortcuts sheet, so a binding cannot exist undocumented and the sheet cannot describe a key that does nothing. Nothing fires while a field has focus — ⌘Z in the code pane has to undo your typing, not the document.