Although Blocs delivers a very accurate representation of your final site as you actually design it, there are times when you may need to quickly preview your site to check and test other design aspects such as interactions, scroll FX and animations. Blocs has various preview options built in that are designed to help you test your site in a more natural and comprehensive way.
Preview mode in Blocs not only lets you locally preview HTML, but it also supports previewing PHP as well. As long as a page has the file type set to PHP in the page settings, the preview will render any PHP code added via the Code widget in real time.
In App Preview
In-app preview lets you preview your site as you would in a web browser, without having to leave the main Blocs application. To enter preview mode, simply left click the play button located on the right of the breakpoint control, or alternatively with the keyboard shortcut ⌃V.
Switching Breakpoints
As well as design mode, preview mode also has access to the main breakpoint controls. These controls can be used to quickly and easily switch between different screen sizes, in order to check the responsive characteristics of your site.
Developer Tools
In app preview also gives you access to the powerful WebKit developer inspector tools. The inspector tools are a great way to inspect the code of your site and debug any potential issues you are encountering. They can be accessed using the menu button in the top left of the preview frame.
Or alternatively by simply right clicking any element on a page (whilst in preview mode) and selecting Inspect.
Preview In Browser
As well as in app preview, Blocs also lets you quickly preview your site with any of the browsers you have installed on your Mac. To preview your site in a browser simply right click the preview button and select a browser from the popup menu.
You can read more about previewing in browsers here.
If you are having trouble with preview mode, or it’s simply not working, we recommend reading this troubleshooting guide.
Local Network Preview
The Blocs preview server can also be accessed from any device on the same network as your Mac. When in preview mode, there is a button with an antenna symbol located at the top left of the main application frame. Clicking this button will open a popup menu with two options.
Air Drop Preview
The first option will allow you to quickly and easily share the preview URL with other devices on the same local network via Air Drop. URLs that are shared using Air Drop are automatically opened in the receiving device’s web browser.
If you find the Air Drop options are unavailable or your device does not show as available, we have this dedicated troubleshooting guide that may help you resolve the issue.
Copy Preview URL
The second button will copy the local network URL to your Macs pasteboard. Entering this URL into a web browser on any device that is connected to the same network as your Mac, will allow you to preview and test your site on the actual device.