Previewing your site

Preview mode lets you view your site as visitors will see it, helping you verify layouts, responsiveness, and interactions before publishing.

Open preview mode

To preview your site from the Canvas:

1. Click the Play button in the top-left corner of the editor.

2. Alternatively, press ⌘ P on macOS or Ctrl + P on Windows.

The preview opens in a separate preview mode where you can interact with your site and test its behavior.

To exit preview mode:

• Click the Close button, or

• Press Esc

Test responsiveness

While in preview mode, resize the viewport to see how your site adapts to different screen sizes.

This allows you to:

• Verify responsive layouts

• Test breakpoint behavior

• Check content alignment across devices

Previewing at different viewport sizes helps identify layout issues before publishing.

Preview a specific breakpoint

You can preview a page using the currently selected breakpoint.

1. Select the breakpoint on the Canvas.

2. Click the Preview icon.

The preview opens using the selected breakpoint width, making it easier to test a specific device layout.

For example, if you select the Tablet breakpoint before opening the preview, the preview will match the tablet width.

Note: Custom code added through Settings will not appear in the preview. These changes are only visible on the published site.