---
title: "Delivery note template for JavaScript — quario"
description: "A ready-made quario delivery note for JavaScript. Ordered against delivered, an outstanding column, a signature block. Copy the definition, point it at your order, and render to HTML, PDF, Excel, or Word."
url: "https://getquario.com/templates/delivery-note"
---

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

## What it renders

This isn’t a screenshot. quario compiles the definition and data below, 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:

*Preview: the page renders this definition and its sample data live, with downloads — [see it rendered](https://getquario.com/templates/delivery-note).*

## 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 above renders:

```json title="delivery-note.report.json"
{
  "data": "$.delivery.lines[*]",
  "aggregates": {
    "ordered": "sum:=@.ordered",
    "delivered": "sum:=@.delivered",
    "outstanding": "sum:=@.ordered - @.delivered"
  },
  "style": { "family": "sans", "size": 10 },
  "header": [
    {
      "type": "split",
      "style": { "size": 10, "bold": false },
      "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": { "size": 10, "bold": false, "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": { "size": 10, "bold": false, "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",
      "style": { "size": 10, "bold": false },
      "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": { "size": 10, "bold": false, "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:=@.ordered - @.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
above uses. `$.delivery.lines[*]` in the definition selects its rows, and `$.input` reads the rest.
The order is the one from the [purchase order template](https://getquario.com/templates/purchase-order.md), with the
greyboard short-delivered:

```json title="delivery-note.data.json"
{
  "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.

## Use it

```bash title="shell"
npm install quario @quario/pdf
```

```ts title="delivery-note.ts"
import { 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](https://getquario.com/guides/json-to-pdf.md) 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 →](https://getquario.com/docs/diving-deeper/security.md)

## 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 →](https://getquario.com/guides/json-to-pdf.md)

### 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 →](https://getquario.com/guides/json-to-excel.md)

### How’s this different from the packing slip?

A [packing slip](https://getquario.com/templates/packing-slip.md) 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 license for each production deployment. Its users, agents, and renders are never
counted. [Pricing →](https://getquario.com/pricing.md)

### Where are the other templates?

[Browse the template gallery →](https://getquario.com/templates.md) — packing slips, purchase orders, invoices, and more.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://getquario.com/"},{"@type":"ListItem","position":2,"name":"Templates","item":"https://getquario.com/templates"},{"@type":"ListItem","position":3,"name":"Delivery note","item":"https://getquario.com/templates/delivery-note"}]}
```