Overview
The PDF Builder is the visual editor for your report's PDF output. You drag components onto a canvas, bind them to your form's data, style them with a built-in CSS editor, and watch the live preview update as you work.
Building a template
From the Components tab in the left sidebar, drag an element (Heading, Text, Table, Container, etc.) onto the canvas. It renders immediately at the drop location.
Switch to the Data tab to see the report-data fields available for this form. Drag a field onto an element to bind it — the element is linked to that field by its key and fills with real report data in the final PDF.
Use the Layout tab to navigate the document tree: click a node to select it on the canvas, or use the tree to nest and reorder elements.
Use the Preview view at any time to see the full rendered output — page breaks, running headers and footers, and total page count, exactly as the generated PDF will appear.
Keeping your PDF output in sync with your form
The PDF Builder binds each element to an input field by the field's key (not by its label). The key comes from the field in the Input Builder.
⚠️ The Input Builder and PDF Builder don't sync automatically. If you change your form, you must update the PDF output to match — there's no warning when a referenced field no longer exists.
When you edit fields in the Input Builder, update the PDF Builder accordingly:
Renamed a field's key — update every reference to that field in the PDF output to the new key, or the element will render blank.
Removed a field — remove or repoint any PDF elements that referenced it.
Added a field — add a matching element in the PDF output if you want the new field to appear.
To find the correct key, open the Data tab, which lists the form's fields by their keys. After any change, use Preview to confirm every field still renders with real data.
Styling elements with the CSS Editor
Click any element on the canvas (or in the Layout tree) to open the CSS Editor panel on the right:
The breadcrumb at the top shows the element's ancestor path (for example
div › section › article › h1); click any segment to jump selection up the tree.The element's tag, ID, and classes are listed below the breadcrumb.
Text Content edits the element's text inline.
Conditional Statement drives behavior from data: Display if (show the element only when a condition is met), Conditional color, and Repeat for each (repeat the element for every item in a list — for example one row per deficiency).
Add directive covers advanced bindings the built-in cards don't.
Grouped property editors show each computed value with an override input. The canvas updates in real time as you type.
Use Duplicate Element or Delete Element (with confirmation) as needed; close the editor with × or Esc.
Page settings
Open the Settings tab in the left sidebar to control the page itself:
Page Size — A4, A3, A5, Letter, Legal, Tabloid, or Custom (Custom reveals Width/Height inputs in millimeters).
Orientation — Portrait or Landscape; the canvas and ruler swap immediately.
Margins (mm) — four inputs around the page icon (Top, Right, Bottom, Left).
Header & Footer — toggle whether the running header/footer appears on the first page, so a cover page can omit them.
Display Options — editing aids: Absolute positioning, Show All Layers, Show All V-Statements.
All settings persist with the template and apply to the full Preview render and the generated PDF.
Saving
Changes save automatically after a short pause — the save indicator shows Saved, Unsaved, or Saving. You can also save manually, which creates a version you can restore later (see Using Template Version History).
FAQ
Q: My preview looks different from what I expected — why?
A: The preview renders using the sample record shown in the Report Data view. If a bound field is empty in the sample data, the corresponding element may render blank.
Q: I edited my form and now part of the PDF is blank — why?
A: The PDF Builder references input fields by their key, and the two builders don't sync automatically. If you renamed or removed a field in the Input Builder, the PDF element still points at the old key and renders blank. Update the reference to match the field's current key — use the Data tab to find it — then check Preview.
Q: Can I get more control than the visual editor offers?
A: Yes — switch to the Code view to edit the template's HTML and CSS directly. See Editing Templates with HTML & CSS (Code Mode).
Related Articles