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. Mit repeatOnAllPages: true erscheinen sie auf jeder Seite; andernfalls nur auf der letzten. Beide akzeptieren dieselben 9 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}