The HTML behind it
Monthly report 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: 12px; } </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:114px;width:600px;height:72px;font-size:48px;color:#0b0b0b;font-weight:700;line-height:1.25">Monthly report</div>
<div data-thirds="text" style="left:56px;top:201px;width:650px;height:36px;font-size:23px;color:#575f6d;font-weight:400;line-height:1.25">{{ period }}</div>
<div data-thirds="box" style="left:56px;top:291px;width:210px;height:166px;background:#0a46ff"></div>
<div data-thirds="text" style="left:78px;top:315px;width:166px;height:22px;font-size:12px;color:white;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Revenue</div>
<div data-thirds="text" style="left:78px;top:366px;width:166px;height:65px;font-size:38px;color:white;font-weight:700;line-height:1.25">{{ revenue }}</div>
<div data-thirds="box" style="left:292px;top:291px;width:210px;height:166px;background:#eaf0ff"></div>
<div data-thirds="text" style="left:314px;top:315px;width:166px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">New clients</div>
<div data-thirds="text" style="left:314px;top:366px;width:166px;height:65px;font-size:38px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ clients }}</div>
<div data-thirds="box" style="left:528px;top:291px;width:210px;height:166px;background:#f1f2f4"></div>
<div data-thirds="text" style="left:550px;top:315px;width:166px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Growth</div>
<div data-thirds="text" style="left:550px;top:366px;width:166px;height:65px;font-size:38px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ growth }}</div>
<div data-thirds="text" style="left:56px;top:513px;width:680px;height:36px;font-size:26px;color:#0b0b0b;font-weight:700;line-height:1.25">What went well</div>
<div data-thirds="text" style="left:56px;top:571px;width:680px;height:151px;font-size:22px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ highlights }}</div>
<div data-thirds="box" style="left:56px;top:789px;width:4px;height:177px;background:#0a46ff"></div>
<div data-thirds="text" style="left:80px;top:789px;width:620px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Next month</div>
<div data-thirds="text" style="left:80px;top:831px;width:635px;height:130px;font-size:22px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ next_steps }}</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": "Northline Studio",
"period": "September 2026",
"revenue": "$42,800",
"clients": "18",
"growth": "+24%",
"highlights": "Our new client guide cuts the time from first meeting to first project. Six teams now use the shared template library every week.",
"next_steps": "Launch the new client portal and turn our best project reports into templates."
}