This guide is based on the Project Proposal 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="cover">
<h1>{{project_title}}</h1>
<h2>{{subtitle}}</h2>
<p>Prepared by {{company_name}} | {{date}}</p>
</div>
<div class="section">
<h3>Executive Summary</h3>
<p>{{executive_summary}}</p>
</div>
<div class="section">
<h3>Scope of Work</h3>
<p>{{scope}}</p>
</div>
<div class="section">
<h3>Timeline</h3>
<table>
<thead>
<tr>
<th>Phase</th>
<th>Deliverables</th>
<th>Duration</th>
</tr>
</thead>
<tbody>{{#each timeline}}<tr>
<td>{{this.phase}}</td>
<td>{{this.deliverables}}</td>
<td>{{this.duration}}</td>
</tr>{{/each}}</tbody>
</table>
</div>
<div class="section">
<h3>Budget</h3>
<table>
<thead>
<tr>
<th>Item</th>
<th class="r">Cost</th>
</tr>
</thead>
<tbody>{{#each budget}}<tr>
<td>{{this.item}}</td>
<td class="r">{{this.cost}}</td>
</tr>{{/each}}<tr class="total-row">
<td>Total</td>
<td class="r">{{total_budget}}</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">{{company_name}} \u2014 Confidential</div>
Step 2 - Matching JSON payload
JSON
{
"project_title": "E-Commerce Platform Redesign",
"subtitle": "Technical Proposal",
"company_name": "DigitalCraft Agency",
"date": "March 2026",
"executive_summary": "We propose a complete redesign of the e-commerce platform focusing on improved user experience, faster load times, and a modern tech stack that will support growth for the next 3-5 years.",
"scope": "Full frontend redesign, API optimization, payment gateway migration, and mobile-responsive implementation.",
"timeline": [
{
"phase": "Discovery & Design",
"deliverables": "User research, wireframes, UI mockups",
"duration": "3 weeks"
},
{
"phase": "Development Sprint 1",
"deliverables": "Core pages, product catalog, cart",
"duration": "4 weeks"
},
{
"phase": "Development Sprint 2",
"deliverables": "Checkout, payments, user accounts",
"duration": "3 weeks"
},
{
"phase": "QA & Launch",
"deliverables": "Testing, staging deploy, go-live",
"duration": "2 weeks"
}
],
"budget": [
{
"item": "Design & UX Research",
"cost": "$12,000"
},
{
"item": "Frontend Development",
"cost": "$28,000"
},
{
"item": "Backend & API",
"cost": "$18,000"
},
{
"item": "QA & DevOps",
"cost": "$7,000"
}
],
"total_budget": "$65,000"
}
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
{{project_title}}->project_title{{subtitle}}->subtitle{{company_name}}->company_name{{date}}->date{{#each timeline}}->timeline[]{{this.phase}}->timeline[].phase{{#each budget}}->budget[]{{this.item}}->budget[].item
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-project-proposal-template_id>",
"payload": {
"project_title": "E-Commerce Platform Redesign",
"subtitle": "Technical Proposal",
"company_name": "DigitalCraft Agency",
"date": "March 2026",
"executive_summary": "We propose a complete redesign of the e-commerce platform focusing on improved user experience, faster load times, and a modern tech stack that will support growth for the next 3-5 years.",
"scope": "Full frontend redesign, API optimization, payment gateway migration, and mobile-responsive implementation.",
"timeline": [
{
"phase": "Discovery & Design",
"deliverables": "User research, wireframes, UI mockups",
"duration": "3 weeks"
},
{
"phase": "Development Sprint 1",
"deliverables": "Core pages, product catalog, cart",
"duration": "4 weeks"
}
]
}
}'
Use this template for free now
Start with this template in HookPDF and render your first PDF for free.
Use this template freeRelated reads
Ready to move from prototype to production?
Create your account and generate your first API-driven PDF with HookPDF.
Get your API key