Preview mode displays your page designs in the browser just as they will appear in code. It's perfect for testing interactions, scrolling, and responsive behavior. You can also create simple prototypes in Subframe by reordering and navigating between your pages in preview mode.
Preview page flows
All your pages are part of a single flow and you can switch between them in order using keyboard shortcuts.
Click the Preview button in the top-right of the editor to start the preview from the current page.
Alternatively, you can access preview mode from Pages tab in the left panel. Click on the Play icon to start from the first page.
Navigate between pages by clicking the left and right arrows in the toolbar at the bottom of the screen or by using the arrow keys on your keyboard.
Click on the X icon in the toolbar or hit esc on your keyboard to exit preview.
For a distraction-free experience hide the toolbar by clicking the β Minimize icon. The toolbar will reappear when you hover over the bottom of the screen.
Share public preview links
Individual page previews can be shared with others by enabling a public preview link. This allows anyone to view your design in their browser without logging in or being added as a team member.
Click the Share button in the top-right of the editor.
Alternatively, you can click the Share icon in the preview toolbar.
Toggle on the switch for Anyone with the link can view
Copy the link to your clipboard to share.
Preview links are enabled on a page-by-page basis. You can disable sharing at anytime by toggling off the switch for a page.