What is Live Preview and how to use it
Live Preview lets you see your edits in the editor in real-time through a browser. You can share the Live Preview URL with team members to show them your work in progress.
Note: Changes to Live Preview display
As of October 14, 2025, the Live Preview screen has been updated. A notification now appears in the bottom-right corner indicating you're viewing a preview.
How to display Live Preview
Note: Edits made with custom code won't appear in Live Preview.
Click [Live Preview] in the top right corner of the screen.
If you haven't used Live Preview before, click [Start].A random Live Preview URL will be automatically generated (e.g., preview.Studio.site/live/{random-string}/).
Click the URL in the panel to open Live Preview.
Tips: Checking responsive design in Live Preview
To check responsive designs in Live Preview, adjust the browser window width where you're viewing Live Preview.
The breakpoint settings in the editor don't correspond to how Live Preview displays.
For example, to check the tablet responsive design:
✓ Open Live Preview on PC and adjust the window width to 840px or less
✓ Open Live Preview in a tablet browser
✗ Set the editor breakpoint to "Tablet" before opening Live Preview
How to share Live Preview
Share the URLClick [Copy URL] to copy the Live Preview URL.
Use the QR codeScan the displayed QR code to view Live Preview on the device you scanned with. This is useful for checking on smartphones and tablets.
How to Delete a Live Preview URL
When you delete the URL, the previously generated URL will no longer work. If you generate a new URL, a fresh Live Preview URL will be created.
Click [Live Preview] in the top-right corner.
Click [Delete Live Preview URL].
