Field operations / A4
Permit to work PDF template
A time-limited authorisation for hazardous work, with precautions as an initialled checklist, a fire watch requirement and a formal hand back.
When this document is the right one
Work that could start a fire, release stored energy or affect other people is about to happen on a site somebody else is responsible for. A permit is a control, and this document is the evidence that the control was applied.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- Validity as a date and a time window in the header, because a permit that does not expire is not a permit.
- Precautions as individually tickable items rather than a paragraph, since a control that cannot be evidenced item by item was not verified item by item.
- A fire watch requirement with a stated duration after the work stops, because most hot work fires start after the work has finished.
- Three separate signatures: the issuer, the contractor and the fire watch. One signature covering all three is the failure this document exists to prevent.
- A hand back section, so the permit is closed deliberately rather than by the end of the day arriving.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hot work permit HW-2026-0442</title>
<style>
@page { size: A4; margin: 13mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9pt/1.35 Arial, sans-serif; color: #111; }
header { border: 3px solid #111; padding: 4mm;
display: grid; grid-template-columns: 1fr auto; align-items: center; }
h1 { margin: 0; font-size: 17pt; text-transform: uppercase; letter-spacing: 0.05em; }
.validity { border: 2px solid #b3261e; color: #b3261e; padding: 2mm 4mm; text-align: center; }
.validity .k { font-size: 7pt; text-transform: uppercase; letter-spacing: 0.08em; }
.validity .v { font-size: 12pt; font-weight: 700; }
.block { border: 1px solid #999; margin-top: 3mm; break-inside: avoid; }
.block h2 { margin: 0; background: #111; color: #fff; padding: 1.8mm 3mm; font-size: 8pt;
text-transform: uppercase; letter-spacing: 0.08em;
print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.block .inner { padding: 3mm; }
.kv { display: grid; grid-template-columns: 30mm 1fr 26mm 1fr; gap: 1.5mm 3mm; }
.kv .k { color: #555; }
.rule { border-bottom: 1px solid #bbb; min-height: 5mm; }
/* Precautions are a checklist with an initial box rather than a paragraph.
A permit is a control, and a control that cannot be evidenced is not one. */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 6mm; }
.checks label { display: flex; align-items: flex-start; gap: 2mm; font-size: 8.5pt; }
.box { flex: 0 0 auto; width: 4mm; height: 4mm; border: 1.5px solid #111; margin-top: 0.4mm; }
.fire-watch { border: 2px solid #b3261e; padding: 3mm; margin-top: 3mm;
font-size: 8.5pt; break-inside: avoid; }
.fire-watch strong { color: #b3261e; }
.signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm;
margin-top: 3mm; break-inside: avoid; }
.signatures div { border: 1px solid #999; padding: 3mm; }
.signatures .role { font-weight: 700; font-size: 8pt; text-transform: uppercase;
letter-spacing: 0.05em; margin-bottom: 2mm; }
.sigline { border-bottom: 1px solid #111; height: 11mm; margin-bottom: 1.5mm; }
.cap { font-size: 7pt; color: #666; }
</style>
</head>
<body>
<header>
<div>
<h1>Hot work permit</h1>
<div style="margin-top:1mm">Ravenshill Hotel, Bath · permit HW-2026-0442</div>
</div>
<div class="validity">
<div class="k">Valid only</div>
<div class="v">14 May 2026<br>09:00 to 16:00</div>
</div>
</header>
<div class="block">
<h2>1. Work and location</h2>
<div class="inner">
<div class="kv">
<span class="k">Location</span><span>Basement plant room, west end</span>
<span class="k">Equipment</span><span>AHU-03 pipework</span>
<span class="k">Work</span><span>Brazing of two copper joints on the condensate line</span>
<span class="k">Contractor</span><span>Meridian Mechanical Ltd</span>
<span class="k">Operatives</span><span>2</span>
<span class="k">Supervisor</span><span>T. Whelan</span>
</div>
</div>
</div>
<div class="block">
<h2>2. Precautions before work starts</h2>
<div class="inner">
<div class="checks">
<label><span class="box"></span> Combustible material removed to at least 10 metres, or protected by fire blanket</label>
<label><span class="box"></span> Floor swept, no dust or oil residue in the work area</label>
<label><span class="box"></span> Openings, ducts and cable penetrations within 10 metres sealed</label>
<label><span class="box"></span> Detection in the area isolated, and the isolation logged with the duty manager</label>
<label><span class="box"></span> Two extinguishers of the correct type present and in date</label>
<label><span class="box"></span> Nearest call point and exit route identified to both operatives</label>
<label><span class="box"></span> Gas cylinders secured upright, hoses and regulators inspected</label>
<label><span class="box"></span> Adjacent areas checked, including the void above and the room behind</label>
</div>
</div>
</div>
<div class="fire-watch">
<strong>Fire watch.</strong> A fire watch is required during the work and for
<strong>60 minutes</strong> after the last hot work stops. The watch may not be one
of the operatives. The area must be re-inspected once more one hour after the watch
ends, and that inspection recorded in section 4. Most hot work fires start after the
work has finished, which is why this section exists.
</div>
<div class="block">
<h2>3. Authorisation and acceptance</h2>
<div class="inner">
<div class="signatures">
<div>
<div class="role">Issued by</div>
<div class="sigline"></div><div class="cap">Site authorising person, name and signature</div>
<div class="sigline"></div><div class="cap">Date and time</div>
</div>
<div>
<div class="role">Accepted by</div>
<div class="sigline"></div><div class="cap">Contractor supervisor, name and signature</div>
<div class="sigline"></div><div class="cap">Date and time</div>
</div>
<div>
<div class="role">Fire watch</div>
<div class="sigline"></div><div class="cap">Name and signature</div>
<div class="sigline"></div><div class="cap">Watch start and end times</div>
</div>
</div>
</div>
</div>
<div class="block">
<h2>4. Cancellation and hand back</h2>
<div class="inner">
<div class="kv">
<span class="k">Work complete at</span><span class="rule"></span>
<span class="k">Area re-inspected</span><span class="rule"></span>
<span class="k">Detection restored</span><span class="rule"></span>
<span class="k">Permit cancelled by</span><span class="rule"></span>
</div>
<p style="margin:3mm 0 0;font-size:8pt;color:#555">
This permit is void outside the times on it, void if the scope of work changes,
and void if the area is left unattended with hot work in progress. A new permit
is required rather than an extension written on this one.
</p>
</div>
</div>
</body>
</html>The layout decision worth understanding
The validity box is bordered in red in the header, and the fire watch requirement is in a second red-bordered block in the middle of the page. Those two are the parts that get skipped, so they are the two parts that are visually impossible to skip.
The mistake people make adapting it
Extending a permit by writing a new time on it. A permit is issued against a set of conditions verified at a moment; extending it assumes those conditions still hold, and the whole point of the document is not to assume that. A new permit takes ten minutes.
Rendering it
The page box is declared in the template's own CSS as A4, so the size travels with the markup rather than living in the code that calls the renderer. A4 is also one of the six named formats the API accepts, so it can be passed in the request options instead if that suits your setup better.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "format": "A4" }
}' \
--output permit-to-work.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a hot work permit is a A4 document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
Work order HTML template for field service
A job sheet issued to an engineer: the asset, the reported fault, space to record what was done and what parts were used, and two signatures.
Inspection checklist PDF template
A structured pass, fail or not-applicable list grouped by section, with a comment column and an overall verdict.
Incident report HTML template
A factual record of what happened, kept separate from any judgement about why, with corrective actions that have an owner and a date.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
Every template
The full set, grouped by what part of a business produces the document.
A4 page size for PDF generation
A4 is the default page for business documents everywhere except North America, and the default this API uses when no format is given.
Paste the template into the playground and get the PDF back. No signup, no key.