Legal and awards / A4
Tenancy agreement HTML template
A residential letting agreement with the particulars in a grid at the top, obligations on both sides, and an execution block on its own page.
When this document is the right one
A property is let to a tenant. The document is signed once and then consulted repeatedly, usually in a hurry and usually about one specific number, which is what decides its layout.
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.
- The particulars as a grid at the very top: parties, property, term, rent, deposit. Those are what a tenant, an agent and a court all look at first.
- A statement that statutory rights are not reduced, because a clause that conflicts with them is void and pretending otherwise misleads the tenant.
- Obligations on both sides, in that order, since an agreement listing only the tenant's obligations reads as one and is weaker for it.
- Deposit handling set apart, because protection deadlines carry penalties and the deposit is the most common source of dispute at the end.
- An access clause naming the notice period, which is the second most common dispute during the tenancy.
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>Assured shorthold tenancy agreement</title>
<style>
@page { size: A4; margin: 22mm 20mm 24mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 10pt/1.6 "Times New Roman", Times, serif; color: #111;
counter-reset: clause; }
h1 { text-align: center; font-size: 14pt; text-transform: uppercase;
letter-spacing: 0.05em; margin: 0 0 6mm; }
/* The particulars are what a tenant, a letting agent and a court all look at
first. Putting them in a grid at the top rather than in the clauses is the
single most useful thing this template does. */
.particulars { border: 1.5px solid #111; padding: 5mm; margin-bottom: 7mm;
break-inside: avoid; }
.particulars dl { display: grid; grid-template-columns: 44mm 1fr; gap: 2.5mm 5mm;
margin: 0; font: 9.5pt/1.45 Arial, sans-serif; }
.particulars dt { color: #555; }
.particulars dd { margin: 0; }
h2 { font: 700 10.5pt/1.4 Arial, sans-serif; margin: 6mm 0 2mm; break-after: avoid; }
h2::before { counter-increment: clause; content: counter(clause) ". "; color: #555; }
p { margin: 0 0 3mm; }
ol { padding-left: 6mm; margin: 0 0 3mm; }
li { margin-bottom: 2mm; }
.deposit-note { border-left: 3px solid #111; padding: 2mm 0 2mm 5mm; margin: 4mm 0;
font-size: 9.5pt; break-inside: avoid; }
.execution { break-before: page; break-inside: avoid; }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 8mm; }
.sig-grid .line { border-bottom: 1px solid #111; height: 15mm; margin-bottom: 1.5mm; }
.sig-grid .cap { font: 8.5pt Arial, sans-serif; color: #555; margin-bottom: 4mm; }
</style>
</head>
<body>
<h1>Assured shorthold tenancy agreement</h1>
<div class="particulars">
<dl>
<dt>Landlord</dt><dd>Rajesh Kumar Nair, 12 Larkhall Terrace, Bath BA1 6RN</dd>
<dt>Tenant</dt><dd>Priya Menon</dd>
<dt>Property</dt><dd>Flat 3B, Sunbeam House, 14 Walcot Street, Bath BA1 5BN</dd>
<dt>Term</dt><dd>12 months from 01 July 2026 to 30 June 2027</dd>
<dt>Rent</dt><dd>GBP 1,150 per calendar month, payable in advance on the 1st</dd>
<dt>Deposit</dt><dd>GBP 1,326, being five weeks' rent</dd>
<dt>Deposit scheme</dt><dd>To be protected within 30 days of receipt; scheme
details to be given to the Tenant in writing</dd>
<dt>Inventory</dt><dd>Attached as Schedule 1, agreed at check-in</dd>
<dt>Permitted occupiers</dt><dd>The Tenant only</dd>
</dl>
</div>
<h2>The property and the term</h2>
<p>
The Landlord lets and the Tenant takes the Property for the Term at the Rent, on the
terms below. The tenancy is an assured shorthold tenancy. Nothing in this agreement
reduces the Tenant's statutory rights, and where a clause conflicts with those
rights the statutory position applies.
</p>
<h2>Rent</h2>
<ol>
<li>The Rent is payable monthly in advance by standing order to the account notified by the Landlord.</li>
<li>Rent unpaid for 14 days after the due date carries interest at 3% above base rate from the due date until paid.</li>
<li>The Rent includes no bills. Council tax, water, energy, broadband and any television licence are the Tenant's responsibility.</li>
</ol>
<h2>Deposit</h2>
<div class="deposit-note">
The Deposit is held against damage beyond fair wear and tear, unpaid rent and unpaid
bills. It is not rent and may not be used as the final month's rent. It is protected
in a government approved scheme and the prescribed information will be given to the
Tenant within 30 days of receipt.
</div>
<h2>Tenant's obligations</h2>
<ol>
<li>To keep the interior in good and clean condition, fair wear and tear excepted.</li>
<li>To report any disrepair promptly. A defect that gets worse because it was not reported becomes the Tenant's responsibility to the extent of the worsening.</li>
<li>Not to make alterations, redecorate or install fixtures without written consent.</li>
<li>Not to keep any animal without written consent, which will not be unreasonably refused.</li>
<li>Not to sublet, take a lodger, or part with possession of any part of the Property.</li>
<li>Not to cause nuisance to neighbours, and to observe the building's quiet hours between 23:00 and 07:00.</li>
</ol>
<h2>Landlord's obligations</h2>
<ol>
<li>To keep the structure, exterior, and the installations for water, gas, electricity, sanitation, space heating and water heating in repair and proper working order.</li>
<li>To provide a valid gas safety certificate, an electrical installation condition report and an energy performance certificate, and to renew them as required.</li>
<li>To ensure the Tenant may quietly enjoy the Property without interruption by the Landlord.</li>
</ol>
<h2>Access</h2>
<p>
The Landlord may enter the Property to inspect or carry out repairs on giving at
least 24 hours' written notice and at a reasonable time of day, except in an
emergency where no notice is required. A right of access is not a right to enter
when the Tenant has objected.
</p>
<h2>Ending the tenancy</h2>
<ol>
<li>The tenancy ends on the last day of the Term unless a new agreement is made or it continues as a periodic tenancy by agreement or by operation of law.</li>
<li>Either party may end a periodic tenancy by giving the notice required by law at the time.</li>
<li>On the last day the Tenant shall return all keys and leave the Property clean and clear of possessions.</li>
</ol>
<div class="execution">
<h2>Signed</h2>
<p>Signed by the parties on the date written below.</p>
<div class="sig-grid">
<div>
<div class="line"></div><div class="cap">Landlord signature</div>
<div class="line"></div><div class="cap">Print name</div>
<div class="line"></div><div class="cap">Date</div>
</div>
<div>
<div class="line"></div><div class="cap">Tenant signature</div>
<div class="line"></div><div class="cap">Print name</div>
<div class="line"></div><div class="cap">Date</div>
</div>
</div>
</div>
</body>
</html>The layout decision worth understanding
Putting the particulars in a bordered grid at the top rather than distributing them through the clauses is the single most useful decision in this template. It is how the document is actually used: nobody reads a tenancy agreement, they look one number up in it.
The mistake people make adapting it
Copying a template from another jurisdiction. Deposit rules, notice periods, prescribed information and the very name of the tenancy type differ, and a document that names the wrong statutory regime is worse than a short one that names none, because it looks authoritative while being wrong.
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 lease-agreement.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 tenancy agreement 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.
Contract HTML template with numbered clauses
A two-party agreement with automatically numbered clauses and sub-clauses, a cover page, and an execution block that cannot be orphaned.
NDA HTML template
A mutual confidentiality agreement with the two commercially significant terms, the definition of confidential information and the duration, pulled out into a box.
Certificate HTML template with border
A landscape award document: a double frame, the recipient's name as the largest element, a citation, and two signatures with a seal between them.
Statement of work HTML template
Scope, deliverables with acceptance criteria, assumptions, an explicit out-of-scope list and a milestone payment schedule, under an existing master agreement.
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.
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.