Opening a template brings its structure, editing tools, and preview together. Select a part to edit, then look at the preview to see the result without leaving the editor.
Start in Structure to select what to edit, use the tabs beside it to make changes, then open Run to generate a PDF. The illustrations below show each area in context.
1. Structure: choose what to edit
Structure is on the left. It shows the pages and sections that make up the template. Selecting an item opens its editing options in the panel beside it.
- Global holds settings shared across the template.
- Page represents a page in the layout, with its sections inside.
- Section is a content block, such as customer details or a service table.
- Header / Footer contains page header or footer content when the template uses it.
For example, select Billing Parties to edit labels in the customer details section. Select Global for shared settings such as fonts or the background.
2. HTML, CSS, Props, and Config
After selecting an item in Structure, the next panel shows its available tabs:
- HTML: the content and structure of the section.
- CSS: presentation, such as colors, font sizes, and spacing.
- Props: values saved with the template, often labels, colors, or reusable text.
- Config: settings for the selected item, such as margins, backgrounds, or page breaks.
With an existing template, open Props to change a label without editing HTML/CSS. The illustration below shows a heading prop on the selected section; its HTML reads the value through {{ props.heading }}.
The available tabs depend on your selection. Global has Props and Config, while a section can have HTML, CSS, Props, and Config. A variant that inherits from the base may offer fewer editing options.
3. Layout and PDF: see the result
The preview beside the editing panel has two modes: Layout and PDF.
Layout helps you see how sections fit together as you work. PDF shows the document as pages, which is useful for checking margins, headers, footers, and content flowing onto the next page.
In Layout, you work with the template’s pages and sections. PDF shows the paginated result, including extra sheets created when content extends beyond one page.
Layout reflects your current edits. PDF renders saved template content, so save the design and regenerate PDF preview after changes. Preview parameters come from the editor’s values, initially Defaults; values entered in Run apply only to Run jobs. A previous PDF preview does not refresh automatically.
4. Parameters: data for each document
Parameters is on the right. It shows the data the template accepts, such as a customer name, invoice number, or list of services.
Choose Schema to inspect fields, types, and default values. Choose Payload to see the data as JSON. Field names need to match the expressions used in the template’s HTML.
For example, a field named recipient provides the expression {{ params.recipient }} for your HTML. Its default value lives in Schema; data for each PDF is entered in Run.
See Parameters and Props for help deciding which one to use.
5. Run and history
After saving and publishing the template, open Run to choose a key, version, and variant, and enter data to generate a PDF. Follow Create your first PDF when you want to try that workflow.
When looking back at your work, use the template’s history for saved design changes and Renders for PDF jobs and their results. This helps you find either the design version or the generated file you need.
{ "recipient": "Tembuilder" }