SettingsDocument Templates
HTML Editor
How to write a document template in HTML: the code editor, suggestions for variables and repeating items, the live preview, drafts and saving.
The HTML editor is for templates written as code: you write or paste the HTML, and a preview beside it shows the document as it prints. It suits designs that need exact control, or HTML you already have from elsewhere. Open an HTML template with the pencil on its row in Settings > Document Templates, or start one with Create Template, then Create from scratch and HTML custom code.
Writing the HTML
- The code: On the left, coloured as HTML, with line numbers and matching tags highlighted. Ctrl+F searches it. Closing tags aren’t added for you, so what you paste stays exactly as it was.
- Variables: Details Work Planner fills in when the document prints are written in double curly brackets, such as {{customer_name}}, and are highlighted in the code.
- Suggestions: Type {{ and the editor lists the details your kind of document has, with their names. Choose one to put it in.
- Repeating for each item: On worksheets, invoices and quotes, type {{# and choose items to add a repeat: everything between {{#items}} and {{/items}} is printed once for each job or line. Inside it, the suggestions list the item’s own details first, under Each item.
- Details written as HTML: A few details, such as a balance shown in colour, are themselves HTML. Write those with three brackets, such as {{{balance_html}}}, so they come out as formatting rather than as code.
- Showing something only when a detail is empty: Wrap it in {{^field}} and {{/field}}.
The Preview
- Live preview: On the right, the document as it prints, filled in with example details and your business’s own details. It follows your code about half a second after you stop typing, and keeps showing the last good version while the next one loads.
- One copy and Whole sheet: For half and quarter page templates, the switch in the top bar shows one copy or the whole printed sheet.
- On narrower screens: The code and the preview take turns, with a Code and Preview switch.
- Preview & test: The button in the top bar fills the design in with one of your real records, and can download a PDF or email you a test. See Preview & Test Popup.
Saving Your Work
- Drafts: Your code saves to a draft about two seconds after you stop typing, and the top bar says Draft saved. Ctrl+S, or Cmd+S on a Mac, saves the draft straight away. A draft doesn’t change what prints.
- Save & quit: Makes the HTML the one that prints, keeps a copy in Version history, and takes you to the template’s details page.
- Coming back: If you left with a draft, the editor opens with it and a note saying when it was saved, with Discard changes to go back to the HTML as it was last saved.
- Size: HTML over 1 MB won’t save; the top bar says so.
- Undo and Redo: In the top bar, and with Ctrl+Z and Ctrl+Shift+Z.
The Menu
- Template details: The template’s details page.
- Version history: Earlier saved versions, to look at or restore. See Version History Popup.
- Save as template: Saves the HTML as it is now as a new template in Your templates, leaving this one as it was.
- Import and Export: See Importing and Exporting Templates.
- Open in the Simple editor: Reads the HTML into a letter: its text, headings, lists, tables and images. See Moving Designs Between Editors.
- Discard unsaved changes: Shown while there’s a draft.
Related articles
- Drag and Drop Editor: Designing a template from blocks instead of code.
- Moving Designs Between Editors: Turning a drag and drop design into HTML, and HTML into a letter.
- Editing a Document Template: The template’s page size, layout and how it’s used.
- Website Page Editor: Writing a website page in HTML.