Although Blocs delivers a very accurate representation of your final site as you build 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 website at multiple screen sizes within a single workspace. To enter preview mode, simply left click the play button ⏵ located on the right of the breakpoint control or alternatively, use the keyboard shortcut ⌃V.
Preview Toolbar
When in preview mode, the preview toolbar can be found at the top of the main application window. This toolbar contains various features that will assist you in testing and previewing your website.
Add Viewport
The plus button + located at the far left of the toolbar makes it quick and easy to add additional viewports based on the dimensions of common computer, monitor, tablet and phone screen sizes.
Viewports do not simulate the characteristics of the relevant device’s operating system. They are merely browser windows scaled to match the screen size of the device.
Draw Viewport
The button with the pencil icon will toggle draw mode, which lets you manually draw custom size viewports. This feature can also be enabled by holding down the D key.
Edit Mode
The third button in from the left of the toolbar will toggle edit mode. When enabled, edit mode lets you move and arrange the viewports around the preview canvas. If a viewport is unlocked, then it is also possible to resize the views width and height dimensions, during edit mode. This feature can also be enabled by holding down the shift ⇧ key.
Page Selection
The control located in the center of the toolbar, lets you select the current page that is loaded into all of the preview viewports.
Reload
The button with the ↻ icon is the reload button. This button can be used to reload all of the preview viewports.
Broadcast Controls
The Blocs preview server can be accessed from any other device on the same network, the second button from the end of the toolbar will give you access to the local network broadcast options.
AirDrop Preview
This option will allow you to quickly and easily share the preview URL with other devices on the same local network via AirDrop. URLs that are shared using AirDrop are automatically opened in the receiving device’s web browser, allowing you to preview and test your site on the actual device.
If you find the AirDrop 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 copy preview option will copy the local network URL to your devices pasteboard. Entering this URL into a web browser on any device that is connected to the same network, will allow you to preview and test your site on the device.
Stop / Exit
The button with the stop ◼ symbol located at the far right of the toolbar, is used to exit preview mode.
Rename Viewport
Each preview viewport has a label located at the top left corner. The contents of this label can be edited simply by clicking on it and modifying the text.
Viewport Options
At the top right corner of every viewport on the preview canvas is a menu button ☰, this menu lets you access functions that are specific to the relevant viewport.
Inspect
This option will open the WebKit developer inspector tools for the relevant viewport. The inspector tools are a great way to inspect the code of your site and debug any potential issues you are encountering. We have this handy guide that will help you inspect your website for errors.
Reload
This option will reload the relevant viewport.
Share Screenshot
This option will let you access the various screenshot sharing options for the relevant viewport. Blocs has support to share a screenshot of the current viewport to local storage, email, messages and over AirDrop.
Delete
This option will delete the relevant viewport.
Focus Mode
Double clicking any viewport on the preview canvas will enable focus mode. When focus mode is enabled, all other viewports will be hidden and the preview canvas will zoom to fit the selected viewport in the available window space. Double clicking the focused view again or hitting the escape key, will exit focus mode, revealing all other viewports.
Pan Canvas
Using either an Apple Magic Mouse or Trackpad, it’s possible to pan the main preview canvas by scrolling your finger in any direction in the empty space on the preview canvas. Alternatively, the preview canvas can also be panned by pressing and holding the spacebar on your keyboard and dragging in the empty canvas space, in any direction.
Canvas Options
There is also a range of options which can be accessed by right clicking anywhere in the empty space on the preview canvas.
Reload All Viewports
This option will reload all viewports.
Center Align Workspace
This option will center align the current workspace. The workspace is the area that is covered by all of the viewports on the design canvas.
Fit Workspace
This option will adjust the zoom level of the preview canvas so that all viewports fit within the preview window frame.
Clear Preview Cache
This option will clear the cache of all viewports on the preview canvas and reload them.
Remove All Viewports
This option will remove all of the viewports on the preview canvas.
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.