Price List Template HTML and JSON

This guide is based on the Price List 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>{{company_name}}</h1>
<p>{{subtitle}} | Effective {{effective_date}}</p>
</div>{{#each categories}}<div class="category">
<h2>{{this.name}}</h2>
<table>
<thead>
<tr>
<th>Service / Product</th>
<th>Description</th>
<th class="r">Price</th>
</tr>
</thead>
<tbody>{{#each this.items}}<tr>
<td>
<strong>{{this.name}}</strong>
</td>
<td>{{this.description}}</td>
<td class="r">{{this.price}}</td>
</tr>{{/each}}</tbody>
</table>
</div>{{/each}}<div class="footer">
<p class="note">{{disclaimer}}</p>
<p style="margin-top:8px">{{company_name}} | {{phone}} | {{email}}</p>
</div>

Step 2 - Matching JSON payload

JSON

{
  "company_name": "ProDesign Studio",
  "subtitle": "Service Price List",
  "effective_date": "March 2026",
  "categories": [
    {
      "name": "Design Services",
      "items": [
        {
          "name": "Logo Design",
          "description": "3 concepts, 2 revisions",
          "price": "$500"
        },
        {
          "name": "Brand Identity",
          "description": "Full brand kit with guidelines",
          "price": "$2,500"
        },
        {
          "name": "UI/UX Design",
          "description": "Per screen, includes prototype",
          "price": "$300/screen"
        }
      ]
    },
    {
      "name": "Development",
      "items": [
        {
          "name": "Landing Page",
          "description": "Responsive single page",
          "price": "$1,200"
        },
        {
          "name": "Web Application",
          "description": "Custom development, per sprint",
          "price": "$8,000/sprint"
        },
        {
          "name": "API Integration",
          "description": "Third-party service integration",
          "price": "$1,500"
        }
      ]
    }
  ],
  "disclaimer": "All prices are in USD and exclude applicable taxes. Prices subject to change.",
  "phone": "(555) 123-4567",
  "email": "hello@prodesign.studio"
}

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
{{subtitle}} -> subtitle
{{effective_date}} -> effective_date
{{disclaimer}} -> disclaimer
{{#each categories}} -> categories[]
{{this.name}} -> categories[].name

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-price-list-template_id>",
    "payload": {
      "company_name": "ProDesign Studio",
      "subtitle": "Service Price List",
      "effective_date": "March 2026",
      "categories": [
        {
          "name": "Design Services",
          "items": [
            {
              "name": "Logo Design",
              "description": "3 concepts, 2 revisions",
              "price": "$500"
            },
            {
              "name": "Brand Identity",
              "description": "Full brand kit with guidelines",
              "price": "$2,500"
            },
            {
              "name": "UI/UX Design",
              "description": "Per screen, includes prototype",
              "price": "$300/screen"
            }
          ]
        },
        {
          "name": "Development",
          "items": [
            {
              "name": "Landing Page",
              "description": "Responsive single page",
              "price": "$1,200"
            },
            {
              "name": "Web Application",
              "description": "Custom development, per sprint",
              "price": "$8,000/sprint"
            },
            {
              "name": "API Integration",
              "description": "Third-party service integration",
              "price": "$1,500"
            }
          ]
        }
      ],
      "disclaimer": "All prices are in USD and exclude applicable taxes. Prices subject to change.",
      "phone": "(555) 123-4567",
      "email": "hello@prodesign.studio"
    }
  }'

Use this template for free now

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

Use this template free

Price List Template: HTML + JSON Payload