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 link runs one way and is never destructive: deleting a route leaves its drawing behind (a sketch outlives its link), and nothing on the Structure board ever rearranges a layout you have drawn.

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, 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.

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 flow back into the plan. Creating one registers its name in Structure's component library immediately, and placing an instance on a linked screen attaches the component to that screen's route — the same attachment the Structure board's own tools write, so the export and the report see it without caring where it came from. The sync is additive only: removing an instance never detaches a component from a route, because a wireframe is one reason a page renders a component, not the census of them.

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, 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.