The Preview Window
The preview in the middle of the interface builder shows your interface exactly as it will render, updating in real time as you edit. The only difference is the builder's own highlighting, such as outlines when you hover over a block. You can switch device frames, zoom and pan, force a light or dark colour scheme, and choose which application, user and date the preview runs as.
Preview context
For an accurate preview, run it in the context your visitors will see. Open the Preview Context Options button at the top of the builder. It shows the name of whoever or whatever the preview is running as.
- Application: the preview makes every request with that application's access token, so content loads with the application's permissions. If an image or list shows in the dashboard but not in the preview, the application probably can't see it.
- User: the preview runs as that signed-in person, so you can check members-only areas, "logged in" visibility rules and what that person's roles and access passes allow. This uses impersonation, so you need permission to impersonate logins; see Impersonating Logins.
- Date: preview the interface as if it were a particular date and time. This is useful for blocks or routes that only show between certain times or dates.
If you don't choose an application or user, the preview runs as you, with your permissions. Keep in mind that when you publish, the application may not have the same access as you. See Emulation, Context and Permissions.
Preview options
The buttons along the top of the builder change how the preview looks:
| Option | What it does |
|---|---|
| Mobile preview | A 375 × 812 px phone-sized frame. |
| Tablet preview | A 768 × 1024 px tablet-sized frame. |
| Desktop preview | A 1440 × 900 px desktop frame. This is the default. |
| Fluid preview | A frame that fills whatever space is available on your screen, so you can see how the layout responds as the space changes. |
| Preview in Window | Moves the preview into its own browser window, so you can size and place it as you like. This is handy with multiple monitors. Click again to bring it back. |
| Disable Preview / Enable Preview | Turns the preview off and on. |
| Colour scheme | Choose System (follow your computer's setting), Light or Dark to check how your interface handles light and dark mode. |
| Preview Context Options | Choose the application, user and date to emulate (see above). |
| Refresh Preview | Restarts the preview and runs your code again. |
The device frames use the real screen width, so your CSS media queries and screen-size visibility rules behave exactly as they would on that device. Zooming only scales the picture and never changes those sizes.
The moon button next to Save switches the builder itself between light and dark mode. It doesn't affect the preview.
Zooming and panning
- Use the zoom buttons at the bottom of the canvas, or ⌘/Ctrl + scroll or pinch, to zoom. Click the percentage to reset to 100%.
- Hold the space bar and drag to pan.
- Click Fit to screen to fit the whole frame in view.
Previewing dynamic routes
When the selected route has parameters in its path (for example /news/:slug), an address bar appears above the frame. Type a value into each parameter to preview the route with a real record, edit the loaded record with the pencil button, or open the address on the emulated application with the external-link button. See Dynamic Route Parameters.
Caveats
- The preview runs your custom JavaScript. Faulty code, such as an endless loop, can break the preview or even freeze the browser tab. Disable the preview, fix the code, then enable it again. Or click Refresh Preview to start over.
- Because the preview updates live, large structural changes can occasionally leave it in an odd state. Click Refresh Preview to reset it.