What is Live Preview?
Live Preview is a feature that lets you see your latest edits directly in your browser. By sharing the Live Preview URL with your team members, you can keep everyone updated on your work in real time.
Note: Changes made with custom code will not appear in Live Preview.
Using Live Preview, you can see how your edits look on your site—instantly and from different browsers.
Since anyone can view the generated link, you can share your Live Preview URL with clients, teammates, or friends to keep everyone in the loop while you work.
How to get started with a live preview
Click [Live Preview] in the top right corner of the screen.
To start a new Live Preview, click [Start].
When you click [Copy URL], Studio.Design will automatically create a random Live Preview URL (for example: preview.Studio.site/live/{random string}/).
How to Check Responsive Design with Live Preview
When viewing responsive designs in Live Preview, breakpoints automatically adjust based on your browser’s window width—not on the editor’s display settings.
To check the design for each screen size, simply change the width of the window where you’re viewing Live Preview.
Example: If you want to check the tablet design:
OK: Open Live Preview on your PC and reduce the window width to under 840px
OK: Open Live Preview in your tablet’s browser
Not OK: Set the editor’s breakpoint to "Tablet" and open Live Preview (this will not reflect true tablet responsiveness)
How to Delete a Live Preview URL
To delete a preview link, click [Delete Live Preview URL].
When you delete a Live Preview URL in the editor, the previous URL becomes inaccessible. If you generate a new one, Studio.Design will create a fresh Live Preview URL.