What is Live Preview?
Live Preview is a feature that allows you to check your edits in the editor in real time in your browser. By sharing the Live Preview URL with other members of your company, you can communicate the real-time status of your edits.
How to Display the Live Preview
Click the arrow button
in the upper right corner of the screen.
If you have not yet used Live Preview in the project, click [Start].
A random Live Preview URL will be issued automatically.
(e.g. preview.studio.site/live/{randomString}/)
Click on the URL on the panel to view the live preview.
About displaying the live preview
Note: Any edits you make with custom code will not be reflected in the Live Preview.
In the Live Preview, a notification will appear in the lower right corner of the screen indicating that you are in the preview screen.
How to Check Responsive Design in Live Preview
When checking a responsive design in Live Preview, adjust the window width of the browser in which you are viewing the Live Preview.
The breakpoint settings on the editor are not compatible with the Live Preview display.
Example: You want to check the responsive design for tablets.
OK: Open the Live Preview on a PC and make the window width within 840px.
OK: Open Live Preview in a browser on a tablet
NG: Open the Live Preview with the editor's breakpoint setting set to "Tablet".
How to Share the Live Preview
Share URL
Click [Copy URL] to copy the live preview URL.
Using QR Codes
Scan the displayed QR code to view the live preview on that device. This is useful when checking your site on smartphones or tablets.
How to Delete the Live Preview URL
If you delete a URL, the published URL will no longer be available. When you issue the URL again, a new Live Preview URL will be generated.
Click "Live Preview" in the upper right corner of the screen.
Click [Delete Live Preview URL].
Editor 5.0 Editor5.0 Sample Test Test Display