Live Preview | Studio Help

What is Live Preview?

Live Preview lets you see the changes you make in the editor in real time, right in your browser. By sharing the Live Preview URL you've published, you can review your edits together with teammates and others.

On the Live Preview screen, a notification appears in the bottom-right corner to let you know you're viewing a preview.

Open Live Preview

Note: Changes added with custom code won't show up in Live Preview.

Click the [Live Preview] (arrow icon) button in the top-right corner of the screen.
If this is your first time using Live Preview, click [Start].
A random Live Preview URL is generated automatically.
Example: preview.studio.site/live/{random string}/
Click the URL in the panel to open the Live Preview screen.

Screenshot: The Live Preview panel opened from the design editor, showing the QR code, the preview URL, and the [Advanced settings] button.

Check responsive design in Live Preview

To check your responsive design in Live Preview, resize the width of the browser window showing the preview.

The breakpoint setting in the editor doesn't affect what's shown in Live Preview.

Example: You want to check the tablet layout

Works: Open Live Preview on your computer and resize the window to 840px or less
Works: Open Live Preview in a browser on a tablet
Doesn't work: Set the editor's breakpoint to "Tablet" and then open Live Preview

Share Live Preview

Share the Live Preview URL so other members can view the site in real time.

There are two ways to share: by URL or by QR code.

Share the URL

Click the copy icon to the right of the URL in the Live Preview panel to copy the Live Preview URL. You can then share it through chat tools, email, and more.

Use the QR code

Scan the QR code shown in the Live Preview panel with a mobile device, and Live Preview will open in that device's browser.

This is handy for checking how your site behaves on smartphones and tablets.

Delete a Live Preview URL

You can delete Live Preview URLs you no longer need.

Once deleted, the URL no longer works. If you want to share a preview again, generate a new URL.

The following accounts can delete a preview link. Workspace guests and accounts with the writer role on legacy plans can't perform the deletion.

Members with the project's [Billing owner], [Owner], or [Editor] role
The workspace [Owner] and [Member] roles

In your project dashboard, open the [Settings] tab and select [General].
Under [Live Preview], go to [Manage Preview] and click [Delete Preview Link].
Click [Delete] in the confirmation dialog.

From the design editor, click [Live Preview] in the top-right corner and then [Advanced settings] to open this screen.

Add comments in Live Preview

You can add comments directly on a shared preview to review designs and leave feedback.

Tip: You can drag the comment bar in the bottom-left of the Live Preview screen to any of the four corners.

How commenting works

Only users who have a Studio account and are members of the project can add comments. (Learn how to invite members)
You need to be signed in to your Studio account to add a comment.
Comments added in the design editor also appear in Live Preview.
Each commented spot appears as a pin on the page.

Supported environments for commenting

You can use comments on both desktop and mobile.

Supported environments follow the browsing requirements for websites built with Studio.Design .

Turn on commenting

To turn on commenting, you'll need to sign in again from the Live Preview screen.

Open Live Preview.
Click [Login] in the bottom-left corner of the preview screen.
Sign in with a Studio account that's a member of the project.
Once you're signed in, the banner in the bottom-left of the preview screen changes to show a comment icon and a user icon.

Add a comment

Open Live Preview and turn on commenting.
Click the comment icon on the Live Preview banner, then click the spot on the preview where you want to leave a comment.
Type your comment in the new comment field, then click the up-arrow button to post it.

View comments

Open Live Preview and turn on commenting.
Click the comment icon to see a list of all existing comments. Comments added in the design editor appear in this list too.
Click a comment to jump to the spot it was left on and open its thread.
Click the [×] in the top-right corner of the thread to close it.

Edit a comment

You can edit comments you've added right from the Live Preview screen.

Open Live Preview and turn on commenting.
Click the comment icon and select the comment you want to edit.
Click the three-dot menu next to the account name.
Click [Edit] and update your comment.

Screenshot: The Live Preview screen with the comment list open in the bottom-left banner and a comment being edited in the thread.

Mark a comment as resolved

You can mark comments as resolved right in the preview.

Resolved comments are hidden in the preview, but you can still see them in the design editor.

Open Live Preview and turn on commenting.
Click the comment icon and select the comment you want to resolve.
Click the checkmark in the top-right corner of the thread. The comment is marked as resolved and hidden.

Screenshot: The Live Preview screen with the comment list open in the bottom-left banner and a comment being marked as resolved in the thread.

Delete a comment

You can delete comments you've added from the Live Preview screen. Deleted comments can't be restored.

Open Live Preview and turn on commenting.
Click the comment icon and select the comment you want to delete.
Click the three-dot menu in the top-right corner of the thread.
Click [Delete thread] to delete the comment along with its entire thread.

Screenshot: The Live Preview screen with the comment list open in the bottom-left banner and a comment being deleted in the thread.

Set up Webhook notifications

Turn on Webhooks to get notified whenever a new comment is added.

For details, see Webhook notifications.

Editro 5.0 sample test test view preview page preview button livepreview live preview preview share private test site