The HTML behind it
Packing slip template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 794px 1123px; margin: 0; } body { font-family: Arial, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 4px 10px; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" style="width:794px;height:1123px;background:white">
<div data-thirds="text" style="left:56px;top:54px;width:600px;height:22px;font-size:12px;color:#0a46ff;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">{{ business_name }}</div>
<div data-thirds="text" style="left:56px;top:118px;width:680px;height:75px;font-size:50px;color:#0b0b0b;font-weight:700;line-height:1.25">Packing slip</div>
<div data-thirds="text" style="left:56px;top:241px;width:312px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Order number</div>
<div data-thirds="text" style="left:56px;top:270px;width:312px;height:36px;font-size:23px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ order_number }}</div>
<div data-thirds="text" style="left:429px;top:241px;width:309px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Order date</div>
<div data-thirds="text" style="left:429px;top:270px;width:309px;height:36px;font-size:23px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ order_date }}</div>
<div data-thirds="box" style="left:56px;top:357px;width:682px;height:205px;background:#eaf0ff"></div>
<div data-thirds="text" style="left:80px;top:382px;width:632px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Deliver to</div>
<div data-thirds="text" style="left:80px;top:419px;width:632px;height:111px;font-size:23px;color:#0b0b0b;font-weight:400;line-height:1.25"><strong>{{ customer }}</strong><br>{{ address }}</div>
<table data-thirds="table" style="left:56px;top:625px;width:682px;font-size:16px;--head:#eaf0ff"><thead><tr><th>Item</th><th>Quantity</th></tr></thead><tbody>{% for item in items %}<tr><td>{{ item.name }}</td><td>{{ item.quantity }}</td></tr>{% endfor %}</tbody></table>
<div data-thirds="text" style="left:56px;top:965px;width:680px;height:51px;font-size:18px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ note }}</div>
<div data-thirds="box" style="left:56px;top:1044px;width:682px;height:1px;background:#dde1e8"></div>
<div data-thirds="text" style="left:56px;top:1061px;width:682px;height:22px;font-size:12px;color:#575f6d;font-weight:400;line-height:1.25">{{ business_name }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"business_name": "Harbour Goods",
"order_number": "HG-2048",
"order_date": "4 September 2026",
"customer": "Sam Rivera",
"address": "12 Meadow Lane, Bristol, BS1 2AB",
"items": [
{
"name": "Everyday notebook · Ocean blue",
"quantity": 2
},
{
"name": "Weekly planner · Warm grey",
"quantity": 1
}
],
"note": "Thank you for choosing Harbour Goods."
}