---
title: "The template editor - Workflow Documents"
description: "The HTML, CSS, Branding and Settings tabs, the live preview with sample data or a real order, product or customer, and the PDF preview."
canonical: "https://docs.workflow-documents.app/template-editor"
---

# The template editor

The editor has the template on the left and a live preview on the right. This page explains each tab, the preview and how saving works.

Open it from **Templates** by selecting a template.

## The four tabs

| Tab | What you edit |
| --- | --- |
| HTML | The content of the document: **HTML with Liquid** |
| CSS | The styles of the document |
| Branding | Colors, fonts and font size for this template only |
| Settings | Name, what the template renders, description, file name, main language, paper size, margin, orientation and whether the template is on |

### HTML

The HTML is the body of the page. You do not write the page frame, the page size or the fonts yourself: the app adds them from the template's settings and your branding. Print data with Liquid, see [Template variables and Liquid](https://docs.workflow-documents.app/template-variables-and-liquid.md).

The **Variables** card under the code explains the data of this template and lists every variable when you expand it.

### CSS

Plain CSS for your HTML. Your branding is available as CSS variables such as `var(--brand-primary)` and `var(--brand-border)`, so a change in Settings reaches the template without touching its CSS. For print layout, the usual CSS for paged media works, for example `page-break-inside: avoid` on a table row.

### Branding

Colors, fonts and font size for this template only. A field you leave empty uses your brand: it shows the brand value as a placeholder or as **Brand default**. **Reset to brand** removes the template's own values. The logo and the company details always come from Settings. See [Branding your documents](https://docs.workflow-documents.app/branding.md).

### Settings

| Field | What it does |
| --- | --- |
| Name | The Generate document action in Shopify Flow finds the template by this exact name |
| Renders | What one document is about: **An order**, **A product** or **A customer** |
| Description | A note for yourself |
| File name | The name of the PDF, with Liquid. ".pdf" is added |
| Main language | The language this template is written in |
| Paper size, Margin, Landscape | The page. See [Paper size, margins and file name](https://docs.workflow-documents.app/paper-size-and-file-name.md) |
| Template is on | When off, Flow and the API refuse to generate documents with it |

## The preview

The preview renders the template as you type, a moment after you stop. It shows the page in its real proportions, scaled to the width of the pane, including the margin.

**Preview with** chooses the data:

- **Latest order**, **Latest product** or **Latest customer** - the newest one in your store. This is the default. A store without any shows sample data and says so.
- **A specific order**, **A specific product** or **A specific customer** - enter the order number, the product title, or the customer's email or name.
- **Sample data** - a made-up order, product or customer, useful when you do not want real data on screen.

Under the selector, the preview says what it is showing, for example *Showing #1001.*

If the template has an error, the preview shows the message with its line instead of the page. Fix the line and the preview comes back.

### Preview PDF

**Preview PDF** renders the actual PDF from what is on screen, unsaved changes included, and opens it. Use it before you save a larger change: the PDF is the real result, with page breaks and fonts exactly as a workflow would produce them.

Previews are free. They do not count toward your plan and do not appear in the document history.

> [!NOTE]
> The preview shows your template, it never runs it: scripts in a template do not execute, neither in the preview nor in the PDF.

## Saving

When you change anything, a save bar appears at the top with **Save** and **Discard**. Leaving the page with unsaved changes asks first.

A save is refused when the template does not render. The error is shown on the field it belongs to, so a workflow never meets a template that cannot produce a document.

## The buttons at the top

- **Documents** - the history, filtered to this template.
- **Add language** - add a language to the template. See [Templates in several languages](https://docs.workflow-documents.app/languages.md).
- **Delete** - delete the template permanently.

Once a template has more than one language, a language selector appears next to the tabs. It switches between the main language and each added language.

## Next steps

- [Template variables and Liquid](https://docs.workflow-documents.app/template-variables-and-liquid.md) - the data and the filters.
- [Paper size, margins and file name](https://docs.workflow-documents.app/paper-size-and-file-name.md) - the page and the name of the PDF.
- [Troubleshooting](https://docs.workflow-documents.app/troubleshooting.md) - when the preview or a save reports an error.