Getting Started with StretchWire

StretchWire is the StretchSuite tool for wireframing and layout planning — mapping screens, page structure, and responsive frames before visual design or development starts. This article gets you oriented and walks you through your first wireframe end to end.

What StretchWire is for

Wireframing is the low-fidelity stage of any web or app project: you decide what a screen contains and how it's organized before anyone chooses colors, fonts, or writes code. StretchWire covers that ground inside StretchSuite, and everything you build is saved through the StretchWire service — so projects, boards, and frames persist, can be versioned, reopened in the canvas editor, and shared across your team.

Use it to plan marketing sites, landing pages, mobile apps, dashboards, emails, user flows, and sitemaps — anything where structure needs to be agreed on first.

The core model: Project → Board → Frame → Block

StretchWire organizes everything in four nested layers. Learn these four words and the whole app makes sense:

• Project — the top-level container for a body of work (a website, an app, a client engagement). It has a title, a type, a status, an optional client name, and a brand.
• Board — an individual screen, page, or flow inside a project (for example Home, Checkout, Onboarding). Each board has a viewport mode and its own layout document.
• Frame — a responsive artboard inside a board. New boards start with Desktop (1440 px), Tablet (834 px), and Mobile (390 px) frames so you can plan one screen across breakpoints at once.
• Block — a structural piece placed inside a frame (a hero, a section) with a position, a size, and editable content.

Tip: Read it top-down — one project for the whole thing, one board per screen, frames for each breakpoint, and blocks for the pieces on the page.

Tour the dashboard

Open StretchWire from the workspace app rail. You land on the launcher home:

• A hero prompt — "What will you wireframe today?"
• A row of quick-create tiles (New wireframe, Website frame, Mobile frame, App layout, Board, Project, Templates, Import, and more).
• An overview strip showing project counts, active vs. draft, and total boards.
• Recent wireframes — your most recently updated projects, newest first.
• A left navigation with Dashboard, Projects, Boards, App layouts, Templates, Import, and More.

Build your first wireframe in 6 steps

1. Open StretchWire from the workspace app rail — you land on the launcher home.
2. Create a project. Click the Project quick-create tile (or press C). Give it a title such as Acme Marketing Site, choose a type (for example Website), and confirm. Prefer a head start? Open Templates and pick a preset instead.
3. Add a board. Open the Boards view, choose New board, select your project, and name the first screen — for example Home. The board arrives preloaded with desktop, tablet, and mobile frames.
4. Open the canvas. Click Open Canvas (or Open on the board row) to launch the editor, then place and arrange blocks across your frames.
5. Save a version. As you work, save your layout. From the Boards table you can capture a named Snapshot to preserve a point-in-time version in history.
6. Come back anytime. Your project now appears at the top of Recent wireframes with a fresh timestamp — click it to jump straight back in.

Two surfaces, two access rules

StretchWire appears on two surfaces, and which one you have changes how writing works:

• Workspace (Pro) surface — scoped to your organization. Reading projects and boards is always available; creating and versioning require an active Pro entitlement. If writes are locked, you'll see a Pro access notice.
• Admin surface — internal StretchWire; write actions are step-up gated and ask for an admin confirmation before saving.

Tip: A "Read-only — pending step-up authorization" or Pro access banner is the access gate, not a bug. Lists still load; writes unlock once access is granted.

Tips

• Name boards after the screen (Home, Pricing, Checkout) so the Boards list reads like a sitemap.
• Match a board's viewport mode to what you're planning — mobile for app screens, email for email layouts, canvas for free-form flows and sitemaps.
• Save a snapshot before big changes so you always have a clean point to return to.

Where to go next

• Navigate the StretchWire dashboard — read your overview metrics and recents.
• Create and organize projects and boards — the day-to-day build flow.
• Design in the canvas editor — frames, blocks, and live collaboration.
• Start from templates and app layouts — the fastest way to begin.

FAQ

Do I need design skills to use StretchWire? No. Wireframes are intentionally low-fidelity — you're arranging structure, not styling. That's the point.

Where is my work saved? Automatically, through the StretchWire service, scoped to your organization. Nothing lives only in the browser.