The preview window of the builder gives you a realtime exact preview of how your interface will be rendered except for one detail of dotted outlines when you hover over a block.
As you modify interface data in the builder it will be reflected in realtime in the preview.
To provide the most accurate representation of the rendered interface, you should ensure that you are running the preview in the expected emulation context.
For example, if you have an application set for emulation, then all requests inside the preview will be made to the API using that application's access token, so content will be loaded according to the permissions of that application. This might result in some unexpected behaviour if you add an image onto your interface that the emulation application doesn't have the required permissions to view that image..
If no application is selected to emulate, then the preview will run within the context of you, the logged in user using the builder. If you are previewing in the context, keep in mind that when you publish the interface the application may not have the same access as you do.
At the top of the builder UI, there are a few different options for changing the preview
Mobile View
Resizes the preview to 640px X 480px to emulate a typical mobile device
Tablet View
Resizes the preview to 768px X 1024px to emulate a typical tablet device
Desktop View
Resizes the preview to fill the max space available on your screen
Window View
Breaks the preview out into it's own browser window, so that you can size and arrange the preview to your liking, this view is helpful when using multiple monitors
Disable Preview
You can disable/enable the preview window
Preview Emulation Settings
Here you can manually set emulation settings including:
Emulation Application
The application to emulate in the preview, so you can see exactly what the interface will look like when run in that application
Emulation Date
Select a date or point in time to emulate, so that you can see what the interface will look like if viewed at that particular time
As the preview will run your custom javascript code, It is possible for you to write bad code, overflow exceptions etc, Which may cause the preview to break or even crash your browser. Often you can fix this by disabling the preview window and fixing the bug in your code, Or click the preview 'refresh' button at the top of the screen to restart the preview and run your code again.
As the preview updates in realtime, it's possible that it might break if significantly modifying functionality on your interface, usually clicking the 'refresh preview' button at the top of the UI will force and update and fix these issues