Preview Tabs in Nova

Nova’s Preview feature allows you to render a preview of a file you’re working on, with support for automatically reloading the Preview live as you make changes to your code. To provide these Previews, Nova includes a built-in HTTP server for serving static HTML content or Markdown files, but you can also choose to point Nova to your own development server for other types of content.

Nova’s Preview is based on Apple’s WebKit engine included with macOS, most commonly used in Safari. You can also choose to open Previews in external browsers to test compatibility with other rendering engines.

Opening a Preview Tab

To open a Preview of a document, click the Preview icon on the right end of the editor’s path bar. You will be prompted to choose whether to open a Preview in a new tab, open a Preview in a split view either to the right or below the current view, or open a Preview in an external browser.

NOTE: You can also click the New Tab button in the toolbar and select Preview, or use the menu items found in Project > Preview and Project > Preview In.

How Preview Opens Files

When using Preview on a file, Nova tries to provide the richest Preview it can based on where the file is located and what type of file it is. The information below applies to both opening Previews in Nova’s own Preview tabs, or opening Previews in an external browser.

The Built-in Web Server

By default, Nova will serve local HTML and Markdown files in a Local Project using a built-in HTTP server. The built-in server is great for static sites built with HTML, CSS, and JavaScript, or for viewing a simple rendered view of Markdown documents. Using the built-in server also provides support for additional useful features in Preview tabs, such as automatically reloading as you type, or reloading an HTML page when linked files (like CSS or JavaScript) have been changed.

Using Other Servers

For projects that require server-side frameworks like Node.js or use interpreted languages like PHP, you may need to set a custom server URL in the Project menu > Project Settings. This setting lets you point Preview to a particular server for your project, whether that’s running on your Mac or on another machine. Once configured, Nova will automatically map the URL for local files in your project to their URL on the server and use that URL for Preview tabs.

Other Local Files

For local files opened outside of a project, Nova will simply open the file directly from its file:// path on your Mac. In these cases, features that require using the built-in web server will not be available, such as reloading Preview tabs as you type.

Remote Files

For remote files hosted on servers with a Remote URL configured, Preview will automatically load the file directly from its URL on the server. This allows you to preview your files exactly as your server provides them to your users and visitors.

For remote files hosted on servers without a Remote URL set, Nova will download and cache the file locally in a temporary folder, and serve a Preview from the file’s file:// path. Because Nova will not download linked files like images, stylesheets, or scripts when using Preview in this way, we strongly recommend setting a Remote URL for servers when possible.

Navigation Bar

At the top of a Preview tab, you’ll find the navigation bar. The navigation bar houses common controls found in most web browsers, such as back and forward navigation buttons, an address bar showing the URL being previewed, and a reload button. In addition, you’ll find a few option for customizing the behavior of the Preview and inspecting your project.

Locking Focus

When you open a Preview tab for a file, the Preview will be locked to the document it was opened from by default. This means that if you focus a different file in the Editor, the Preview will continue to show the same file it was originally opened from.

By clicking the Focus Lock icon in the navigation bar, you can change how the Preview tab behaves when switching files. By selecting Switch Focus with Current Document, the Preview tab will automatically change to reflect the currently focused file whenever you switch to a different file in Nova.

If you use the address bar to manually navigate to a specific URL, Nova will automatically set the focus mode to Lock Focus to Custom URL. This will ensure the Preview tab remains on the URL you specified, even if it is not directly tied to any files currently open in Nova. You can also use the Lock Focus to Document menu to tie an existing Preview tab to a different open file from the one it was originally created from.

Environment Overrides

Some sites (such as this one!) may change their appearance depending on if the user’s system is set to light mode or dark mode. In these cases, the Environment Overrides menu allows you to manually force a Preview to display in light or dark mode without having to change your own system settings.

Linked Files

When opening HTML files in Nova’s built-in Preview server, Nova will automatically detect any related linked files, such as external JavaScript or CSS files. When you make changes to any linked files, Nova will automatically reload the Preview tab, just as if you had changed the document itself. This allows you to quickly change styles and scripts used on a page and see your changes in action without having to manually reload the Preview. To see a list of linked files detected on the current page, just click the Linked Files button.

Web Inspector

Preview tabs also provide full access to the WebKit engine’s Web Inspector, a powerful web development tool that allows you to inspect HTML elements on the current page, view source code, debug JavaScript, measure and monitor network usage on your site, and much more. You can open the Web Inspector by clicking the icon in the navigation bar.

A full explanation of the Web Inspector’s features are outside the scope of this article. You can find the official documentation for the Web Inspector at the WebKit project’s website (webkit.org).