The canvas is where a component is drawn, and what you draw is a tree. Every element you place is a node in it, and that tree is what becomes your markup — one node, one tag, in the order the tree shows.
A component file opens on a frame holding one or more screens. A screen is a fixed width you design against; adding another gives you a second width to adjust the same design at. They are not separate designs — one tree, seen at several widths. A new screen starts slightly narrower than the last one you added.
Inside every screen is Body. It is the root your component renders into, it is created with the screen, and it cannot be deleted. Everything you draw lives under it.
The ELEMENTS panel is the tree. It is the honest view of your design, and worth keeping open, because the canvas can make two very different structures look identical.
Tree order is DOM order. An element's position among its siblings is its position in the output, which is also its stacking order. Reordering in the tree is how you change both.
Drag a row to move it. The top, middle and bottom thirds of the row you drop onto mean before, into and after — so nesting and reordering are the same gesture. A style set on an element stays with it wherever the element lands.
The tree also expands into a component instance: a placed component shows its named children slots and what is currently filling each one, so a slot is something you can see rather than something you have to remember.
Fifteen element types, from the canvas toolbar or the right-click Add menu:
Element — the general-purpose box. Exports as a div.
Text — a text block.
String — a span inside a Text, so one word can be styled differently from the rest.
Input — a real form input, with placeholder and validation.
Image — artwork, with a fit mode: Original, Stretch, Fit or Cover.
Svg — an SVG container. The only thing a Path can live inside.
Path — a bezier path with a real anchor list you edit point by point.
Circle — a Path preset — still a path, still fully editable.
Square — a four-anchor Path preset.
Component — an instance of another component file.
Document — an embedded rich document.
IFrame — an embedded frame.
Mesh Gradient — a mesh gradient as an element, not an imported picture.
Shader — an animated shader element.
Connection — a drawn link between two nodes.
Circle and Square are presets, not separate types: a circle is a path from the moment you draw it, so you can pull its anchors around without converting anything first.
Click to select on the canvas, or select the row in the tree — the two stay in sync. Shift-click adds to the selection, on either surface, and a selection that would contain both a parent and its own descendant is pruned for you.
A selected element gets eight resize handles and a rotation handle. Dragging snaps to the edges and centers of nearby elements, with guide lines showing what it caught; hold Shift to suppress snapping and place freely.
Lock and Hide look minor; they are not:
Lock takes an element out of canvas hit-testing, so you can work on top of a background without selecting it by accident.
Hide removes it from your view of the canvas.
Hide is an editor convenience, not
display: none. A hidden element still renders in preview and still exports. The property that genuinely removes an element — from a screen, and from the generated code — is skip.
↓ reorders an element among its siblings. ↑ does not mirror it — ↑ always walks up and selects the parent, in every layout. That asymmetry is deliberate, but it catches people.
Arrow keys reorder; they are not nudge. They work only on a relatively-positioned element inside a flex parent whose direction matches the axis, and an absolutely positioned element cannot be moved by keyboard at all.
These are habits from other tools, listed up front:
No group or ungroup. Nesting is the grouping model — put things inside an Element. There is no wrap-in-group command and no detach-instance.
No align or distribute across a selection. The Align controls in the style panel are CSS alignment — how a container arranges its children — not "line these three up with each other".
No bring-to-front or send-to-back. Stacking is tree order; reorder instead.
No marquee selection of elements. Dragging on empty canvas draws a rectangle but does not select what it covers. (Marquee does work for path anchors and mesh points.)
Duplicate is Copy and Paste. Elements can be copied between files, and an image or raw SVG on your clipboard pastes straight onto the canvas.
One node, one tag, in tree order. An Element is a div, a Text is a text block, a Path is a path inside its svg, and a Component instance becomes an import and a <Name.Component />. Styles attach to the node they were set on, and screens become the responsive rules around them.
The full picture is in How export works.
An agent builds into the same tree, and can push a whole nested subtree — every node with its own styles and logic — in a single step. It can search across every file by name, text or field, read what you currently have selected, and take a screenshot of the result to check itself.
Its edits land on your undo stack as ordinary steps, so anything it does you can undo.
See MCP tools.
Components — turning a tree into something reusable.
Design system — where the values you style with come from.
How export works — what all of it becomes in code.