Canvas and devices
Preview your screen on phones, tablets and a website window, zoom and pan, select layers on the canvas, and understand what the preview remembers.
The canvas is the live preview in the middle of the editor. Use it to check your design on different screen sizes, in light and dark mode, and in each language, and to select layers by clicking them.
The canvas draws your screen with the same renderer your site uses. Changes you make appear after a short pause of about a fifth of a second.
Choose a device
Open Preview device in the view bar above the canvas. The choice changes the preview only. It is not saved with the screen.
| Group | Device | Screen size in points |
|---|---|---|
| Phone | iPhone SE | 375 by 667 |
| Phone | iPhone 15 Pro (the default) | 393 by 852 |
| Phone | iPhone 15 Pro Max | 430 by 932 |
| Phone | Pixel 8 | 412 by 915 |
| Phone | Galaxy S23 | 360 by 780 |
| Tablet | iPad Mini | 744 by 1133 |
| Tablet | iPad Air | 820 by 1180 |
| Website | Desktop (modal) | 440 by 760, inside a 1280 by 800 browser window |
The screen is drawn at exactly these sizes, so widths, fixed sizes and text wrap behave as they would on that device. The frame around it (a notch, a camera hole, a home button, a browser window) is decoration only. You cannot select it.
Safe areas
On phones and tablets the editor reserves the space the operating system keeps for its status bar and home indicator, and draws your screen between them. The status bar and home indicator are painted in the color at the top and bottom of your root stack, so they blend in the way they do on a real device.
| Frame | Top | Bottom |
|---|---|---|
| iPhone 15 Pro and Pro Max | 54 | 34 |
| Pixel 8 and Galaxy S23 | 32 | 16 |
| iPhone SE | 20 | 0 |
| iPad Mini and iPad Air | 24 | 20 |
| Desktop (modal) | 0 | 0 |
There is no setting to change safe areas. They exist so you can check that nothing important sits under the status bar. See Screen settings.
The website preview
Desktop (modal) shows your screen as a pop-up over a placeholder page in a browser window. It is 440 points wide, which is the default width of the Web SDK modal. The preview always shows the full screen. How a screen is shown on your site (modal, full screen, banner, slide-in) and its size are settings of the placement, not of the screen. See Placement display.
Check at least one narrow phone, such as the iPhone SE or Galaxy S23, and one wide device. Components set to Fill adapt. Components with a Fixed width do not.
Light and dark preview
The sun and moon buttons in the view bar, Light mode and Dark mode, switch the preview. Dark mode also changes what the design panel edits: color fields then show and change the dark color. If a color has no dark value yet, the field says Same as light and offers Add dark color. See Colors and dark mode.
Preview language
Preview language lists the languages you added in Translations. Choose one to see that text on the canvas. Text not yet translated shows in the default language. The text boxes in the design panel also follow the preview language. See Localization.
Zoom and pan
A floating toolbar at the bottom of the canvas controls the view.
| Control | What it does |
|---|---|
| Zoom out and Zoom in | Change the zoom by 15 percentage points per click. The range is 60% to 240%. |
| The percentage button (Reset to 100%) | Returns to 100% and re-centers the device. |
| Center the device | Re-centers the device without changing the zoom. |
| Keyboard shortcuts | Lists the editor shortcuts. |
100% means the device fitted to the canvas: the editor scales the device down so it fits in the available space and never scales it above its real size. Zoom is relative to that.
You can also:
- Hold Ctrl (⌘ on a Mac) and scroll to zoom. The point under the pointer stays put.
- Scroll with the pointer over the gray area to move around. With the pointer over the device, scroll moves the screen itself.
- Hold Space and drag, drag with the middle mouse button, or drag the gray background, to pan.
- Click the gray background without dragging to select Screen.
Panning stops before the device leaves the canvas. The editor remembers your zoom and position for each device in your browser. Opening or closing the design panel re-centers the device.
Select layers on the canvas
Click anything on the screen to select it. The editor selects the most specific layer under the pointer. A click on a text inside a button selects the text. Click the padding of the button to select the button, and click an empty area to select the root stack.
| Action | Result |
|---|---|
| Click a layer | Selects it. Layers scrolls to it and opens its parents. |
| Shift-click, ⌘-click or Ctrl-click | Adds the layer to the selection, or removes it. |
| Click empty space inside the device | Selects the root stack. |
| Click the gray area around the device | Selects Screen. |
| Press Esc | Selects the parent of the selected layer, and Screen at the top level. |
The selected layer has a solid outline. Other layers in a multiple selection have a lighter outline. A thin outline follows the pointer to show what a click would select.
Measure distances
Select a layer, then hold Alt (⌥ on a Mac) and hover another layer. The canvas draws the gap between the two, labelled in screen pixels, and ignores the zoom level. If one layer sits inside the other, you see the four distances from the inner edges to the outer ones.
Drag a component in
Drag a tile from Components onto the canvas. A dashed outline and the label Add to plus the layer name show where it will land.
- Dropped on a layer that can hold it, it goes inside that layer as the last child.
- Dropped on a layer that cannot, it goes right after that layer in its parent, or in the next parent up that accepts it.
- Dropped on empty space, it goes at the end of the root stack.
- If nothing accepts it, you get a message explaining why. See Where each component can go.
The new layer is selected when you drop it.
What the preview remembers
The canvas redraws the whole screen after each edit. To stop it from snapping back to its starting state, it carries your last interactions across redraws. These are preview-only. They are never saved with the screen:
| You do this on the canvas | What happens |
|---|---|
| Tap a plan card | That plan shows as selected, until you reload the page. Saved default: the Selected by Default switch on the package. |
| Swipe a carousel | That page stays shown. Saved first page: Active Page on the carousel. |
| Pick an answer | The answer stays chosen. |
| Scroll inside the screen | The scroll position is restored after a redraw. |
One interaction does change the saved screen. Clicking a tab button on the canvas sets that tab as the first tab shown to visitors (its Active Tab), and the editor marks the screen as having unsaved changes. Clicking the toggle of a Switch on the canvas does not change anything saved.
Give each carousel a distinct name in Layers. The preview tells carousels apart by name, and an unnamed carousel is only tracked when it is the only one on the screen.
Required questions do not block the preview. The canvas keeps buttons clickable even when a question is required, so you can select and test them. On your site, buttons that continue are dimmed until required questions are answered.
The Countdown preview shows only the stack that matches the real clock. You can see the ended message only after the end time passes. See Countdown.
Redraws and errors
There is no reload button. The canvas redraws by itself about 0.2 seconds after your last change. The first draw when you open the editor is immediate.
If the screen cannot be drawn, a panel covers the canvas with This screen can't be drawn, the error message, and the advice to revert your last change or check the browser console. Undo your last edit to recover. The error clears as soon as a draw succeeds.
If the preview ever looks stale, refresh the browser. The editor saves your draft automatically, and asks before you leave if something is still unsaved.
Viewing the published version
When you switch to Published in the top bar, the canvas shows the live version. You can still select layers, change the device, the color mode and the language, but nothing can be edited. A banner reads You're looking at the published version. It's read-only., with a Switch to Draft link.