HandlebarsPDF

German timesheet (Stundenzettel) with balance and projects

A weekly timesheet in Handlebars: weekdays formatted in German, worked hours summed and set against the target with subtract, and the same entries grouped by project for the summary. Two signature lines stay together at the foot of the page.

Use this template The request in eight languages ↓

Free plan, no card. You get your own copy in the editor, published and ready for the API.

Rendered result

What this example shows

{{date day "EEE, dd.MM."}} prints the weekday in German (Mo., 14.09.) because the template’s locale is de-DE.
The balance is (subtract (sum entries "hours") sheet.target_hours): 40.5 hours worked against 40 gives 0,50 h.
{{#each (groupBy entries "project")}} reuses the same entries for the project summary, with sum items "hours" inside each group.
Start, end and break are shown as they were recorded; the hours per day come from the time tracking system, which knows its own rounding rules.
One batch renders the whole team’s week, with the employee number and the calendar week in each file name.

Helpers used

Template folder

template.html

templates/stundenzettel/template.htmlHandlebars

<header>
  <div>
    <h1>Stundenzettel</h1>
    <p class="muted">Kalenderwoche {{sheet.week}} · {{date sheet.from "dd.MM."}} bis {{date sheet.until "dd.MM.yyyy"}}</p>
  </div>
  <p class="who"><strong>{{employee.name}}</strong><br>Personalnr. {{employee.number}}<br>{{company.name}}</p>
</header>

<table class="lines">
  <thead>
    <tr><th>Tag</th><th>Projekt</th><th>Tätigkeit</th><th class="num">Von</th><th class="num">Bis</th><th class="num">Pause</th><th class="num">Stunden</th></tr>
  </thead>
  <tbody>
    {{#each entries}}
    <tr>
      <td>{{date day "EEE, dd.MM."}}</td>
      <td>{{project}}</td>
      <td>{{task}}</td>
      <td class="num">{{from}}</td>
      <td class="num">{{to}}</td>
      <td class="num">{{break_minutes}} min</td>
      <td class="num">{{number hours 2}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

<table class="totals">
  <tr><td>Gearbeitet</td><td class="num">{{number (sum entries "hours") 2}} h</td></tr>
  <tr><td>Soll</td><td class="num">{{number sheet.target_hours 2}} h</td></tr>
  <tr class="grand"><td>Saldo</td><td class="num">{{number (subtract (sum entries "hours") sheet.target_hours) 2}} h</td></tr>
</table>

<h2>Nach Projekt</h2>
<ul class="projects">
  {{#each (groupBy entries "project")}}
  <li><span>{{key}}</span><strong>{{number (sum items "hours") 2}} h</strong></li>
  {{/each}}
</ul>

<footer>
  <div><span></span>Datum, Unterschrift Mitarbeiter/in</div>
  <div><span></span>Datum, Unterschrift Vorgesetzte/r</div>
</footer>

style.css

templates/stundenzettel/style.cssCSS

body { font-family: 'Inter', sans-serif; font-size: 9.5pt; line-height: 1.45; color: #1e293b; }
.sender {
  display: inline-block;
  margin: 10mm 0 3mm;
  padding-bottom: 1mm;
  border-bottom: 1px solid #cbd5e1;
  font-size: 7pt;
  color: #64748b;
}
.recipient { min-height: 27mm; font-style: normal; line-height: 1.5; }
.facts { float: right; margin-top: -27mm; font-size: 8.5pt; color: #475569; }
.facts td { padding: 0.4mm 0 0.4mm 5mm; }
.facts td:last-child { text-align: right; color: #1e293b; }
h1 { clear: both; margin: 14mm 0 4mm; font-size: 16pt; color: #312e81; }
table.lines { width: 100%; margin-top: 6mm; 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.3mm 1.5mm; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.lines tr { break-inside: avoid; }
.num { text-align: right !important; white-space: nowrap; }
.totals { width: 78mm; margin: 5mm 0 0 auto; border-collapse: collapse; }
.totals td { padding: 1.2mm 1.5mm; }
.totals .grand td { border-top: 1.5px solid #1e293b; font-weight: 700; font-size: 11pt; }
.muted { color: #64748b; }
header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 5mm; border-bottom: 1px solid #e2e8f0; }
h1 { margin: 0; clear: none; }
.muted { margin: 1mm 0 0; }
.who { margin: 0; text-align: right; font-size: 9pt; line-height: 1.5; }
h2 { margin: 10mm 0 2mm; font-size: 11pt; }
.projects { margin: 0; padding: 0; list-style: none; width: 78mm; }
.projects li { display: flex; justify-content: space-between; padding: 1.2mm 0; border-bottom: 1px solid #e2e8f0; }
footer { display: flex; gap: 12mm; margin-top: 22mm; break-inside: avoid; font-size: 8pt; color: #64748b; }
footer div { flex: 1; }
footer span { display: block; margin-bottom: 1.5mm; border-top: 1px solid #1e293b; }

head.html

templates/stundenzettel/head.htmlHTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">

settings.json

templates/stundenzettel/settings.jsonJSON

{
  "pdf": {
    "metadata": {
      "title": "Stundenzettel"
    }
  },
  "paper": {
    "format": "A4"
  },
  "margin": {
    "top": "18mm",
    "right": "18mm",
    "bottom": "18mm",
    "left": "18mm"
  },
  "locale": "de-DE",
  "timezone": "Europe/Berlin"
}

data.json

templates/stundenzettel/data/default.jsonJSON

{
  "company": {
    "name": "Fennlor Studio GmbH",
    "street": "Musterstraße 1",
    "city": "12345 Musterstadt",
    "phone": "+49 000 0000000",
    "email": "hallo@fennlor.example",
    "iban": "DE36000000000000000000",
    "bic": "XXXXDEXXXXX",
    "vat_id": "DE000000000",
    "register": "Amtsgericht Musterstadt, HRB 00000",
    "director": "Erika Mustermann"
  },
  "employee": {
    "name": "Max Mustermann",
    "number": "E-0417"
  },
  "sheet": {
    "week": 38,
    "from": "2026-09-14",
    "until": "2026-09-18",
    "target_hours": 40
  },
  "entries": [
    {
      "day": "2026-09-14",
      "project": "Kundenportal",
      "task": "Rendering-Pipeline",
      "from": "08:30",
      "to": "17:30",
      "break_minutes": 45,
      "hours": 8.25
    },
    {
      "day": "2026-09-15",
      "project": "Kundenportal",
      "task": "Review und Tests",
      "from": "08:30",
      "to": "17:00",
      "break_minutes": 30,
      "hours": 8
    },
    {
      "day": "2026-09-16",
      "project": "Intern",
      "task": "Teamtag",
      "from": "09:00",
      "to": "16:30",
      "break_minutes": 60,
      "hours": 6.5
    },
    {
      "day": "2026-09-17",
      "project": "Kundenportal",
      "task": "Release",
      "from": "08:00",
      "to": "18:30",
      "break_minutes": 45,
      "hours": 9.75
    },
    {
      "day": "2026-09-18",
      "project": "Wartung",
      "task": "Updates und Monitoring",
      "from": "08:30",
      "to": "17:00",
      "break_minutes": 30,
      "hours": 8
    }
  ]
}

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.

curl

render.shShell

jq '{template: "stundenzettel", data: ., filename: "stundenzettel-E-0417-kw38.pdf"}' data.json \
  | curl https://api-eu.formfeed.dev/v1/renders \
      -H "Authorization: Bearer ff_test_..." \
      -H "Content-Type: application/json" \
      --data-binary @-

TypeScript

render.tsTypeScript

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: 'stundenzettel',
  data,
  filename: 'stundenzettel-E-0417-kw38.pdf',
});
console.log(render.status, render.download_url);

Python

render.pyPython

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="stundenzettel",
    data=data,
    filename="stundenzettel-E-0417-kw38.pdf",
)
print(render.status, render.download_url)

PHP

render.phpPHP

<?php
$body = [
    'template' => 'stundenzettel',
    'data' => json_decode(file_get_contents('data.json'), true),
    'filename' => 'stundenzettel-E-0417-kw38.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;

main.goGo

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": "stundenzettel",
		"data":     json.RawMessage(data),
		"filename": "stundenzettel-E-0417-kw38.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)
}

Program.csC#

using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;

var body = new
{
    template = "stundenzettel",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    filename = "stundenzettel-E-0417-kw38.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")}");

Java

Render.javaJava

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": "stundenzettel",
          "filename": "stundenzettel-E-0417-kw38.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 …
  }
}

Ruby

render.rbRuby

require "json"
require "net/http"

body = {
  template: "stundenzettel",
  data: JSON.parse(File.read("data.json")),
  filename: "stundenzettel-E-0417-kw38.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"]

More ways to call it

Batch

TypeScript

// the whole team's week as one job
const job = await formfeed.renders.batch({
  template: 'stundenzettel',
  zip: true,
  items: team.map(({ employee, entries }) => ({
    data: { company, employee, sheet, entries },
    filename: `stundenzettel-${employee.number}-kw${sheet.week}.pdf`,
  })),
});

Start rendering today

The free plan includes 100 units a month and free test renders. Change plans when you need more.

Use this template Read the docs