Preview mode runs your design live. Pick a device or custom size, rotate, and choose Select (click elements to edit in the sidebar) or Interact (links/forms/scripts run).
Where: Top bar → Preview (Play) — Enter Preview mode
Key ideas
- Resize: Device presets or a custom width×height, with rotate.
- Select vs Interact: Select lets you click into elements to edit them; Interact runs the page for real.
Steps
- Click Preview (Play) in the top bar.
- Pick a device/size or rotate.
- Switch Select/Interact depending on whether you want to edit or test.
Select mode
Clicks target elements for inspection and editing while the preview viewport stays active. Use it to tune a responsive layout at an exact device size.
Interact mode
Links, forms, scripts, hover/click interactions, scrolling, and other runtime behavior receive pointer input. Switch back to Select before trying to pick an element.
Responsive testing
- Choose a device preset or enter a custom width and height.
- Rotate the viewport to swap portrait and landscape.
- Test more than one width; a preset is a viewport size, not a guarantee about a specific physical device.
Load, scroll, group, and delivery parity fixes
Load triggers fire from a fresh page load again; AI-authored staggers can target the parent and animate children; grouped GSAP relationships survive import; pinned motion is bounded by available page flow; styles and detached video playback carry into preview/export more reliably.
- Test a load animation from a fresh Preview reload.
- Keep a pinned scene away from the end and verify its full travel.
- Export/render after source changes; an older artifact is not automatically regenerated.
Troubleshooting
Clicking runs the page instead of selecting an element
Switch the preview toolbar from Interact to Select.