Branding

Logo, Markenfarben und Typografie in BlockTemplate. Statt Farbwerte und Schriftgrößen in jedem Block zu wiederholen, definierst du Design-Tokens einmal in page und referenzierst sie — ein Wertewechsel aktualisiert die gesamte Vorlage.

Farb- und Typo-Tokens fließen in eine Rechnung

Logo

image-Block mit src (URL, Base64 oder Platzhalter). fit: [breite, höhe] skaliert proportional in die Box.

Farben

colorScheme definiert benannte Tokens. Blöcke referenzieren sie via { token: '…' } — ein Wert ändert alle Stellen.

Schriften

defaultFont setzt die Standardfamilie. fontSizes-Tokens halten die Typo-Skala konsistent (body, heading, small, total).

Logo einbinden

Als image-Block mit URL, Base64-Data-URI oder Platzhalter. fit skaliert proportional in eine Zielbox, ohne das Seitenverhältnis zu verzerren.

json

1{
2  "type": "image",
3  "data": {
4    "src": "https://cdn.example.com/logo.png",
5    "fit": [120, 60],
6    "alignment": "right"
7  }
8}
9// Alternativ: Base64 Data URI für garantierte Offline-Renderfähigkeit
10// "src": "data:image/png;base64,iVBORw0KGgoAAAANS..."

Design-Tokens definieren

page.colorScheme und page.fontSizes halten benannte Werte. Namen sind frei wählbar — bewährt haben sich semantische Tokens wie primaryColor oder headingSize.

json

1{
2  "page": {
3    "size": "A4",
4    "margins": { "top": 40, "right": 40, "bottom": 40, "left": 40 },
5    "colorScheme": {
6      "primaryColor": "#4f46e5",
7      "accentColor":  "#8b5cf6",
8      "textColor":    "#111111",
9      "mutedColor":   "#6b7280",
10      "lineColor":    "#e5e7eb"
11    },
12    "fontSizes": {
13      "bodySize":    10,
14      "smallSize":    8,
15      "headingSize": 18,
16      "totalSize":   12
17    }
18  }
19}

Tokens referenzieren

Überall, wo ein Block einen Farb- oder Größenwert erwartet, kannst du stattdessen { token: '…' } übergeben.

json

1{
2  "type": "text",
3  "data": {
4    "content": "RECHNUNG {{invoiceNumber}}",
5    "fontSize": { "token": "headingSize" },
6    "color":    { "token": "primaryColor" },
7    "bold": true
8  }
9}
10 
11{
12  "type": "table",
13  "data": {
14    "dataSource": "{{items}}",
15    "headerFillColor": { "token": "primaryColor" },
16    "headerTextColor": "#FFFFFF",
17    "fontSize":        { "token": "bodySize" },
18    "columns": [ /* ... */ ]
19  }
20}

Benannte Styles für wiederkehrende Elemente

Das styles-Objekt bündelt Font-, Farb- und Margin-Presets. Blöcke verweisen per style-Property darauf. Design-Tokens sind auch hier erlaubt.

json

1{
2  "styles": {
3    "h1": { "fontSize": 22, "bold": true, "color": { "token": "primaryColor" } },
4    "h2": { "fontSize": 14, "bold": true, "margin": [0, 0, 0, 6] },
5    "muted": { "color": { "token": "mutedColor" } },
6    "total": { "fontSize": 14, "bold": true, "alignment": "right" }
7  }
8}
9 
10// Blöcke referenzieren Styles per Name:
11{ "type": "text", "data": { "content": "RECHNUNG", "style": "h1" } }

Header & Footer

header und footer sind optional und haben unterschiedliche Vorgaben: header.repeatOnAllPages ist ohne Angabe true, footer.repeatOnAllPages ohne Angabe false. Steht der Wert auf false, wandert der Abschnitt in den Textfluss und erscheint damit am Anfang (Header) bzw. am Ende des Inhalts (Footer) — nicht auf der letzten Seite. Beide akzeptieren dieselben 17 Block-Typen wie body.

json

1{
2  "header": {
3    "height": 80,
4    "repeatOnAllPages": true,
5    "blocks": [
6      {
7        "type": "columns",
8        "data": {
9          "columns": [
10            { "width": "*", "blocks": [
11              { "type": "text", "data": { "content": "{{seller.name}}", "style": "h2" } }
12            ]},
13            { "width": "auto", "blocks": [
14              { "type": "image", "data": { "src": "https://cdn.example.com/logo.png", "fit": [120, 60] } }
15            ]}
16          ]
17        }
18      }
19    ]
20  },
21  "footer": {
22    "repeatOnAllPages": true,
23    "blocks": [
24      { "type": "line", "data": { "thickness": 0.5, "color": { "token": "lineColor" } } },
25      { "type": "text", "data": {
26          "content": "{{seller.name}} • USt-IdNr. {{seller.vatId}} • {{seller.email?}}",
27          "fontSize": { "token": "smallSize" },
28          "color": { "token": "mutedColor" },
29          "alignment": "center"
30      }}
31    ]
32  }
33}