Dispatch label
Build the small dispatch label you send to a label printer. You learn paper size and orientation, Code 128 barcodes, and taking a PNG instead of a PDF.
What this teaches
Building it in the editor
- Set the paper to A5 landscape and cut the margins to 12px. On a label the paper is the label, so large margins just lose print area.
- Orientation is applied after size — a5 plus landscape is an A5 turned on its side.
- Add a code object and choose Code 128. Logistics scanners sweep in one line, so a 1D barcode is the right choice.
- Make the barcode wide and give it enough height. If the box proportions collapse the scanner cannot read it.
- Print the order number and destination large. A label is read by a person from a metre away.
Building it with the schema and API
- page.size and page.orientation set the paper: a4, a5, letter or legal.
- A code node encodes props.text. codeKind picks the kind, and ecc is meaningful only for QR.
- Set format to "png" and you get an image. Label printer software usually handles an image better.
- An image has no pages. A document that would print as three pages becomes one tall image, with no header, footer or page numbers.
The finished document
The JSON below is exactly the document those two routes produce. Our tests validate it and check that it renders without warnings, so you can paste it and use it as is.
{
"v": 1,
"unit": "px",
"page": {
"size": "a5",
"orientation": "landscape",
"margin": {
"t": 12,
"r": 12,
"b": 12,
"l": 12
},
"header": "",
"footer": ""
},
"fonts": [],
"styles": [
{
"id": "s_big",
"fontFamily": "Liberation Sans",
"fontSize": 30,
"fontWeight": 700,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_l",
"fontFamily": "Liberation Sans",
"fontSize": 13,
"fontWeight": 400,
"italic": false,
"color": "#222222",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_cap",
"fontFamily": "Liberation Sans",
"fontSize": 10,
"fontWeight": 400,
"italic": false,
"color": "#666666",
"bg": "transparent",
"align": "center",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
}
],
"nodes": [
{
"id": "n_dest",
"parent": "",
"order": 0,
"type": "label",
"x": 0,
"y": 0,
"w": 400,
"h": 40,
"show": "",
"styleId": "s_big",
"props": {
"text": "{{ data.dest }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Destination"
},
{
"id": "n_order",
"parent": "",
"order": 1,
"type": "label",
"x": 0,
"y": 46,
"w": 400,
"h": 22,
"show": "",
"styleId": "s_l",
"props": {
"text": "Order {{ data.order }} · {{ data.boxes }} boxes",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Order"
},
{
"id": "n_code",
"parent": "",
"order": 2,
"type": "code",
"x": 0,
"y": 86,
"w": 500,
"h": 110,
"show": "",
"styleId": "s_l",
"props": {
"text": "{{ data.barcode }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "code128",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Barcode"
},
{
"id": "n_code_l",
"parent": "",
"order": 3,
"type": "label",
"x": 0,
"y": 200,
"w": 500,
"h": 16,
"show": "",
"styleId": "s_cap",
"props": {
"text": "{{ data.barcode }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Barcode digits"
}
]
}The request body. Put the document above into template and the data below into data.
{
"template": "(the document above)",
"data": {
"dest": "Suwon DC 3",
"order": "SO-2026-8841",
"boxes": 3,
"barcode": "SO20268841"
},
"format": "png"
}