This guide is based on the Employment Contract 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">
<div>
<h1>Employment Contract</h1>
<p>{{company_name}}</p>
</div>
<div style="text-align:right">
<p>Contract ID: {{contract_id}}</p>
<p>Date: {{date}}</p>
</div>
</div>
<div class="emp-details">
<div class="emp-field">
<label>Employee Name</label>
<strong>{{employee_name}}</strong>
</div>
<div class="emp-field">
<label>Position</label>{{position}}</div>
<div class="emp-field">
<label>Department</label>{{department}}</div>
<div class="emp-field">
<label>Start Date</label>{{start_date}}</div>
<div class="emp-field">
<label>Employment Type</label>{{employment_type}}</div>
<div class="emp-field">
<label>Reporting To</label>{{reporting_to}}</div>
</div>
<div class="section">
<h2>Compensation</h2>
<p>Base salary: <strong>{{salary}}</strong> per annum, paid {{pay_frequency}}. {{bonus_text}}</p>
</div>
<div class="section">
<h2>Working Hours</h2>
<p>{{working_hours}}</p>
</div>
<div class="section">
<h2>Benefits</h2>
<ul>{{#each benefits}}<li>{{this}}</li>{{/each}}</ul>
</div>
<div class="section">
<h2>Probation Period</h2>
<p>{{probation_text}}</p>
</div>
<div class="sig-grid">
<div class="sig-box">
<div class="line">
</div>
<div class="lbl">Employer \u2014 {{company_name}}</div>
</div>
<div class="sig-box">
<div class="line">
</div>
<div class="lbl">Employee \u2014 {{employee_name}}</div>
</div>
</div>
Step 2 - Matching JSON payload
JSON
{
"company_name": "TechFlow Solutions",
"contract_id": "EC-2026-0089",
"date": "March 15, 2026",
"employee_name": "David Kim",
"position": "Senior Software Engineer",
"department": "Engineering",
"start_date": "April 1, 2026",
"employment_type": "Full-time",
"reporting_to": "Sarah Chen, VP Engineering",
"salary": "$145,000",
"pay_frequency": "bi-weekly",
"bonus_text": "Annual performance bonus up to 15% of base salary.",
"working_hours": "Standard 40-hour work week with flexible scheduling. Remote work permitted 3 days/week.",
"benefits": [
"Health, dental & vision insurance",
"401(k) with 4% employer match",
"20 days PTO + 10 holidays",
"$2,000 annual learning budget",
"Home office stipend ($500)"
],
"probation_text": "The first 90 days of employment shall constitute a probationary period during which either party may terminate this agreement with 2 weeks notice."
}
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{{contract_id}}->contract_id{{date}}->date{{employee_name}}->employee_name{{#each benefits}}->benefits[]
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-employment-contract-template_id>",
"payload": {
"company_name": "TechFlow Solutions",
"contract_id": "EC-2026-0089",
"date": "March 15, 2026",
"employee_name": "David Kim",
"position": "Senior Software Engineer",
"department": "Engineering",
"start_date": "April 1, 2026"
}
}'
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