TIP 93: Live Rendering with Live Update

If you've ever wished that you could edit a page in one mode and see it update in real-time in another window, then the Live Rendering window is the answer. To open the Live Rendering window, choose File > Preview in > Live Rendering or press Command-T on Mac (Control-T on Windows). The page you have open will load into the Live Rendering window.

What's In There?

Want to preview pages, but don't want to open each one to do so? No problem. Bring the site window into focus, select a page in the Files list and then open the Live Rendering window. Load a different page by selecting another file in the Files list. You can even preview your templates and components this way.

Like Preview mode, the Live Rendering window is an embedded Web browser, so you can use it to test page links, navigation, and JavaScript. There are four commands in the Live Rendering window flyout menu which execute the following tasks:

• Load: Invokes the Browse dialog to select a page from your hard drive. Clicking the Browse button that looks like a folder in the upper right accomplishes the same task as Load.

• Reload: When AutoUpdate is off, Reload updates the page.

• AutoUpdate: Updates changes by clicking on the Live Rendering window.

• Bound: Binds an open page to the Live Rendering window.

You can have more than one Live Rendering window open at a time, so if you've got multiple monitors, knock yourself out. Another sweet feature is that by using the Fetch URL tool from the upper left of the Live Rendering window, you can quickly bind the window to a page in the Files tab of the Site window.

A new addition to the Live Rendering window is the Small Screen Rendering (SSR) button. Clicking it renders your page as it would look on a small screen such as those used for mobile devices. To exit SSR, click the button again. You can also open SSR from the menu by choosing File > Preview in > Small Screen Rendering (Figure 93).

Figure 93. Shown here are the Live Rendering window and the Small Screen Rendering window (front), both with the same page loaded.

Surfing the Web and Previewing Files

If you type a URL into the Address field at the top of the Live Rendering window, you can access the Web just like a regular browser. Control or right-click in the window to get options for Back, Forward, Stop, Home, Copy Address, and Send Link in Email.