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.
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 [Copy URL] 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.
Click [Live Preview] in the top-right corner of the screen.
Click [Delete Live Preview URL].
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.
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
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
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.
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.
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.
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.
Delete a comment
You can delete comments you've added from the Live Preview screen. Deleted comments can't be restored.
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.
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