Usage Report Template HTML and JSON

This guide is based on the Usage Report template in the Gallery.

It explains a practical flow: template HTML structure, matching JSON payload, and API render request.

Step 1 - Template HTML structure

HTML

<div class="header">
<h1>Usage Report</h1>
<p>{{service_name}} \u2014 {{period}}</p>
</div>
<div class="stats">
<div class="stat">
<h3>Total Requests</h3>
<div class="v">{{total_requests}}</div>
</div>
<div class="stat">
<h3>Avg Response Time</h3>
<div class="v">{{avg_response_time}}</div>
</div>
<div class="stat">
<h3>Uptime</h3>
<div class="v">{{uptime}}</div>
</div>
</div>
<table>
<thead>
<tr>
<th>Date</th>
<th class="r">Requests</th>
<th class="r">Errors</th>
<th class="r">Avg Latency</th>
</tr>
</thead>
<tbody>{{#each daily}}<tr>
<td>{{this.date}}</td>
<td class="r">{{this.requests}}</td>
<td class="r">{{this.errors}}</td>
<td class="r">{{this.latency}}</td>
</tr>{{/each}}</tbody>
</table>
<div class="footer">Report generated {{generated_date}}</div>

Step 2 - Matching JSON payload

JSON

{
  "service_name": "HookPDF API",
  "period": "March 1-7, 2026",
  "total_requests": "24,531",
  "avg_response_time": "142ms",
  "uptime": "99.98%",
  "daily": [
    {
      "date": "Mar 1",
      "requests": "3,421",
      "errors": "2",
      "latency": "138ms"
    },
    {
      "date": "Mar 2",
      "requests": "3,102",
      "errors": "0",
      "latency": "141ms"
    },
    {
      "date": "Mar 3",
      "requests": "3,890",
      "errors": "1",
      "latency": "135ms"
    },
    {
      "date": "Mar 4",
      "requests": "3,654",
      "errors": "3",
      "latency": "148ms"
    },
    {
      "date": "Mar 5",
      "requests": "3,512",
      "errors": "0",
      "latency": "140ms"
    },
    {
      "date": "Mar 6",
      "requests": "3,678",
      "errors": "1",
      "latency": "143ms"
    },
    {
      "date": "Mar 7",
      "requests": "3,274",
      "errors": "0",
      "latency": "139ms"
    }
  ],
  "generated_date": "March 9, 2026"
}

Step 3 - Final rendered preview in page

Rendered output preview Template style preview

Preview uses the original Gallery template HTML and CSS with sample payload values.

Step 4 - Key mapping checklist

{{service_name}} -> service_name
{{period}} -> period
{{total_requests}} -> total_requests
{{avg_response_time}} -> avg_response_time
{{#each daily}} -> daily[]
{{this.date}} -> daily[].date

Step 5 - Render request example

BASH

curl -X POST "https://api.hookpdf.com/v1/render" \
  -H "Authorization: Bearer <api_key>" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "<gallery-usage-report-template_id>",
    "payload": {
      "service_name": "HookPDF API",
      "period": "March 1-7, 2026",
      "total_requests": "24,531",
      "avg_response_time": "142ms",
      "uptime": "99.98%",
      "daily": [
        {
          "date": "Mar 1",
          "requests": "3,421",
          "errors": "2",
          "latency": "138ms"
        },
        {
          "date": "Mar 2",
          "requests": "3,102",
          "errors": "0",
          "latency": "141ms"
        }
      ],
      "generated_date": "March 9, 2026"
    }
  }'

Use this template for free now

Start with this template in HookPDF and render your first PDF for free.

Use this template free

Usage Report Template: HTML + JSON Payload