Certificate template, HTML and Handlebars
A certificate of completion with the learner’s name, the course and a QR code anyone can scan to verify it.
Free to copy. Send it from your app with POST /v1/pdfs/render and the slug certificate.
Template source
<div class="page">
<div class="cert">
<p class="muted">CERTIFICATE OF COMPLETION</p>
<h1 class="who">{{learner.name}}</h1>
<p>has completed <strong>{{course.name}}</strong> with {{course.result}}.</p>
<p class="muted">Issued {{formatDate issued "DD MMM YYYY"}} · ID {{certificate_id}}</p>
<img src="{{qr verify_url}}" width="96" height="96" alt="Scan to verify">
</div>
</div>
<style>
@page { size: A4; margin: 18mm; }
body { font-family: Arial, Helvetica, sans-serif; color: #17181c; font-size: 12px; }
h1 { font-size: 22px; letter-spacing: 2px; margin: 0; }
.muted { color: #5a5c63; }
.head { display: flex; justify-content: space-between; margin-bottom: 24px; }
table.items { width: 100%; border-collapse: collapse; margin-top: 16px; }
table.items th { text-align: left; font-weight: normal; color: #5a5c63; border-bottom: 1.5px solid #17181c; padding: 6px 0; }
table.items td { padding: 8px 0; border-bottom: 1px solid #ece9e2; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.total { margin-top: 12px; text-align: right; font-size: 15px; font-weight: bold; }
@page { size: A4 landscape; margin: 16mm; }
.cert { text-align: center; padding-top: 30mm; }
.who { font-size: 34px; letter-spacing: 0; margin: 12px 0; }
</style>Sample data (JSON)
{
"learner": {
"name": "Aarav Sharma"
},
"course": {
"name": "Food Safety Essentials",
"result": "distinction"
},
"issued": "2026-09-28",
"certificate_id": "CERT-4471-KF",
"verify_url": "https://verify.example.com/CERT-4471-KF"
}