Web preview
See a page as a real website beside the canvas, and click through it as you design.
The web preview shows the page you are designing as a website: real elements laid out by the browser, with your interactions working. It sits beside the canvas and follows every edit.
Opening it
Description
The website template on the canvas. From the ⋯ menu, Web preview docks the page beside the canvas as a real website. The screen picker goes to another of the site's pages, and the width picker narrows the window to a phone's, where the page reflows.
- Open ⋯ and choose Web preview. The preview docks to the right of the canvas. In a Web file, the Play button opens it too (presenting on the canvas is under the arrow beside it).
- Pick a screen from the preview's bar to go to it.
- Pick a width to try the page in a narrower window.
Show / hide web preview in the command palette does the same, and closes it again.
Each top-level frame on the page is a screen. The screen picker on the preview's bar lists them with their addresses:
the flow's starting frame (or the first frame) is /, and the others are named for their layer, such as /pricing.
What it shows
The preview is a page, not a picture of the canvas:
- Auto layout is flexbox. A child set to Fill grows with the window, one set to Hug takes its content's size, and a fixed width gives way when the window is narrower. Wrapping stacks wrap, and a grid is a CSS grid.
- Constraints hold a layer to the edges you chose as its parent resizes: left, right, both, its centre, or scaled.
- Text is real text. It wraps and grows by the lines it takes, and styled runs and links come through as they are.
- Variables become CSS custom properties, and each mode is a class on the page, so a theme switch is instant.
- Scrolling frames scroll.
- A layer CSS has no word for (a vector, a mask, a halftone) is drawn by the canvas and placed as a picture. When such a layer moves (it is animated, plays a video, or has a shader that changes over time) the preview draws it live on the GPU instead, in place, over the same picture.
- A box filled with a shader, a video or a pattern keeps everything inside it as real elements; the fill is drawn behind them, live when it moves. An animated shader behind a headline and a button is still a headline and a button.
Use the width picker to try the page at each of the file's breakpoints, or let it fit the pane. What a layer sets differently at a breakpoint applies as the window narrows, as it will for a visitor.
Clicking through it
Interactions run in the preview as they do when you present:
- Navigate and Back, with the transition you set (3D ones included), and Scroll to.
- Open overlay, Swap with and Close overlay, including closing on a click outside.
- Set variable, Set mode and Conditional. Text, visibility and sizes bound to a variable follow it.
- Change to on interactive components, including While hovering and While pressing.
- Mouse enter, Mouse leave, Key down and After delay triggers.
- Open link and layers that are links. A link to another screen goes there; one that would leave the site stays put, and the preview says where a visitor would go.
When you edit the design, the preview redraws where you are: the screen you were on, the way back, any open overlay and the variables you changed all stay.
What it doesn't do yet
Timeline controls, drags, scroll-driven scrubs and Orbit in 3D don't run in the preview. Present the prototype to play those. Live GPU layers need WebGPU; in a browser without it they stay as their pictures.
The preview runs in a sealed frame inside the editor. It can't reach your account or your other files, and nothing is uploaded to show it.