Jinja2PDF
German invoice with GiroCode
Line items, net, VAT and gross computed in the template, dates in German format with a due date 14 days out, a SEPA QR code banking apps scan, and a running footer with page numbers. Your code sends the facts; the template owns the layout.
Free plan, no card. You get your own copy in the editor, published and ready for the API.
Rendered result
What this example shows
- The request carries no sums and no tax:
sum('total')adds the lines, and VAT and gross follow frominvoice.vat_rateinside the template. epcQrdraws the GiroCode (EPC QR code) from name, IBAN, BIC, amount and the payment reference as free text, so a banking app fills in the transfer from a scan. For a single one, the GiroCode generator makes the same code in your browser.dateAdd(14, 'days')sets the due date; with the localede-DE,date('dd.MM.yyyy')andmoneyprint24.09.2026and3.760,40 €.- The footer is a Chromium footer template with
pageNumberandtotalPages: “Seite 1 von 1” stays correct when the lines run over several pages. filenamenames the downloadrechnung-2026-0042.pdf. It is taken as written: a template expression in it is not filled in, its braces become_. A program that renders many invoices builds the name from each number itself.
Helpers used
Template folder
<p class="sender">{{ company.name }} · {{ company.street }} · {{ company.city }}</p>
<address class="recipient">
<strong>{{ customer.name }}</strong><br>
{{ customer.street }}<br>
{{ customer.city }}
</address>
<h1>Rechnung {{ invoice.number }}</h1>
<p class="meta">
Datum {{ invoice.date | date('dd.MM.yyyy') }},
fällig am {{ invoice.date | dateAdd(14, 'days') | date('dd.MM.yyyy') }}
</p>
<table class="lines">
<thead>
<tr><th>Leistung</th><th class="num">Menge</th><th class="num">Preis</th><th class="num">Summe</th></tr>
</thead>
<tbody>
{% for line in invoice.lines %}
<tr>
<td>{{ line.description }}</td>
<td class="num">{{ line.qty | number(0) }}</td>
<td class="num">{{ line.price | money }}</td>
<td class="num">{{ line.total | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% set net = invoice.lines | sum('total') %}
{% set vat = net * invoice.vat_rate / 100 %}
<table class="totals">
<tr><td>Netto</td><td class="num">{{ net | money }}</td></tr>
<tr><td>USt. {{ invoice.vat_rate }} %</td><td class="num">{{ vat | money }}</td></tr>
<tr class="grand"><td>Gesamt</td><td class="num">{{ (net + vat) | money }}</td></tr>
</table>
<figure class="pay">
<img src="{{ epcQr({ name: company.name, iban: company.iban, bic: company.bic, amount: net + vat, text: 'Rechnung ' ~ invoice.number }, { size: 110 }) }}" alt="GiroCode">
<figcaption>Mit der Banking-App scannen und bezahlen</figcaption>
</figure>body { font-family: 'Inter', sans-serif; font-size: 9.5pt; color: #1e293b; }
.sender {
display: inline-block;
margin: 10mm 0 3mm;
padding-bottom: 1mm;
border-bottom: 1px solid #cbd5e1;
font-size: 7pt;
color: #64748b;
}
.recipient { font-style: normal; line-height: 1.5; }
h1 { margin: 18mm 0 1mm; font-size: 18pt; color: #312e81; }
.meta { margin: 0 0 8mm; color: #475569; }
table { width: 100%; border-collapse: collapse; }
.lines th {
padding: 2mm 1.5mm;
border-bottom: 1.5px solid #1e293b;
text-align: left;
font-size: 7.5pt;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
.lines td { padding: 2.5mm 1.5mm; border-bottom: 1px solid #e2e8f0; }
.num { text-align: right !important; white-space: nowrap; }
.totals { width: 72mm; margin: 5mm 0 0 auto; }
.totals td { padding: 1.3mm 1.5mm; }
.totals .grand td { border-top: 1.5px solid #1e293b; font-weight: 700; font-size: 11pt; }
.pay { display: flex; align-items: center; gap: 4mm; margin: 14mm 0 0; }
.pay figcaption { max-width: 45mm; font-size: 8pt; color: #475569; }<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"><div style="box-sizing:border-box;width:100%;display:flex;justify-content:space-between;padding:0 18mm;font-size:8px;color:#555">
<span>{{ company.name }} · USt-IdNr. {{ company.vat_id }} · IBAN {{ company.iban }}</span>
<span>Seite <span class="pageNumber"></span> von <span class="totalPages"></span></span>
</div>{
"pdf": {
"metadata": {
"title": "Rechnung {{ invoice.number }}"
}
},
"paper": {
"format": "A4"
},
"margin": {
"top": "20mm",
"right": "18mm",
"bottom": "22mm",
"left": "18mm"
},
"locale": "de-DE",
"timezone": "Europe/Berlin",
"currency": "EUR",
"footer": {
"height": "12mm"
}
}{
"company": {
"name": "Fennlor Studio GmbH",
"street": "Musterstraße 1",
"city": "12345 Musterstadt",
"iban": "DE36000000000000000000",
"bic": "XXXXDEXXXXX",
"vat_id": "DE000000000"
},
"customer": {
"name": "Olvarest GmbH",
"street": "Beispielweg 2",
"city": "54321 Beispielstadt"
},
"invoice": {
"number": "2026-0042",
"date": "2026-09-10",
"vat_rate": 19,
"lines": [
{
"description": "Consulting",
"qty": 8,
"price": 120,
"total": 960
},
{
"description": "Implementation",
"qty": 20,
"price": 110,
"total": 2200
}
]
}
}Render it through the API
Save the sample data as data.json and send it with the template’s name. TypeScript and Python use the SDKs; every other language posts the same JSON to the REST API with its standard library. Renders with a key that starts with ff_test_ are not metered; on the Free plan they carry a small watermark.
jq '{template: "invoice-de", data: ., filename: "rechnung-2026-0042.pdf"}' data.json \
| curl https://api-eu.formfeed.dev/v1/renders \
-H "Authorization: Bearer ff_test_..." \
-H "Content-Type: application/json" \
--data-binary @-import { Formfeed } from '@formfeed/sdk';
import data from './data.json' with { type: 'json' };
const formfeed = new Formfeed({ apiKey: process.env.FORMFEED_API_KEY! });
const render = await formfeed.renders.create({
template: 'invoice-de',
data,
filename: 'rechnung-2026-0042.pdf',
});
console.log(render.status, render.download_url);import json
import os
from formfeed import Formfeed
formfeed = Formfeed(api_key=os.environ["FORMFEED_API_KEY"])
with open("data.json", encoding="utf-8") as file:
data = json.load(file)
render = formfeed.renders.create(
template="invoice-de",
data=data,
filename="rechnung-2026-0042.pdf",
)
print(render.status, render.download_url)<?php
$body = [
'template' => 'invoice-de',
'data' => json_decode(file_get_contents('data.json'), true),
'filename' => 'rechnung-2026-0042.pdf',
];
$curl = curl_init('https://api-eu.formfeed.dev/v1/renders');
curl_setopt_array($curl, [
CURLOPT_POST => true,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
'Authorization: Bearer ' . getenv('FORMFEED_API_KEY'),
'Content-Type: application/json',
],
CURLOPT_POSTFIELDS => json_encode($body),
]);
$render = json_decode(curl_exec($curl), true);
echo $render['status'], ' ', $render['download_url'], PHP_EOL;package main
import (
"bytes"
"encoding/json"
"fmt"
"net/http"
"os"
)
func main() {
data, err := os.ReadFile("data.json")
if err != nil {
panic(err)
}
body, _ := json.Marshal(map[string]any{
"template": "invoice-de",
"data": json.RawMessage(data),
"filename": "rechnung-2026-0042.pdf",
})
request, _ := http.NewRequest("POST", "https://api-eu.formfeed.dev/v1/renders", bytes.NewReader(body))
request.Header.Set("Authorization", "Bearer "+os.Getenv("FORMFEED_API_KEY"))
request.Header.Set("Content-Type", "application/json")
response, err := http.DefaultClient.Do(request)
if err != nil {
panic(err)
}
defer response.Body.Close()
var render struct {
Status string `json:"status"`
DownloadURL string `json:"download_url"`
}
json.NewDecoder(response.Body).Decode(&render)
fmt.Println(render.Status, render.DownloadURL)
}using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;
var body = new
{
template = "invoice-de",
data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
filename = "rechnung-2026-0042.pdf",
};
using var http = new HttpClient();
http.DefaultRequestHeaders.Authorization =
new AuthenticationHeaderValue("Bearer", Environment.GetEnvironmentVariable("FORMFEED_API_KEY"));
var response = await http.PostAsJsonAsync("https://api-eu.formfeed.dev/v1/renders", body);
var render = await response.Content.ReadFromJsonAsync<JsonElement>();
Console.WriteLine($"{render.GetProperty("status")} {render.GetProperty("download_url")}");import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.nio.file.Files;
import java.nio.file.Path;
public class Render {
public static void main(String[] args) throws Exception {
String data = Files.readString(Path.of("data.json"));
String body = """
{
"template": "invoice-de",
"filename": "rechnung-2026-0042.pdf",
"data": %s
}
""".formatted(data);
HttpRequest request = HttpRequest.newBuilder(URI.create("https://api-eu.formfeed.dev/v1/renders"))
.header("Authorization", "Bearer " + System.getenv("FORMFEED_API_KEY"))
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(body))
.build();
HttpResponse<String> response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofString());
System.out.println(response.body()); // status, download_url, page_count, units …
}
}require "json"
require "net/http"
body = {
template: "invoice-de",
data: JSON.parse(File.read("data.json")),
filename: "rechnung-2026-0042.pdf",
}
response = Net::HTTP.post(
URI("https://api-eu.formfeed.dev/v1/renders"),
JSON.generate(body),
"Authorization" => "Bearer #{ENV.fetch("FORMFEED_API_KEY")}",
"Content-Type" => "application/json"
)
render = JSON.parse(response.body)
puts render["status"], render["download_url"]From the blog
- The preview that lies, and the one that doesn't →
A paged preview built on Paged.js fits nine cards on a page where Chromium's PDF fits six. Why, the one rule we changed so the preview breaks where the PDF breaks — and the case no preview can show, because Chromium shrinks the whole PDF.
- GiroCode on invoices: the standard and the pitfalls →
What an EPC QR code (GiroCode) contains, field by field after EPC069-12, which limits apply — and why so many generated codes fail on a check digit, a comma or an umlaut.
Start rendering today
The free plan includes 100 units a month and free test renders. Change plans when you need more.
