Starting from Templates and App Layouts

The fastest way to start a wireframe isn't a blank canvas — it's a template. StretchWire ships a categorized template gallery of common structures, and an app-layout flow for products with many screens. This guide covers both.

Why start from a template

A template gives you a project pre-configured with the right type and viewport mode, plus a sensible starting structure — so you're editing a real layout in seconds instead of deciding defaults from scratch.

Open the template gallery

1. From the dashboard, click the Templates tile, or choose Templates in the left navigation.
2. Browse the gallery, organized into categories.
3. Click a template to see its description; select it to start a new project from it.

Template categories

The gallery is grouped so you can find the right starting point quickly:

• Websites — Website (responsive multi-page structure), Landing page (hero, proof, CTA), Portfolio (work showcase with case-study paths), Blog (article index, post page, content modules).
• Apps — Mobile app (phone-first screens and navigation), Tablet app (split panels and detail views), Dashboard (metrics, tables, filters, drilldowns), Admin panel (operational screens for records and settings).
• Marketing — Email (single email layout), Newsletter (recurring editorial email), Marketing site (brand narrative and conversion paths), Pricing (plans, comparison table, FAQ, CTA).
• Docs & flows — User flow (step-by-step journey and decision points), Sitemap (page hierarchy and navigation map), Wireframe kit (reusable starter sections), Component board (component inventory for shared UI patterns).
• Overlays — Popup / overlay and Modal (focused dialog layouts with states and edge cases).

Tip: Each template carries the matching project type and viewport mode — for example, Mobile app opens as a mobile viewport, Email opens as email, and User flow opens as a free-form canvas.

Start a project from a template

1. Pick a template from the gallery.
2. Confirm — StretchWire creates a new project (and starter board) pre-set with the template's type and viewport.
3. Open the canvas and customize the structure to your needs.

You can also launch a template straight from the command palette (Cmd/Ctrl + K) — start typing the template name ("Landing", "Dashboard", "Email") and select it.

App-layout projects

Products like a mobile app, dashboard, or admin panel have many screens that belong together. The App layout flow (the App layouts navigation tab and the App layout quick-create tile) is built for exactly this: it keeps a product's screens grouped as a distinct project so the app's structure lives in one organized place instead of scattered boards.

1. Click the App layout tile, or open App layouts and start a new one.
2. Give the product a title and create it.
3. Add a board per screen (Home, Search, Profile, Settings), each with the appropriate viewport mode.

Customize after starting

A template is a starting point, not a straitjacket. Once created, open the canvas and rearrange, add, or remove blocks; add more boards for additional screens; and adjust the project's type, status, and client to match your engagement.

Example

You're pitching a SaaS dashboard. From the gallery you pick the Dashboard template — it opens as a dashboard/responsive project with a metrics-and-tables structure. You add boards for Overview, Reports, and Settings, then use the App layouts view to keep all three grouped as one product. Ten minutes in, you have a navigable structure to review with stakeholders.

Tips

• Match the template to your artifact, not just the industry — a User flow or Sitemap template is the right call when you're mapping structure rather than a single page.
• Use App layouts for anything with more than a handful of related screens so the product stays organized.
• Launch templates from the command palette to skip the gallery entirely once you know the name.

FAQ

Do templates lock me into a structure? No — everything is editable after you start. Templates just save you the blank-canvas setup.

What's the difference between a template and an app layout? A template seeds one project's starting structure; an app layout is a way to keep a whole product's many screens grouped together.

Can I turn my own wireframe into a reusable starter? Use the Wireframe kit and Component board templates as reusable pattern libraries, and duplicate boards to reuse structure across projects.