Previews

Often content in Drafts is editing in Markdown and ultimately intended to be rendered as HTML through a Markdown parser. It is sometimes useful to get a preview of how that content will appear when rendered, so Drafts offers customizable ways to preview your HTML output.

Drafts offers an HTML Preview action step to preview HTML generated from a template in a browser window within an action. HTML Preview steps in actions are static and modal. They are still very useful, and can be used on iPhone, but do not live update when changes are made to a draft.

On Mac and iPadOS, Drafts also offers the ability to open a live HTML preview of the content of a draft in a separate window. When you open a preview window, it will update when changes to a draft are saved, always keeping a current rendering.

Opening a Preview Window

iOS Mac

editor/preview

To open a preview window for the current draft:

  • macOS: Select File > Show Preview from the main menu.
  • iPadOS: Tap the preview button in the bottom toolbar row of the editor.

Preview Templates

Preview windows offer the ability to select which template to use when previewing previewing your Drafts.

Drafts offers three built-in template styles (Basic, Foghorn, Swiss) for use in previews which have styling for commonly used Markdown tags, but the preview can also be based on custom templates stored in iCloud Drive/Drafts/Library/Templates. A typical use case for a custom template it to create a style that matches a blog website template to get a preview that will mimic how the Markdown will be rendered when published.

These templates use the same Template engine and tags used by actions. Typically a preview template should generate a fully-formed HTML document, and can load remote resources (stylesheets, javascript, etc.).