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.
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.
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.
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.
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.