Delivery note template for JavaScript
A delivery note is the document somebody signs at the door. It puts the order next to what actually arrived and says what’s still to come. It leaves a line for the name of the person who checked it. No prices: the invoice follows once the order is complete. This is a ready-made quario delivery note — copy it, point it at your order, and render to HTML, PDF, Excel, or Word.
The template
The whole note is a definition — data you can version and review. The parties, the vehicle line, the three quantity columns, the outstanding notice, and the signature block are all in here. Nothing about this document lives in code. This is the exact file the preview below renders:
{
"data": "$.delivery.lines[*]",
"aggregates": {
"ordered": "sum:[email protected]",
"delivered": "sum:[email protected]",
"outstanding": "sum:[email protected] - @.delivered"
},
"style": { "family": "sans", "size": 10 },
"header": [
{
"type": "split",
"slots": [
{ "type": "text", "value": "Delivery note No. {{ $.input.delivery.number }}", "width": 60,
"style": { "family": "serif", "size": 19, "bold": true, "color": "#1e1f22" } },
{ "type": "text", "value": [{ "value": "Delivered " }, { "value": "{{ $.input.delivery.date }}" }],
"style": { "size": 8, "color": "#989a97", "align": "right", "format": "date" } }
]
},
{
"type": "split",
"style": { "spaceAfter": 4 },
"slots": [
{ "type": "text", "value": "Order {{ $.input.delivery.orderRef }} · invoice to follow", "width": 60,
"style": { "size": 8, "color": "#989a97" } },
{ "type": "text", "value": "Vehicle {{ $.input.delivery.vehicle }} · {{ $.input.delivery.driver }}",
"style": { "size": 8, "color": "#989a97", "align": "right" } }
]
},
{
"type": "split",
"style": { "spaceBefore": 34 },
"slots": [
{ "type": "text", "value": "From", "width": 50,
"style": { "family": "mono", "size": 7, "uppercase": true, "color": "#989a97" } },
{ "type": "text", "value": "Delivered to",
"style": { "family": "mono", "size": 7, "uppercase": true, "color": "#989a97" } }
]
},
{
"type": "split",
"slots": [
{ "type": "text", "value": "{{ $.input.delivery.supplier.name }}", "width": 50,
"style": { "bold": true, "color": "#1e1f22" } },
{ "type": "text", "value": "{{ $.input.delivery.customer.name }}",
"style": { "bold": true, "color": "#1e1f22" } }
]
},
{
"type": "split",
"style": { "spaceAfter": 30 },
"slots": [
{ "type": "text", "value": "{{ $.input.delivery.supplier.street }}\n{{ $.input.delivery.supplier.city }}\n{{ $.input.delivery.supplier.country }}", "width": 50,
"style": { "color": "#5e6062" } },
{ "type": "text", "value": "{{ $.input.delivery.customer.street }}\n{{ $.input.delivery.customer.city }}\n{{ $.input.delivery.customer.country }}",
"style": { "color": "#5e6062" } }
]
}
],
"detail": {
"header": {
"style": { "family": "mono", "size": 7, "uppercase": true, "color": "#989a97",
"borderBottomWidth": 0.5, "borderBottomStyle": "solid", "borderBottomColor": "#1e1f22" }
},
"row": { "style": { "color": "#5e6062" } },
"columns": [
{ "header": "Code", "value": "{{ @.code }}", "width": 14, "style": { "family": "mono", "size": 8, "color": "#989a97" } },
{ "header": "Description", "value": "{{ @.description }}", "width": 44 },
{ "header": { "value": "Ordered", "style": { "align": "right" } }, "value": "{{ @.ordered }}", "width": 14, "style": { "align": "right" } },
{ "header": { "value": "Delivered", "style": { "align": "right" } }, "value": "{{ @.delivered }}", "width": 14, "style": { "align": "right", "color": "#1e1f22" } },
{ "header": { "value": "Outstanding", "style": { "align": "right" } }, "value": "{{ @.ordered - @.delivered }}", "width": 14, "style": { "align": "right", "color": "#989a97" } }
],
"total": {
"style": { "bold": true, "color": "#1e1f22", "align": "right", "paddingTop": 5, "paddingBottom": 0,
"borderTopWidth": 0.5, "borderTopStyle": "solid", "borderTopColor": "#1e1f22" },
"rows": [
{
"cells": [
{ "value": "Total units", "span": 2 },
{ "value": "{{ $.ordered }}" },
{ "value": "{{ $.delivered }}" },
{ "value": "{{ $.outstanding }}", "style": { "color": "#989a97" } }
]
}
]
}
},
"footer": [
{
"type": "text",
"visible": "=$.outstanding > 0",
"value": [{ "value": "{{ $.outstanding }} units", "style": { "bold": true, "color": "#1e1f22" } }, { "value": " are outstanding and will follow on a further delivery. Nothing is charged until the order is complete." }],
"style": { "size": 8, "color": "#5e6062", "spaceBefore": 10 }
},
{
"type": "split",
"style": { "spaceBefore": 48 },
"slots": [
{ "type": "text", "value": "Received by (print name)", "width": 40,
"style": { "family": "mono", "size": 7, "uppercase": true, "color": "#989a97", "paddingTop": 6,
"borderTopWidth": 0.5, "borderTopStyle": "solid", "borderTopColor": "#1e1f22" } },
{ "type": "text", "value": "", "width": 5 },
{ "type": "text", "value": "Signature", "width": 35,
"style": { "family": "mono", "size": 7, "uppercase": true, "color": "#989a97", "paddingTop": 6,
"borderTopWidth": 0.5, "borderTopStyle": "solid", "borderTopColor": "#1e1f22" } },
{ "type": "text", "value": "", "width": 5 },
{ "type": "text", "value": "Date",
"style": { "family": "mono", "size": 7, "uppercase": true, "color": "#989a97", "paddingTop": 6,
"borderTopWidth": 0.5, "borderTopStyle": "solid", "borderTopColor": "#1e1f22" } }
]
}
],
"page": {
"footer": [
{
"type": "text",
"value": "Goods remain the property of {{ $.input.delivery.supplier.name }} until paid in full. Please check on receipt: damage or shortfall noted on this copy is accepted as reported.",
"style": { "size": 8, "color": "#989a97", "paddingTop": 10,
"borderTopWidth": 0.5, "borderTopStyle": "solid", "borderTopColor": "#1e1f22" }
}
]
}
}The Outstanding column is arithmetic on the row, {{ @.ordered - @.delivered }}. The total
row’s figure is an aggregate over the same expression, "sum:[email protected] - @.delivered", so the
column and its total can’t disagree. The total block covers every column. A label spans the two
text columns, then one cell per quantity, all right-aligned through the block’s own style.
The notice under the table declares "visible": "=$.outstanding > 0". A complete delivery has no
sentence about a further delivery. A short one says how many units follow, reading the same
aggregate the total row shows.
The signature block is a split whose slots wear a borderTop. That draws the line above the label,
and the label sits under it in the mono face. That’s what a signature line looks like. Two narrow
empty slots keep the three lines apart — a slot that renders nothing keeps its width, so the
geometry holds whatever the data says.
The header line declares its date rather than formatting it. The line is two styled runs, and its
"format": "date" presents the run holding the date as 20 Aug 2026 under en-IE. The shortfall
notice uses styled runs too — the unit count in bold ink, the sentence after it in the line’s own
grey. The emphasis survives into the PDF and the workbook, not only the HTML.
The data
A definition renders nothing on its own — you hand it a document. This is the sample the preview
below uses. $.delivery.lines[*] in the definition selects its rows, and $.input reads the rest.
The order is the one from the purchase order template, with the
greyboard short-delivered:
{
"delivery": {
"number": "DN-2026-0208",
"date": "2026-08-20",
"orderRef": "PO-2026-0117",
"vehicle": "VN-482-K",
"driver": "J. Bakker",
"supplier": {
"name": "Papierfabriek Deckle B.V.",
"street": "Hemkade 18",
"city": "1506 PR Zaandam",
"country": "Netherlands"
},
"customer": {
"name": "Quire Press — bindery",
"street": "Kattenburgergracht 5",
"city": "1018 KK Amsterdam",
"country": "Netherlands"
},
"lines": [
{ "code": "MU-090-SW", "description": "Munken Pure 90gsm, 70×100, reams", "ordered": 24, "delivered": 24 },
{ "code": "BC-QT-NAT", "description": "Bookcloth, natural quarter, metres", "ordered": 40, "delivered": 40 },
{ "code": "GB-2MM", "description": "Greyboard 2mm, 100×140, sheets", "ordered": 300, "delivered": 200 },
{ "code": "HB-IND", "description": "Headbands, indigo, metres", "ordered": 250, "delivered": 250 }
]
}
}Set every delivered equal to its ordered and re-render: the outstanding column reads zero all
the way down and the notice disappears.
What it renders
This isn’t a screenshot. quario compiles the definition and data above, and @quario/viewer renders
them in your browser, right here. The PDF button hands you the same note as real @quario/pdf
bytes, one A4 page, no browser rendering involved. The DOCX button beside it hands the same
definition to @quario/docx, where Word paginates and resolves the faces itself:
Use it
npm install quario @quario/pdfimport { writeFileSync } from 'node:fs'
import { quario } from 'quario'
import { pdf } from '@quario/pdf'
import deliveryNote from './delivery-note.report.json' with { type: 'json' }
const report = quario({ locale: 'en-IE' }).report(deliveryNote)
const data = await getDelivery(id) // your order and what left the yard
const bytes = await report.render(pdf({ page: { size: 'A4', margin: 54 } }), data)
writeFileSync('delivery-note.pdf', bytes)Print two. One comes back signed with the driver. See JSON to PDF for both PDF routes side by side.
Make it yours
Because the note is declarative, changing it means changing data. A Unit column is one more field on the row. A per-line reason
for a shortfall is a column declaring "visible": "=$.outstanding > 0", so a complete delivery never shows an empty Reason
column. A second signature line for the driver is one more slot in the split. If the goods carry prices after all, add an amount
column and "format": "currency" and the note becomes an invoice. That’s why the gallery keeps them apart. All of it diffs in a
pull request, and the same file renders identically in Node, the browser, and at the edge. It renders without eval, so item
descriptions from a supplier’s feed never become code. Security →
FAQ
Can I generate the delivery note as a PDF?
Yes, and it’s the format the driver carries: @quario/pdf renders this definition straight to
bytes with no browser anywhere in the path. Full example →
Can I export the delivery note to Excel?
Yes — @quario/xlsx renders the same definition to a workbook. The three quantity columns arrive
as real numbers, the outstanding column included, so a goods-received check can sum them straight
away. The signature block lands as three labelled cells. Full example →
How’s this different from the packing slip?
A packing slip lists what’s in each box and travels inside it. A delivery note compares the order with the delivery, and somebody signs for it. Same rows, different obligation.
Can I use this delivery note template commercially?
The definition is yours — the report definitions, data, and output you create with quario belong to you. quario is free to evaluate with no time limit. Delivering to real customers is past evaluation, so that needs a seat for each developer working with it. Deployment is then unlimited and royalty-free. Pricing →
Where are the other templates?
Browse the template gallery → — packing slips, purchase orders, invoices, and more.