Bausteine

Das Panel Bausteine im Editor fügt fertige Teile eines Dokuments ein: einen Briefkopf, eine Rechnungstabelle, Zahlungsbedingungen, eine Fußzeile. Jeder Baustein ist in der Sprache der Vorlage geschrieben (Jinja2, Liquid oder Handlebars). Was Sie einfügen, ist also gewöhnlicher Vorlagen-Code, den Sie wie alles andere ändern können.

Das Panel öffnen

Wählen Sie Bausteine in der Tab-Leiste über dem Code. Das Panel öffnet sich neben dem Code und bleibt beim nächsten Besuch im selben Browser geöffnet.

• Suche: Jedes eingegebene Wort wird mit Name und Beschreibung abgeglichen, ohne Rücksicht auf Groß- und Kleinschreibung und Akzente. Enter fügt das erste Ergebnis ein, Esc schließt das Panel, die Pfeiltasten bewegen sich durch die Liste.
• Vorschau: Der Baustein unter dem Mauszeiger wird unten im Panel mit seinen eigenen Beispieldaten, den Spracheinstellungen der Vorlage sowie dem Brand Kit und den Schriften Ihrer Organisation gerendert. Die Zeile unter der Vorschau sagt, wohin der Baustein kommt und was er ergänzt.
• Befehlspalette: Jeder Baustein ist auch ein Befehl. Drücken Sie Ctrl+K (⌘K auf einem Mac) und tippen Sie „Baustein einfügen“.

In einer Bildvorlage lässt das Panel die Bausteine weg, die nur in einem PDF sinnvoll sind: die beiden Fußzeilen, Zusammenhalten, Seitenumbruch, das Deckblatt und das Anschriftfeld für Fensterumschläge.

Was beim Einfügen passiert

• Code: Der Baustein kommt an die Cursorposition im Tab Vorlage. Fußzeilen-Bausteine kommen in den Tab Fußzeile. Ist der Tab Kopfzeile oder Fußzeile geöffnet, kommen auch andere Bausteine dorthin; ist der Tab CSS oder Head geöffnet, kommen sie in den Tab Vorlage.
• Beispieldaten: Die Felder, die der Baustein liest, werden dem angezeigten Datensatz hinzugefügt, ohne vorhandene Werte zu ändern. Beispieldaten speisen nur die Vorschau und die Vervollständigung: Ein API-Rendering nutzt die Daten der Anfrage, senden Sie diese Felder also aus Ihrer Integration. Ein Feld, das die Anfrage auslässt, erscheint als leerer Text, außer einem Datum: Die Bausteine formatieren Datumsangaben mit dem Helfer date, der bei einem fehlenden Wert das heutige Datum ausgibt.
• CSS: Die Regeln des Bausteins kommen in den Tab CSS, aber nur für Selektoren, die Ihr Stylesheet noch nicht definiert. Eine eigene Regel für .ff-lines bleibt deshalb, wie sie ist. Farben und Überschriftenschriften lesen die Variablen des Brand Kits (var(--brand-color-primary, #222)), mit einem neutralen Ersatzwert, wenn das Kit leer ist.
• Übersetzungen: Beschriftungen wie Tabellenüberschriften oder „Seite 1 von 2“ sind Aufrufe von t. Die Bausteine bringen ihre Beschriftungen auf Englisch und Deutsch mit: Die englischen Texte kommen immer ins Panel Übersetzungen, die deutschen, wenn die Locale der Vorlage deutsch ist oder die Vorlage schon ein deutsches Wörterbuch hat. Für eine andere Sprache ergänzen Sie die Schlüssel im Panel selbst; bis dahin gibt t den englischen Text aus. Vorhandene Schlüssel werden nicht überschrieben. Ändern Sie eine Beschriftung also dort: Fügen Sie den Baustein erneut ein, bleibt Ihr Text erhalten.

Kopf- und Fußzeilen-Bausteine tragen ihre Stile inline, weil Chromium Kopf- und Fußzeile ohne das Stylesheet der Vorlage rendert.

Die Bausteine

Brief

Baustein	Gelesene Daten	Hinweise
Briefkopf	brand.logo.primary, brand.name	Das primäre Logo aus dem Brand Kit, ohne Logo der Name der Organisation.
Anschriftfeld für Fensterumschläge	company.name, company.street, company.zip, company.city; customer.name, customer.street, customer.zip, customer.city	Rücksendeangabe und Empfänger in einem 85 × 45 mm großen Feld. Nur PDF; siehe unten.
Informationsblock	customer.number, invoice.number, invoice.date	Kundennummer, Rechnungsnummer und Datum als rechtsbündige Tabelle.
Adressblock	customer.name, customer.street, customer.zip, customer.city, customer.country	Empfängeranschrift ohne feste Größe.
Unterschriftszeile	signature.place, signature.date, signature.name	Eine Linie mit Ort, Datum und Name darunter.

Rechnung und Zahlung

Baustein	Gelesene Daten	Hinweise
Rechnungsüberschrift	invoice.number, invoice.period_start, invoice.period_end	„Rechnung 2026-0042“ und der Leistungszeitraum.
Rechnungstabelle	invoice.lines[] mit description, qty, price, total	Beträge werden mit money in der Währung der Vorlage formatiert.
Summenblock	invoice.net, invoice.vat_rate, invoice.vat, invoice.total	Netto, USt. und Gesamtbetrag, rechtsbündig.
Zahlungsbedingungen und Bankverbindung	payment.amount, payment.name, payment.iban, payment.bic, payment.reference, invoice.due_date	„Bitte überweisen Sie … bis zum …“ und das Konto. Nutzt dasselbe Objekt payment wie der QR-Code.
SEPA-Zahlungs-QR-Code	payment.name, payment.iban, payment.bic, payment.amount, payment.reference	Ein GiroCode, den Banking-Apps scannen, um die Überweisung auszufüllen; siehe epcQr.
Hinweis Kleinunternehmer	keine	„Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.“
Hinweis Reverse Charge	customer.vat_id	Für Geschäftskunden in anderen EU-Ländern: Der Leistungsempfänger schuldet die Umsatzsteuer.

Seite und Layout

Baustein	Gelesene Daten	Hinweise
Fußzeile mit Seitenzahlen	company.name, company.email	Kommt in den Tab Fußzeile. Nur PDF.
Rechtlicher Fußtext	brand.legal_footer	Der rechtliche Fußtext aus dem Brand Kit, zentriert, im Tab Fußzeile. Nur PDF.
Zweispaltiges Layout	keine	Zwei gleich breite Spalten, die auch im Druck nebeneinander bleiben. Der Cursor steht zuerst in der ersten Spalte.
Zusammenhalten	keine	Der Inhalt wird nie auf zwei Seiten verteilt. Nur PDF.
Seitenumbruch	keine	Beginnt eine neue Seite. Nur PDF.

Bericht

Baustein	Gelesene Daten	Hinweise
Deckblatt	report.title, report.subtitle, report.date	Titelseite mit anschließendem Seitenumbruch. Nur PDF.
Diagramm	sales.labels, sales.values, sales.caption	Ein Balkendiagramm in der primären Farbe des Brand Kits. Nach dem Einfügen ist der Typ markiert, tippen Sie also line, pie oder doughnut darüber; siehe Diagramme aus einfachen Daten.
Kennzahlen	report.kpis[] mit label, value, change	Eine Reihe Karten, eine je Kennzahl.

Diagramme aus einfachen Daten

Der Helper chart zeichnet aus einfachen Daten. Ihre Integration sendet also Zahlen und keine Chart.js-Konfiguration:

{
  "sales": {
    "caption": "Umsatz je Quartal",
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "values": [12000, 15500, 14200, 18900]
  }
}

Für mehrere Linien oder Balkengruppen senden Sie series statt values, jede mit einem label und optional einer color:

{
  "sales": {
    "labels": ["Q1", "Q2"],
    "series": [
      { "label": "2025", "values": [9800, 11200] },
      { "label": "2026", "values": [12000, 15500] }
    ]
  }
}

• Werte werden als Zahlen gelesen; alles andere lässt eine Lücke.
• Eine Reihe ohne Farbe nimmt die nächste Farbe einer festen Palette; der Baustein übergibt für eine einzelne Reihe die primäre Farbe des Brand Kits. Jedes Segment eines Kreis- oder Ringdiagramms bekommt seine eigene Farbe, oder eine aus einer Liste, die Sie als color übergeben.
• Eine einzelne Balken- oder Linienreihe ohne label zeigt keine Legende; ein Kreis- oder Ringdiagramm behält seine Legende, die die Segmente benennt. Eine vollständige Chart.js-Konfiguration in data und options funktioniert weiterhin und hat Vorrang vor den einfachen Feldern.
• Das Diagramm ist 480 × 240 Pixel groß, solange Sie width und height nicht übergeben, und alt gibt ihm eine Beschreibung, die ein Screenreader vorliest; siehe chart.

Deutsche Rechnungen und Briefe

Anschriftfeld für Fensterumschläge

Der Baustein hat die Größe des Anschriftfelds eines Fensterumschlags nach DIN 5008, 85 × 45 mm, mit der Rücksendeangabe in den ersten 5 mm. Er positioniert sich nicht selbst auf der Seite: In Form B beginnt das Feld 45 mm unter der Oberkante und 20 mm vom linken Rand. Setzen Sie den Baustein an den Anfang der Vorlage und stellen Sie die Seitenränder unter Seiteneinrichtung so ein, dass er dort landet, etwa 45 mm oben und 20 mm links, oder geben Sie .ff-window im Tab CSS einen oberen Abstand.

Informationsblock neben der Anschrift

Allein beginnt der Informationsblock unter der Anschrift. Damit er rechts neben der Anschrift steht, fügen Sie zuerst Zweispaltiges Layout ein und dann in jede Spalte einen Baustein:

<div class="ff-columns">
  <div><!-- Anschriftfeld für Fensterumschläge --></div>
  <div><!-- Informationsblock --></div>
</div>

Umsatzsteuer-Hinweise

Der Hinweis Kleinunternehmer und der Hinweis Reverse Charge enthalten übliche Standardformulierungen. Ob und wie Sie den Hinweis angeben müssen, hängt von Ihrer Situation ab; prüfen Sie den Text deshalb mit Ihrer Steuerberatung. Ändern können Sie ihn im Panel Übersetzungen (vat.small_business, vat.reverse_charge, vat.customer_id), ohne den Code der Vorlage anzufassen.

Datum und Beträge folgen in allen Bausteinen der Locale und Währung der Vorlage aus Seiteneinrichtung, mit de-DE etwa 13.10.2026 und 3.760,40 €.

Partials der Organisation

Die letzte Gruppe des Panels zeigt die geteilten Partials Ihrer Organisation, die für die Sprache der Vorlage geschrieben sind. Beim Einfügen wird die Include-Zeile geschrieben ({% include 'letterhead' %} in Jinja2 und Liquid, {{> letterhead}} in Handlebars), nicht der Code kopiert. Spätere Änderungen am Partial erreichen die Vorlage also. Seine Vorschau nutzt den angezeigten Datensatz sowie CSS und Übersetzungen der Vorlage, weil ein Partial keine eigenen Beispieldaten hat.

Ein geteiltes Partial fehlt in der Liste, wenn die Version der Vorlage ein Partial mit demselben Namen hat: Dieses würde beim Include gewinnen. Siehe wie ein Name aufgelöst wird.