Template editor reference
The complete surface of the template editor. For the workflow, see Edit a template.
The workspace
The editor fills the screen in three columns.
| Column | What's in it |
|---|---|
| Left — editing surface | Switches between AI Assistant (describe a change in plain English) and Code Editor (edit the markup yourself). It opens on AI Assistant, and your conversation survives switching back and forth. |
| Middle — preview | A live rendering of the document. |
| Right — tools sidebar | The Variables and Assets tabs. Hide it with the panel toggle in the toolbar. |
Drag either dividing gutter to re-balance the columns. The widths you set are remembered the next time you open the editor.
Toolbar
Left to right along the top:
| Control | What it does |
|---|---|
| Back arrow | Returns to the templates list. |
| Template name | With a chip showing its type, and — on a store-specific copy — a blue Store override · <store name> chip. |
| Panel toggle | Shows or hides the tools sidebar. |
| Stores | Manage store-specific versions. |
| History | Browse and restore past versions. |
| Reset | Restore the shipped default. |
| Save | Greyed out until you change something. |
Status bar
Along the bottom: your cursor's line and column, how large the template is, how many placeholders it contains, and the save state — a spinner with Saving…, an orange Unsaved, or a green Saved with how long ago.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| Cmd+S / Ctrl+S | Save |
| Cmd+Shift+P / Ctrl+Shift+P | Refresh the preview immediately |
| Shift+Alt+F | Tidy the markup indentation |
| Enter | Send the AI message |
| Shift+Enter | New line in the AI message |
Interactive preview vs PDF preview
The preview column has two modes, and the difference matters.
| Mode | What it is |
|---|---|
| The real document, produced by the same engine that generates the file your customers and suppliers receive. A small green badge names that engine. | |
| Interactive | The template rendered in your browser. Faster to update, and the only mode where hovering identifies fields and dragging resizes images. It carries an amber Approximate — verify in PDF pill. |
Interactive is approximate because your browser supports styling that the printed document does not. Lay things out in Interactive, then always confirm the finished design on the PDF tab before you save and go live.
How the preview keeps up
- It redraws on its own about three quarters of a second after you stop typing.
- It also redraws when you switch between Interactive and PDF, or change the sample order.
- The refresh button in the preview toolbar — or Cmd+Shift+P — forces an immediate re-render.
To stay responsive, an identical render is reused for a few minutes when the template content, the sample order and your uploaded images are all unchanged. If you suspect you're looking at a stale page, hit refresh.
A preview that never updates at all — rather than merely lagging — usually means a structural error. Check the validation bar under the toolbar.
Preview states
| State | What you see |
|---|---|
| Rendering | A spinner with Rendering preview… |
| Empty template | Empty template — start writing in the editor to see a preview. |
| Failure | The last good render stays on screen under a warning banner reading Preview failed. with the first line of the reason. |
A preview failure doesn't affect what's already saved or what your live documents print. It usually means something in the markup can't be laid out — undo the last change and preview again.
What the builder checks before it saves
Every save is checked twice:
- That your show/hide blocks are properly opened and closed.
- That every placeholder you used actually exists for this document type.
If either check fails the save is rejected and a red bar appears under the toolbar reading N validation issues: with the first problem spelled out and a +N more link for the rest. Nothing is lost — fix the flagged lines and save again.
| Message | What it means |
|---|---|
Unclosed section: {{#items}} has no matching {{/items}} | You opened a block and never closed it. |
Mismatched section close: expected {{/a}} but found {{/b}} | Blocks are closed out of order, usually from nesting. |
Unmatched {{/x}} — no opening {{#x}} found before it | A closing tag with nothing to close. |
Unknown variable: {{x}}. Not in the schema for this template type | That field doesn't exist on this document type. |
Unknown section: {{#x}} (or {{^x}}). Not in the schema for this template type | That show/hide switch doesn't exist on this document type. |
The two "unknown" messages nearly always mean a placeholder typed from memory, or copied over from a different document type. Insert it from the Variables panel instead — that panel is the authoritative list for the template you have open.
Warnings
Separately from the red errors, an amber bar reads N warnings: with the first one spelled out and a +N more link for the rest. Warnings never block a save — they describe something that will render, just not the way you probably meant.
| Warning | What it means |
|---|---|
| Template has no line-items block | There's no items loop at all, so the document prints its header, addresses and totals over no product rows. Legitimate for a cover sheet or a letter; on a packing slip or invoice it usually means the block was deleted by accident. |
| … has no uploaded image behind it, so it will render as empty space | An {{{asset.…}}} placeholder pointing at an image that no longer exists — usually one that was deleted from Assets. Upload a replacement and re-insert it, or remove the placeholder. |
| Images loaded from the web are removed when the PDF is generated | An <img> pointing at a web address. It shows in the preview and is blank on paper. Upload it to Assets and use its placeholder. |
| Your CSS loads files from the web | A stylesheet reaching out to the internet for a background or a font. Whether it arrives depends on the PDF server, so treat it as unreliable. |
These deliberately stay warnings rather than errors: a template with a broken image placeholder is exactly the one you need to be able to open, fix and save.
The one mistake validation can't catch
Inside a repeating block such as the items loop, a single-word placeholder is
accepted no matter what you type. Writing {{quanity}} instead of {{quantity}}
saves with no warning at all, and that column comes out empty on every row of
the printed document. There is no error message anywhere.
If a column is blank on every line, check the spelling against the Variables panel, which lists the exact names available inside that loop — and insert loop fields by clicking them rather than typing them.
Leaving with unsaved changes
Navigating away with unsaved edits brings up Leave with unsaved changes? — Your edits aren't saved yet. Leave anyway? Your draft is kept locally so you can restore it next time you open this template, with Stay and Leave.
Closing or reloading the browser tab triggers the browser's own warning as well.
The status bar always tells you where you stand, so save deliberately rather than relying on the prompt to catch you. Draft recovery is covered in Find, save & restore templates.
Next steps
- Variables reference — how to read an entry in the Variables list.
- Page setup & CSS support — why the PDF can differ from the interactive view.
- Edit a template — the workflow these controls serve.