Layouts are the individual screens and views that make up your application. Each layout becomes a page users navigate to, or a reusable section like a modal body. Understanding when to create new layouts versus using reusable components helps you build maintainable projects.

What Makes a Layout

Layouts represent complete screens or major sections of your application. Create a layout when users will navigate to it as a distinct destination, or when a section needs independent management from its parent screen.

• Navigable screens: Product listing pages, product detail pages, checkout screens, user profiles. Each has a unique URL or route that users access directly.
• Modal content: Confirmation dialogs, form overlays, or detail views that appear over existing screens. While visually distinct from full-screen navigation, modals often work as independent layouts that can be reused across multiple screens.

Layouts contain components arranged on the canvas. The Structure Panel shows each layout's component tree, revealing how elements nest within containers and connect to data sources.

Creating and Managing Layouts

Access the Structure Panel from the left sidebar. Ensure the desired storyboard is active (indicated by a checkmark), then click the "+" button next to the Layouts header. New layouts appear in the active storyboard.

⏰⏰⏰ Shortcut ⏰⏰⏰

Alt + N (Windows) or Option + N (Mac) creates a new layout in the active storyboard.

💡💡💡 Tip 💡💡💡

When you create a new layout, it may appear directly on top of an existing layout. Hold Alt (Windows) or Option (Mac) and drag to reposition it on the canvas.

Rename layouts by double-clicking the name in the Structure Panel. Give layouts descriptive names that indicate their purpose—"Product Detail Page" or "Checkout Confirmation" rather than "Layout 1" or "New Layout."

Delete layouts through the context menu (three dots) or by selecting the layout and pressing Control + Backspace (Windows) or Command + Delete (Mac). Deleting a layout removes all components within it.

Working with Layouts on the Canvas

Layouts appear as rectangles on the canvas when viewing a storyboard. Click any layout to select it—the Structure Panel highlights the selected layout and shows its component tree.

Move layouts on the canvas by holding Alt (Windows) or Option (Mac) while dragging. This changes only the canvas position for visual organization, not the layout's behavior or navigation.

Resize layouts by clicking to select, then dragging corner handles. Resizing affects only canvas display, not how the layout renders in your application. Use Focus Mode to configure actual responsive behavior across breakpoints.

Focus Mode

Enter Focus Mode to work on a single layout without distraction and configure responsive behavior across device sizes. Click the Focus Mode icon on any layout, or hold Alt/Option and double-click the layout.

Focus Mode displays breakpoint controls in the top bar. Switch between Mobile, Tablet, Laptop, and Desktop views to see how your layout adapts. Configure responsive overrides for sizing, spacing, and layout properties at each breakpoint.

Exit Focus Mode by clicking the X in the top bar or on the layout's corner. See Responsive Design documentation for detailed breakpoint configuration.

Reordering Layouts

Reorder layouts within the Structure Panel by dragging them up or down in the Layouts list. This changes only the visual order in the Structure Panel and on the canvas—it does not affect navigation or how users move through your application.

Navigation order is controlled by Routes (configured in Project Settings) and Flows, not by layout order in the Structure Panel.

Layouts vs. Reusable Components

Layouts and Reusable Components both organize groups of components, but serve different purposes:

Use Layouts when:

• Users navigate to the screen as a distinct destination
• Content needs independent route configuration
• The screen represents a complete user task or view
• You're building modal content that appears as an overlay

Use Reusable Components when:

• The pattern appears multiple times within layouts (product cards, navigation bars)
• Updates to one instance should affect all instances
• The element is part of a larger screen rather than a complete screen itself

See Reusable Components documentation for creating and managing component libraries.