Gallery templates

Project Proposal Template: HTML + JSON Payload

Learn the Project Proposal gallery template with practical HTML structure and matching JSON payload for HookPDF API rendering.

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 free

Related reads

Ready to move from prototype to production?

Create your account and generate your first API-driven PDF with HookPDF.

Get your API key