New in Coda iOS 2.1!

Note: External Preview requires Split View, introduced in iOS 9 and supported on all current iPad models.

When using Coda to edit HTML and Markdown documents, you can preview in an external browser. Currently, both Safari and Chrome on iOS are supported for external preview. For the following, assume any reference to Safari can be equally substituted for Chrome.

To enable External Preview:

  1. Begin editing your HTML or Markdown document in Coda iOS
  2. Open Safari in Split View by swiping from the right-side of the screen
  3. Pin Safari side-by-side with Coda by tapping on the gripper between it and Coda
  4. In Coda, long-press on the Preview button in the top-left of the view (denoted by an eye icon)
  5. Choose “Open in Safari…”

The document should now open an external preview in Safari.

Making and Seeing Changes Live

Coda has support for Live Reload behavior when working with an external preview.

When you make changes to your document in Coda with External Preview enabled, simply tap the Save button (the green checkmark) and the preview will automatically reload in Safari.

If a JavaScript or page rendering issue (such as malformed HTML) causes the page to fail to render in Safari, you may need to correct the issue in Coda’s editor, save, and tap the Reload button in Safari to re-enable Live Reload.

How Live Reload Works in Coda

Live Reload works by adding a small bit of JavaScript code to your document before it is rendered in Safari. This JavaScript is namespaced within a single global opaque object and should not interfere with the namespace of your own objects and frameworks.

When the page loads in Safari, the added JavaScript establishes a WebSocket connection back to Coda’s built-in webserver. This allows Coda to request that the page be reloaded in Safari dynamically.