About Live Preview
Live Preview lets you see your edits from the editor in real time in a browser. By sharing the published Live Preview URL, you can review your edits with team members and others.
On the Live Preview screen, a notification appears in the bottom-right corner to indicate that you're viewing a preview.
Displaying Live Preview
Note: Edits added via custom code won't appear in Live Preview.
Click the [Live Preview]
(play button) 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 automatically generated.
Example:
preview.studio.site/live/{random string}/Click the URL in the panel to open the Live Preview screen.
Checking responsive design in Live Preview
To check your responsive design in Live Preview, adjust the width of the browser window displaying the Live Preview.
The breakpoint setting in the editor isn't linked to the Live Preview display.
Example: Checking the responsive design for tablets
OK: Open Live Preview on a PC and resize the window to 840px or less
OK: Open Live Preview in a browser on a tablet
NG: Set the editor's breakpoint to "Tablet" and then open Live Preview
Sharing Live Preview
By sharing the Live Preview URL, other members can view the site in real time.
There are two ways to share: by URL or by QR code.
Sharing by URL
Click [Copy URL] to copy the Live Preview URL. You can use this to share via chat tools, email, and more.
Using a QR code
When you scan the QR code shown in the Live Preview panel with a mobile device, the Live Preview opens in the browser on that device.
This is useful for testing on smartphones and tablets.
Deleting a Live Preview URL
You can delete Live Preview URLs that are no longer needed.
Once deleted, the URL can no longer be accessed. If you want to share a preview again after deleting, you'll need to generate a new URL.
Click [Live Preview] in the top-right corner of the screen.
Click [Delete Live Preview URL].
Comments in Live Preview
You can add comments directly on a shared preview to review designs and leave feedback.
Tip：The comment bar at the bottom left of the live preview screen can be dragged to any corner.
How comments work
Comments can only be added by users who have a Studio.Design account and are members of the project. (See how to invite members)
You need to be signed in to your Studio.Design account to add comments.
Comments added through the comment feature in the design editor also appear in Live Preview.
Commented locations are shown as pins on the page.
Supported environments for comments
The comment feature works on both desktop and mobile.
Supported environments follow the browsing environments for websites built with Studio.Design.
Adding comments from Live Preview
Open Live Preview.
Click [Login] in the bottom-left corner of the preview screen.
Even if you opened the preview from the design editor, you'll need to sign in again to use the comment feature.
Sign in with a Studio.Design account that's a member of the project.
Once you're signed in, the bottom-left corner of the preview screen will switch to show a comment icon and a user icon.
Click the comment icon, then click the spot on the preview where you want to leave a comment.
Enter your comment in the new comment field and click the up-arrow button to send it.
Viewing comments in Live Preview
Open Live Preview.
Click [Login] in the bottom-left corner of the preview screen.
Even if you opened the preview from the design editor, you'll need to sign in again to use the comment feature.
Sign in with a Studio.Design account that's a member of the project.
Once you're signed in, the bottom-left corner of the preview screen will switch to show a user icon and the comment icon.
Click the comment icon to see a list of all comments added. Comments added in the design editor will also appear in the list.
Click a comment to jump to its location and see the comment thread.
Webhook notifications when comments are added
If you enable webhooks, you can receive a notification whenever a comment is added.
For details, see Webhook notifications.
Editro 5.0 sample test test display preview page preview button livepreview live preview preview share private test site