Library

TL;DR

The Air Preview feature of Code Editor lets you preview on your iOS device the file you’re currently editing in Coda 2.

  • If you’re having trouble pairing your iOS device with Coda 2, double-check that Bonjour is working on your local network. (Some routers have been known to block Bonjour.)
  • If it’s previewing the right document, but not linking up your external stylesheets or included files properly, double-check that the Local URL setting in Coda 2 is set to something like MyComputer.local instead of http://localhost/. (Remember that localhost refers to the device itself, so it’s different on your iOS device than on your Mac.)

Welcome to the future

Ever wished you had a dedicated screen for previewing your work in Coda? Now you don’t need to buy a second monitor, just use Air Preview with Code Editor + Coda 2*.

How it works

Launch Code Editor on your iOS device. Edit any document in Coda 2. When you’re ready to preview, hit the Air Preview button in the bottom of Coda’s editor pane. Your iOS device becomes a dedicated preview window, automatically updating the view whenever you save changes.

Behind the Scenes

The first time you Air Preview a document, you’ll need to pair your iOS device with Coda 2.

Coda uses Apple’s Bonjour to discover iOS devices on the local network running Code Editor. Once connected, Coda serves up your pages to Code Editor via HTTP like a regular web server, and tells Code Editor when it needs to refresh the page.

Making it happen

On your iOS device, simply launch Code Editor, and make sure you’re connected to the same local network that your Mac is on.

If you haven’t already done so, create a Site in Code Editor. More information creating a site can be found in Getting Started with Code Editor.

On your Mac, open a document in Coda’s editor. For this initial test, the document should probably be something simple like a static HTML file. We can try more advanced cases later.

Pair it up

Click the Air Preview button in the bottom of Coda’s editor pane. A small window will open and any devices running Code Editor on the same network will be listed. To pair with your iOS device, click it’s name in the menu and then enter the pairing code when prompted. It should only take a few seconds for Code Editor to complete the pairing process.