Skip to content

Templates

Jump to bottom
Alexander Elchlepp edited this page Feb 22, 2026 · 11 revisions

Templates

This page documents the technical usage of the template editor in Settings → Templates.

Editor Modes

  • Visual Mode: WYSIWYG with toolbar, drag & drop snippets, and other format actions.
  • Code Mode: edit HTML/Twig directly (CodeMirror syntax highlighting + autocomplete).

Important: If you write complex Twig logic in Code Mode and then switch to Visual Mode, code can be removed. Visual Mode only preserves valid HTML structures.

Snippets

  • Snippets are shown in the left panel and can be inserted via drag & drop.
  • Available snippets depend on the selected template type.

Control Attributes for Simple Logic

Simple logic is represented with data-* attributes on HTML elements and transformed to Twig blocks on the backend before rendering.

Repeats

  • data-repeat="collectionPath"
  • data-repeat-as="itemVar"
  • optional: data-repeat-key="keyVar" (for key/value arrays)

Example outside a table:

<span data-repeat="miscPositions" data-repeat-as="position">
  [[ position.description ]]: [[ position.totalPrice ]] €<br>
</span>

Example inside a table:

<tr data-repeat="apartmentPositions" data-repeat-as="position">
  <td>[[ position.startDate|date('d.m.Y') ]]</td>
  <td>[[ position.totalPrice ]] €</td>
</tr>

Conditions

  • data-if="expression"

Example:

<tr data-if="address.company">
  <td>[[ address.company ]]</td>
</tr>

Pseudo-Twig Syntax

The system supports the existing placeholder syntax:

  • [[ ... ]] → expression
  • [% ... %] → block
  • [# ... #] → comment

Example:

[% for reservation in reservations %]
  [[ reservation.booker.lastname ]]
[% endfor %]

Code Mode Autocomplete

  • Autocomplete shows suggestions for variables when you are inside of [[ ]] or by using shortcut ctrl + space
  • Suggestions are type-aware (Entity, Collection, Array, Scalar, Date).
  • Selecting collection suggestions can generate a data-repeat block automatically.
  • date types are inserted with |date("d.m.Y")automatically

Header and Footer

All PDF types provide header/footer snippets (<div class="header">, <div class="footer">). Note: If a template would result in more than one PDF page, you should place the footer at the top of your template otherwise it will be visible only on the last page of the generated PDF.

Template Types

Clone this wiki locally