Monthly Performance Report Template HTML and JSON

This post uses the Monthly Performance Report template from the Gallery.

It is a strong pattern for array-driven content because it combines metric cards and a highlights table.

Step 1 - HTML template for KPI report layout

HTML

<style>
  body {
    font-family: 'Segoe UI', sans-serif;
    padding: 40px;
    color: #2d3436;
    background: #fff;
  }

  .report-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid #00b894;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  .metric-card {
    background: #f8f9fa;
    border-left: 4px solid #00b894;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
  }
</style>

<div class="report-header">
  <h1>{{report_title}}</h1>
  <p>{{company_name}} - {{period}}</p>
</div>

<div class="metrics">
  {{#each metrics}}
  <div class="metric-card">
    <h3>{{this.label}}</h3>
    <div>{{this.value}}</div>
    <small>{{this.change}}</small>
  </div>
  {{/each}}
</div>

<h2>Highlights</h2>
<table>
  <thead>
    <tr>
      <th>Category</th>
      <th>Result</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {{#each highlights}}
    <tr>
      <td>{{this.category}}</td>
      <td>{{this.result}}</td>
      <td>{{this.status}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

Step 2 - JSON payload with array sections

JSON

{
  "report_title": "Monthly Performance Report",
  "company_name": "Acme Corp",
  "period": "February 2026",
  "metrics": [
    { "label": "Revenue", "value": "$142,500", "change": "up 12.3%" },
    { "label": "New Users", "value": "1,847", "change": "up 8.7%" },
    { "label": "Churn Rate", "value": "2.1%", "change": "down 0.4%" },
    { "label": "NPS Score", "value": "72", "change": "up 5pts" }
  ],
  "highlights": [
    { "category": "Sales", "result": "Target exceeded by 15%", "status": "On Track" },
    { "category": "Marketing", "result": "CAC reduced to $42", "status": "Improved" },
    { "category": "Support", "result": "Avg response: 2.1hrs", "status": "Needs Work" }
  ],
  "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 - Why this report pattern is stable

Metric cards are generated from one array key: metrics.
Table rows are generated from one array key: highlights.
You can add or remove rows without touching template HTML.

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": "<monthly_performance_report_template_id>",
    "payload": {
      "report_title": "Monthly Performance Report",
      "company_name": "Acme Corp",
      "period": "February 2026",
      "metrics": [{ "label": "Revenue", "value": "$142,500", "change": "up 12.3%" }],
      "highlights": [{ "category": "Sales", "result": "Target exceeded by 15%", "status": "On Track" }],
      "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

Monthly Performance Report Template: HTML + JSON Payload