Previewing

Previewing sites

before publishing.

Opening the Preview

You can preview your website and all of your interactions without publishing by using the Preview function. You can access the preview by either clicking on the play button on the top left of each screen or by pressing Command + P. To exit the preview, click on the close button or press ESC.

Note: Please note that any Custom Code added through the Settings will not be visible in your preview. These changes will only be reflected on the published website.

Preview Modes

You have two modes in the preview, “Responsive” and “Scale to Fit”. You can toggle between these two modes using the segmented control on the top left.

In the “Responsive” mode, you can drag the handles to preview different breakpoints, and hide the UI to preview it as the full width and height of the viewport.

In the “Scale to Fit” mode, you can view the currently selected frame in the original dimensions in which it has been designed in. This is particularly useful for previewing components and checking the full composition of each webpage.

Sharing the Preview

You can share a preview of your website before publishing. All you need to do is open the Preview and click on the “Share” button.

In addition to being able to share the Preview Link, you can also view it on your phone via a QR Code, or embed the preview using the embed link or embed code. You can also add a password to the shared preview or hide the Framer interface for a more realistic preview experience.

Previewing

Previewing sites

before publishing.

Opening the Preview

You can preview your website and all of your interactions without publishing by using the Preview function. You can access the preview by either clicking on the play button on the top left of each screen or by pressing Command + P. To exit the preview, click on the close button or press ESC.

Note: Please note that any Custom Code added through the Settings will not be visible in your preview. These changes will only be reflected on the published website.

Preview Modes

You have two modes in the preview, “Responsive” and “Scale to Fit”. You can toggle between these two modes using the segmented control on the top left.

In the “Responsive” mode, you can drag the handles to preview different breakpoints, and hide the UI to preview it as the full width and height of the viewport.

In the “Scale to Fit” mode, you can view the currently selected frame in the original dimensions in which it has been designed in. This is particularly useful for previewing components and checking the full composition of each webpage.

Sharing the Preview

You can share a preview of your website before publishing. All you need to do is open the Preview and click on the “Share” button.

In addition to being able to share the Preview Link, you can also view it on your phone via a QR Code, or embed the preview using the embed link or embed code. You can also add a password to the shared preview or hide the Framer interface for a more realistic preview experience.

Previewing

Previewing sites

before publishing.

Opening the Preview

You can preview your website and all of your interactions without publishing by using the Preview function. You can access the preview by either clicking on the play button on the top left of each screen or by pressing Command + P. To exit the preview, click on the close button or press ESC.

Note: Please note that any Custom Code added through the Settings will not be visible in your preview. These changes will only be reflected on the published website.

Preview Modes

You have two modes in the preview, “Responsive” and “Scale to Fit”. You can toggle between these two modes using the segmented control on the top left.

In the “Responsive” mode, you can drag the handles to preview different breakpoints, and hide the UI to preview it as the full width and height of the viewport.

In the “Scale to Fit” mode, you can view the currently selected frame in the original dimensions in which it has been designed in. This is particularly useful for previewing components and checking the full composition of each webpage.

Sharing the Preview

You can share a preview of your website before publishing. All you need to do is open the Preview and click on the “Share” button.

In addition to being able to share the Preview Link, you can also view it on your phone via a QR Code, or embed the preview using the embed link or embed code. You can also add a password to the shared preview or hide the Framer interface for a more realistic preview experience.