Financial Summary Template HTML and JSON

This guide is based on the Financial Summary 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>Financial Summary</h1>
<span>{{period}}</span>
</div>
<div class="summary-cards">
<div class="card income">
<h3>Total Income</h3>
<div class="val" style="color:#27ae60">{{total_income}}</div>
</div>
<div class="card expense">
<h3>Total Expenses</h3>
<div class="val" style="color:#e74c3c">{{total_expenses}}</div>
</div>
<div class="card net">
<h3>Net Profit</h3>
<div class="val" style="color:#2980b9">{{net_profit}}</div>
</div>
</div>
<h3 style="margin-bottom:12px">Income Breakdown</h3>
<table>
<thead>
<tr>
<th>Source</th>
<th class="r">Amount</th>
<th class="r">% of Total</th>
</tr>
</thead>
<tbody>{{#each income_items}}<tr>
<td>{{this.source}}</td>
<td class="r">{{this.amount}}</td>
<td class="r">{{this.percentage}}</td>
</tr>{{/each}}</tbody>
</table>
<h3 style="margin-bottom:12px">Expense Breakdown</h3>
<table>
<thead>
<tr>
<th>Category</th>
<th class="r">Amount</th>
<th class="r">% of Total</th>
</tr>
</thead>
<tbody>{{#each expense_items}}<tr>
<td>{{this.category}}</td>
<td class="r">{{this.amount}}</td>
<td class="r">{{this.percentage}}</td>
</tr>{{/each}}</tbody>
</table>
<div class="footer">{{company_name}} | {{period}}</div>

Step 2 - Matching JSON payload

JSON

{
  "company_name": "Acme Corp",
  "period": "Q1 2026",
  "total_income": "$485,000",
  "total_expenses": "$312,000",
  "net_profit": "$173,000",
  "income_items": [
    {
      "source": "Product Sales",
      "amount": "$320,000",
      "percentage": "66%"
    },
    {
      "source": "Subscriptions",
      "amount": "$125,000",
      "percentage": "26%"
    },
    {
      "source": "Consulting",
      "amount": "$40,000",
      "percentage": "8%"
    }
  ],
  "expense_items": [
    {
      "category": "Payroll",
      "amount": "$180,000",
      "percentage": "58%"
    },
    {
      "category": "Infrastructure",
      "amount": "$52,000",
      "percentage": "17%"
    },
    {
      "category": "Marketing",
      "amount": "$48,000",
      "percentage": "15%"
    },
    {
      "category": "Operations",
      "amount": "$32,000",
      "percentage": "10%"
    }
  ]
}

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

{{company_name}} -> company_name
{{period}} -> period
{{total_income}} -> total_income
{{total_expenses}} -> total_expenses
{{#each income_items}} -> income_items[]
{{this.source}} -> income_items[].source
{{#each expense_items}} -> expense_items[]
{{this.category}} -> expense_items[].category

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-financial-summary-template_id>",
    "payload": {
      "company_name": "Acme Corp",
      "period": "Q1 2026",
      "total_income": "$485,000",
      "total_expenses": "$312,000",
      "net_profit": "$173,000",
      "income_items": [
        {
          "source": "Product Sales",
          "amount": "$320,000",
          "percentage": "66%"
        },
        {
          "source": "Subscriptions",
          "amount": "$125,000",
          "percentage": "26%"
        }
      ],
      "expense_items": [
        {
          "category": "Payroll",
          "amount": "$180,000",
          "percentage": "58%"
        },
        {
          "category": "Infrastructure",
          "amount": "$52,000",
          "percentage": "17%"
        }
      ]
    }
  }'

Use this template for free now

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

Use this template free

Financial Summary Template: HTML + JSON Payload