New in Code Editor 2.1!
Note: External Preview requires Split View, introduced in iOS 9 and supported on all current iPad models.
When using Code Editor 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:
- Begin editing your HTML or Markdown document in Code Editor
- Open Safari in Split View by swiping from the right-side of the screen
- Pin Safari side-by-side with Code Editor by tapping on the gripper between it and Code Editor
- In Code Editor, long-press on the Preview button in the top-left of the view (denoted by an eye icon)
- Choose “Open in Safari…”
The document should now open an external preview in Safari.
Making and Seeing Changes Live
Code Editor has support for Live Reload behavior when working with an external preview.
When you make changes to your document in Code Editor 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 Code Editor’s editor, save, and tap the Reload button in Safari to re-enable Live Reload.
How Live Reload Works in Code Editor
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 Code Editor’s built-in webserver. This allows Code Editor to request that the page be reloaded in Safari dynamically.