Design Preview

Canvas includes design steps that let you build visual page layouts directly on the canvas. Combined with the Design Preview panel, you can see how your layout looks at different screen sizes.

Design Steps

The Design category includes steps for building page layouts:

UI Page — The top-level container for a page layout. Start here.
Section — A horizontal section within a page. Sections stack vertically.
Container — A flexible box that holds other elements. Use containers to create columns and groups.
Text — A text block with formatting options (headings, paragraphs, lists).
Image — An image element with source URL, alt text, and sizing options.
Button — A clickable button with label, style, and link configuration.

Building a Layout

Add a UI Page step to your canvas.
Connect Section steps to the page — each section represents a horizontal band of content.
Inside sections, add Container steps to create column layouts.
Fill containers with Text, Image, and Button steps for content.

The connections between design steps define the parent-child hierarchy of the layout.

Design Preview Panel

Open the Design Preview panel to see a live rendering of your layout. As you modify design step configurations — changing text, swapping images, adjusting spacing — the preview updates in real time.

Responsive Breakpoints

The preview panel includes breakpoint controls to test your layout at different screen sizes:

Desktop — Full-width view.
Tablet — Medium-width view.
Mobile — Narrow-width view.

Switch between breakpoints to verify your layout works across devices.

Tips

Start with the page structure (Page → Sections → Containers) before adding content.
Use the preview panel continuously as you build — it is much easier to catch layout issues in real time than to fix them after the fact.
Design steps are for visual prototyping within Canvas. For production pages, export the layout and implement it in your application.