Topics
Creating a Live Preview
There are two ways to create a Live Preview:
- Open a document and choose the "Live Preview" menu item from the "View" menu.
- Choose the "Open Live Preview" menu item from the "File" menu.
Live Preview allows you to instantly see the effect that changes in your code have on how the code is rendered.
Using the Live Preview Window
The Live Preview window has two main parts. The first part contains the text of the document. This text can be edited normally like a regular document. The second part is the display area for the HTML rendering. This rendering automatically updates as you edit the document. Please note that these two parts can be divided using a vertical or horizontal divider. The Live Preview window has a "Refresh" button to force the HTML rendering to update. Also, the window has a "Show Document" button to show you the original document window.
Live Preview Preferences - Changing the Preview Divider Orientation
The divider in Live Preview windows can be set as vertical or horizontal by going to the "Preview" tab in the Preferences panel.
Live Preview Preferences - Blocking Images/Files
By going to the "Preview" tab in the Preferences panel, it is possible to prevent images from loading in the HTML rendering and to prevent internet content from being downloaded for the rendering. Please note that images that have already been loaded once are stored in the browser cache and will continue to be displayed.
How Live Preview Interacts with the Main Document
A Live Preview window can be opened for any document. If the document is not part of a project, then the original document window can be closed while still allowing the document to be edited in the Live Preview window. If you want to retrieve the original window after closing it, then click the "Show Document" button in the Live Preview window. If the original document is part of a project, then closing the project window will cause the Live Preview window to close automatically. You must leave the project open in order to use Live Preview.
Troubleshooting - Live Preview Is Not Functioning
Please note that the following requirements must be met for Live Preview to function properly:
- You must be using Mac OS X 10.2 or higher. This can be purchased from Apple.
- You must have installed Safari 1.0 or higher. This is a free download from Apple.