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 in the top right corner of the main application toolbar, 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 small gears icon 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 your default browser use the keyboard shortcut ⌥⌘B. 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
Blocs also has support for local network previewing, which lets you preview your site on any device that is connected to the same network as your Mac. If the currently previewed page has its file type set to .html, then a special preview URL will be printed in the top right corner of the main application window, when in preview mode. Entering this URL into a web browser on a device that is connected to the same network as your Mac, will allow you to preview and test your site on the actual device.
Solis – Advanced Preview
We created a Blocs companion tool (Solis) that is designed to streamline the previewing process with Blocs. Solis enables the previewing of a Blocs site on multiple screen sizes at once, while it is actually being designed. You can find out more about Solis here.