Wireframe

The Wireframe tab sketches what each planned page looks like. It sits beside Structure on purpose: the two describe the same pages at different altitudes — Structure says which pages exist and how they link, Wireframe says what each one looks like. Wireframes are the cheapest fidelity to change your mind in, so this is where a layout argument should happen — before a component exists to argue about.

Screens linked to the plan

Place a page on the Structure canvas and a linked screen appears here automatically, named after the route and renamed when the route renames. The page owns its screen: deleting the route deletes the drawing with it, and undoing the deletion brings the drawing back exactly as it was. A screen you unlink from its route on purpose stays on the board as a standalone design. Nothing on the Structure board ever rearranges a layout you have drawn.

Each page's card on the Structure canvas carries a miniature of its screen, drawn from the same document at the same ink, with an expand control that opens the screen fullscreen for reading — the picture, not an editor. "Open wireframe" from there jumps to the screen on this tab.

Screens can also be added by hand, at common device sizes — the toolbar offers desktop, tablet, and phone presets in logical CSS pixels — or resized freely. Each screen has its own background color, painted on the sheet itself so screens read as paper in both light and dark mode.

Drawing a layout

Elements come from a deliberately small, HTML-ish vocabulary — heading, text, button, input, list, progress, image, box, link, divider. The tool draws layout, not markup: each kind maps to a recognizable wireframe visual, and a box is a box until you decide otherwise.

Frames arrange their children the way CSS does. A screen starts in column flow, like a fresh HTML page — dropped elements stack — and can switch to row, grid (up to 12 columns), or free absolute positioning, each with gap, padding, alignment, and justification controls. Dragging inside a flow frame reorders instead of free-placing. Elements carry their own sizing: fixed pixels or a percentage of the parent, a grow flag that takes a share of the leftover space like flex-grow, and static, absolute, or fixed positioning — so a pinned header and a positioned badge are distinguishable in the plan.

Nesting elements

Boxes are containers. Select a box and click an element in the palette to add it inside, or drag a palette element onto the box. Boxes can contain other boxes, with their own column, row, grid, or free layout, spacing, alignment, and sizing.

To move an existing element, select it and choose its Parent container in the inspector. Choose the screen to move it out of a box. The layer tree shows the hierarchy. Duplicating a box copies its children; deleting it removes its children too. Move children elsewhere before changing a populated box to another element type.

Nested content is preserved in saved layouts, JSON downloads, screen previews, and shared component instances.

Shared components

A frame can be a component master instead of a screen: draw a card or a navbar once, then place instances of it on any screen. Instances update live — edit the master and every placement follows, which is the difference between a drawing tool and a design tool.

Masters and the Structure tab's components are one registry. Creating a master registers it in Structure's component library; renaming it on either tab renames it on both; its properties — description, props, slots, rendering, guard, test cases — are editable from either inspector. Placing an instance on a linked screen attaches the component to that screen's route, and removing the last instance detaches it, because the drawing is the census of what the page renders. Attaching a component on the Structure board places an instance on the page's screen; detaching it removes the instance. Deleting a master removes every placement with it, and undo restores all of them.

Drawn primitives that are catalogue parts count too. A button, input, or progress bar sketched on a screen is that page's Button, Input, or Progress in Structure's chip row, listed once per name in the order the sheet reads, with a ×n badge when the page draws it more than once. Detaching such a chip from Structure removes those primitives.

Navigation arrows

An element can link to another screen — a "Go to dashboard" button pointing at the Dashboard screen — and the canvas draws the arrow. When both screens are linked to routes, the arrow becomes a real navigation edge on the Structure canvas's Nav view: the wireframe saying "you can get there from here" is exactly the claim the link tool draws, so it is recorded once, in one place.

Drawing with your theme

Until the project has a theme, the wireframe draws in neutral ink — which is the right register for a wireframe. Once you set one on the Theme tab, the canvas adopts the project's palette, fonts, radius, and shadows, using the same token derivation the theme preview and the export use, so a wireframe button and a generated button read the same colors. A half-filled palette degrades gracefully, value by value, back to ink.

Saving and collaborating

The wireframe rides the workspace autosave like every other tab — screens are stored with the page that owns them, so Structure and Wireframe share one undo history — syncs live in a shared project, and locks read-only for viewers. The same designer is also available as a free standalone tool at /wireframe-designer — no account, saved in your browser — if you want to sketch before a project exists to hold it.