Sections & Variables

A template’s content is an ordered list of sections. Each section:

• has a schemaType — what kind of content it holds: html, table, or canvas;
• has a uiType — which builder tool edits it: visual_editor, code_editor, table_builder, or canvas_builder;
• has an order (starting at 1) — sections render top to bottom in this order;
• has a dataKey — the key in your render data object this section reads from;
• may carry layout properties for PDF flow (height, width, spacing, pageBreakInside: 'avoid', …).

The template itself can also define page margins (top/right/bottom/left, in pixels).

HTML sections

Rich content with {{variable}} placeholders (Handlebars-style), authored in the visual editor or as raw HTML in the code editor:

<h1>Invoice {{invoice_number}}</h1>
<p>Billed to {{customer_name}} on {{date}}</p>

Each HTML section declares a dataSchema describing the variables it uses — type (text, date, number), label, required flag, placeholder. Optional styling controls background, text, heading, and link colors.

Table sections

A typed column definition fed by an array in your render data. Each column has:

A table section with dataKey: "employees" and columns name, role, salary consumes:

{
  "employees": [
    { "name": "Ada Lovelace", "role": "Engineer", "salary": 9000 },
    { "name": "Grace Hopper", "role": "Admiral", "salary": 9500 }
  ]
}

Canvas sections

Free-form, absolutely positioned layout — a fixed-size canvas (px) holding elements of type text, image, table, or spacer, each with x/y/width/height and type-specific props (content supports {{variable}} placeholders, plus font size, bold, color). Best for certificates and badge-style documents where exact positioning matters.

Variables

Variables are the typed contract between a template and your render call:

Every variable has a name (the data key), a label, and a required flag. At render time you pass one flat data object whose keys are variable names / section data keys — the invoice tutorial shows a realistic payload.