In Webflow, preview mode gives you a fast, interactive way to test your site’s design — just like they’ll behave on your published site. It’s an essential tool for checking layout responsiveness, interactions/animations behavior, and how elements interact with one another.
How to open preview mode
To enter preview mode in Webflow, click the preview “play” icon in the top bar or press Command + Shift + P.
This will:
- Hide most of the Webflow interface so you can focus on your site’s design
- Keep the top bar visible by default, so you can easily switch between breakpoints and test responsiveness
If you want to hide the top bar, click the up arrow icon on the top left of the screen.
Site interactivity in preview mode
Once in preview mode, your site’s interactive elements are still functional. You can switch site pages, click on page and section links in the canvas, and test elements such as sliders and nav dropdowns.
How to use canvas settings and simulate breakpoints in preview mode
Canvas settings are available in preview mode by clicking the “canvas settings” button in the lower right corner of the screen. You can use canvas settings to adjust your screen’s size and preview how your site will look on different devices.
If you’d like to preview your site on preset device breakpoints, you can click their icons in the top middle or bottom right of the screen.
How to view custom code in preview mode
By default, sites are presented without custom code in preview mode. To enable custom code, click the Enable custom code toggle in the bottom left corner.
When you enable custom code in preview mode, your site renders on a new subdomain:
{shortName}.canvas.webflow.com
This creates a secure, isolated environment that closely mirrors the published site experience, where custom code scripts can execute safely.
How to exit preview mode
When you’re done testing your site in preview mode:
- Click the “preview” icon again, or
- Press the Escape key (Esc) or Command + Shift + P on your keyboard