This article covers different options for previewing your websites as you work in Nova.

Built In Preview

WebKit Preview

The easiest way to preview your web pages as you work in Nova is to use the built-in preview mechanism.

Nova renders previews using the WebKit framework. This means that, in most cases, Nova’s preview will look the same as if the page had been rendered in Safari.

Previewing Static HTML

The simplest scenario is previewing a single static HTML page, as this can be done without any server-side processing.

You can preview a static HTML document you are editing in a new tab by clicking the Preview icon in the tool bar. You can also use the keyboard shortcut ⌃⌘4.

You can display an editor and preview side-by-side using splits. First, click the split button in the tab bar, then click Preview:

A new split appears containing a preview of the split file:

Hold down the option key (⌥) when clicking the split button to split horizontally instead. You can change the default split orientation in the General section of Nova’s preferences.

Static HTML documents with split previews update their preview whenever you save the file, even if they are stored remotely.

Previews also update if you modify and save a file that is externally referenced by the static HTML document being previewed. For example, if you are previewing a static HTML document that references a CSS file by <link> tag, modifications to the CSS file will update the preview.

It’s even possible to have a three-way split in a single tab containing a static HTML file, its preview, and a <link>-referenced CSS file. Changes to either the HTML or CSS file will be reflected in the preview split upon saving the file. This works best on a large display.

For more information on splits, see: Splits.

Previewing Dynamic Websites

A “dynamic” website is any whose pages are wholly or partially generated at load time by server-side processing. This includes technologies such as Server-Side Includes (SSI), PHP, Ruby on Rails, and many others.

Nova is capable of previewing dynamic websites, but needs some configuration to know where to look. You provide this information by creating a “Server”. Refer to the Servers article for more information.

Since dynamic websites require server-side processing, you must configure the Server with at least a Remote Path and a Remote URL. These are the remote filesystem path and URL respectively to the root of your website.

Armed with this knowledge, Nova can correlate a remote file with a particular URL. For example, if you’re editing a file located in /about/contact-us.php relative to the Remote Root, Nova will know to append /about/contact-us.php to the Root URL when you preview it.

Dynamic Sites With Routed Urls

Some web frameworks use dynamic URL “routing”, where there may not be a one-to-one correlation between a URL and a single file on disk. At the time of this writing, Nova is unable to associate arbitrary URLs with particular files.

External Preview

Some people prefer to always use a second window for preview, or need to test their site with a non-WebKit browser. For this purpose, Nova offers external preview.

If you have other browsers installed, you can send a document to them for preview by choosing View > Preview In > Name of Browser.

Once you have previewed a page in an external browser, it becomes the default external browser, and adopts the keyboard shortcut ⌥⌘B.

It’s even possible to preview with a browser on another platform this way. Some Windows virtualization products, for example, expose Windows applications to the Mac by creating small stub applications on the Mac side with the same name. This means Nova can invoke an “Internet Explorer” stub application and the page will load in Internet Explorer on the virtual machine. Refer to the user manual for your virtualization product for more details.