1. Introduction

Report Designer is a tool for designing business documents that print exactly as designed, every time, on any printer and in any PDF viewer. It was built for dense, form-style supply-chain documents: bills of lading (BOLs), pick lists, packing slips, shipping and pallet labels, commercial invoices, and inventory and order reports.

The designer with a bill of lading open

Two parts: the designer and the render service

Report Designer has two parts, and it helps to know which one you are working with.

Designer Render service
What it does You draw the document layout: where every label, box, table and barcode goes Merges a layout with real data and produces the PDF
Who uses it Template authors (you) Your WMS, ERP or other back-end system, automatically
Input A template (or a blank page) A template plus data, sent as two separate parameters
Output A template, a JSON file that describes the layout A PDF
Sees real data? No. It shows preview text instead Yes

The designer runs inside a web application, such as your WMS's settings screens. The render service runs on a server in your company's environment. Both use the same layout engine, so the PDF you preview in the designer has the same layout as the PDF the server produces. Fonts, line breaks, page breaks and barcode sizes all match.

   Template author                         Your WMS / ERP
        │                                        │
        ▼                                        ▼
 ┌──────────────┐   template.json   ┌────────────────────────┐
 │   Designer   │ ────────────────▶ │     Render service     │ ──▶ BOL.pdf
 │ (in browser) │                   │  template + data → PDF │
 └──────────────┘                   └────────────────────────┘
                                                 ▲
                                    shipment data (JSON)

Key concepts

You will meet these terms throughout the guide. The Glossary has the full list.

Template. The design of a document: page size, bands, elements, styles and fonts. It is saved as a JSON file. A template holds no customer data. The same BOL template produces thousands of different BOLs.

Data. The values for one document, such as one shipment, one order or one wave. Your system sends data as JSON, for example:

{ "bolNumber": "BOL2026102001", "shipTo": { "name": "Northwind Retail #1187", "city": "Columbus" }, "items": [ ... ] }

Data contract (schema). The list of fields your system sends: their names, types and descriptions. If your application provides one, the designer shows it in the Fields tab, and you can drag fields onto the page instead of typing their names.

Band. A horizontal region of the page with its own repeat rules. Page Header and Page Footer repeat on every page. Report Header and Report Footer print once. The Body holds the flowing content that grows and continues onto new pages. See Page setup and bands.

Element. Anything you place in a band: text, an image, a line, a rectangle, a barcode, a checkbox, a table and so on. See the Elements reference.

Binding. A placeholder in double braces that is replaced by data when the PDF is rendered. {{ shipTo.name }} prints the ship-to name. Bindings can also calculate and format values: {{ formatNumber(sum(items, 'weight'), 1) }} prints the total weight with one decimal. See Data binding and expressions.

Preview text. The designer never sees real data, so each binding can carry sample text after a |: {{ shipTo.name | Northwind Retail #1187 }}. The designer and its preview show Northwind Retail #1187. A real render replaces the whole placeholder with the actual ship-to name. If you omit the preview text, the designer shows the binding itself, {{shipTo.name}}.

Preview. The Preview PDF button renders a real PDF in your browser, using preview text in place of data. It shows the true layout, fonts and page breaks of your design.

Render. Producing the final PDF from a template and real data. This happens on the server, or in any program that uses the engine.

What you can build

The Template gallery has 20 ready-made supply-chain templates you can start from.

What "pixel-perfect" means here

Next: Quick start: your first packing slip →

← Contents2. Quick start: your first packing slip →