Gallery templates

Employment Contract Template: HTML + JSON Payload

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

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 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