Designing in the Canvas Editor with Responsive Frames

The canvas editor is where you actually lay out a screen — placing blocks on responsive frames for desktop, tablet, and mobile. This walkthrough covers opening it, working with frames and blocks, saving, and collaborating in real time.

Open the canvas

There are several ways in:

Click Open Canvas (or the New design tile) at the top of the launcher — this opens your most recent board, or a blank canvas if you have none yet.
From the Boards view, click Open (or the board title) on any row.
From Recent wireframes on the dashboard, click a card to open its latest board.
From the command palette (Cmd/Ctrl + K), run Open Canvas or pick a recent board directly.

The editor opens in a focused canvas panel. Press Esc or click Close to return to the launcher; the launcher refreshes so your latest changes show in Recent.

Work across responsive frames

Every board holds one or more frames, each tied to a breakpoint:

Desktop — 1440 px wide
Tablet — 834 px wide
Mobile — 390 px wide

Planning across all three at once is the point of a board: you decide how a screen reflows from a wide desktop layout down to a stacked mobile view without creating three separate files.

Add and arrange blocks

Within a frame you arrange blocks — structural pieces positioned with x/y coordinates and a width/height. A starter board gives you a hero block on the desktop frame with editable eyebrow, headline, body, and call-to-action placeholders, so you can begin structuring immediately.

Select the frame you want to work in (start with Desktop).
Place blocks for the major regions of the screen — hero, content sections, forms, footers.
Position and size each block by moving and resizing it on the canvas.
Edit a block's content — replace the placeholder eyebrow, headline, body, and CTA text with real intent.
Switch to the Tablet and Mobile frames and lay out the same content for those breakpoints (typically stacked vertically).

Tip: Match the board's viewport mode to what you're planning. Use mobile or tablet for app screens, email for email layouts, and canvas for free-form flows, sitemaps, and component boards where fixed breakpoints don't apply.

Save your work

Your layout is stored as a structured document on the board. Saving writes a new version and updates the board so the canvas and lists reflect your latest state. You can also capture a named Snapshot from the Boards table to preserve a milestone — see Importing and version snapshots.

Collaborate in real time

StretchWire boards support real-time editing sessions. When you open a board in the canvas, the editor joins a secure room for that specific board, so collaborators working on the same board see a live, shared document. Autosaves from a session are captured as board versions, giving you an ongoing history without manual steps.

Access is always scoped: on the workspace surface a session is limited to your organization's boards, and a room only authorizes the exact board you opened. See Real-time collaboration on boards for the full detail.

Example

You open the Checkout board and drop a hero block, a form section, and an order-summary block on the Desktop frame. You switch to the Mobile frame and stack the same blocks vertically. A teammate opens the same board and sees your layout live. You press Esc; back on the launcher, Checkout is now at the top of Recent with a fresh timestamp.

Tips

Because Open Canvas targets your most recent board by default, keep the board you're actively working on as your latest edit — then Open Canvas always drops you back where you left off.
Lay out the Desktop frame first, then adapt down to Tablet and Mobile — it's faster than building each breakpoint from scratch.
Keep blocks aligned to obvious regions (hero, body, footer) so the wireframe communicates structure at a glance.

Troubleshooting

The canvas opened blank. If you had no boards yet, Open Canvas starts a fresh canvas. Create a project and board first, then reopen.

My teammate doesn't see my changes. Confirm you're both in the same organization and opened the same board — a room authorizes only the exact board you opened. See Real-time collaboration on boards.

Changes didn't save. On gated surfaces, saving requires Pro (workspace) or step-up (admin) authorization. Check for an access banner.