QR codes and barcodes

Print a QR code or a barcode from any value in your data, for tickets, shipping labels, invoices and product sheets. Each is drawn as a sharp vector image, an <img> element you can style.

<p>Ticket {{ticket.number}}</p>
{{qrCode ticket.url style="width: 30mm"}}
{{barcode ticket.number type="ean13" includetext=true style="height: 15mm"}}

qrCode draws a QR code; barcode draws Code 128 unless you pick another type. Both work in an HTML template’s source, its Page header and Page footer, and its partials.

Pick the symbology

Set type to any symbology bwip-js supports, for example:

type	Draws
qrcode	QR code. The default for qrCode.
code128	Code 128. The default for barcode.
ean13	EAN-13 (12 or 13 digits).
ean8	EAN-8.
upca	UPC-A.
code39	Code 39.
itf14	ITF-14 for shipping cartons.
gs1-128	GS1-128, with (01)… style data.
datamatrix	Data Matrix.
pdf417	PDF417.
azteccode	Aztec code.

See the full list of barcode types upstream.

Size and options

Set a CSS width or height with style or class; the other side follows. Without one, each module (the smallest bar or square) is 4 CSS pixels wide, so a QR code of a short value is about 22 mm wide.

Every other argument is passed to the encoder as an option:

{{qrCode order.trackingUrl eclevel="H" class="qr"}}
{{barcode sku height=10 includetext=true textxalign="center" barcolor="1F3A93"}}

Argument	What it does
type	The symbology. See above.
class, style	Go on the image, to size and place it.
alt	The image’s alternative text. Defaults to the encoded value.
includetext	true prints the value under the bars.
height	Bar height of a linear barcode. 10 is about 15 mm at the default scale.
scale	Module size multiplier (default 2), which changes the natural size.
eclevel	A QR code’s error correction: L, M, Q or H.
rotate	N, R, L or I to turn the symbol.
barcolor, backgroundcolor	Colors as hex without #, such as 1F3A93.

Each symbology has more; see the options reference upstream.

Because alt is always set, the images have the alternative text that PDF/UA requires.

When a value cannot be drawn

The render fails, with a message saying why, when:

• the value is missing or empty (qrCode needs a value to encode.);
• the symbology cannot encode it, such as letters or the wrong number of digits in an EAN-13, or the type is unknown;
• the value is longer than 8,000 characters.

Wrap the helper in {{#if}} when the value is optional.

Draw your own in helpers.js or a script

A function in the template’s helpers.js tab, or in a script, can call bwip-js directly. toSVG(options) returns SVG markup; print it with triple braces:

helpers.js

const bwipjs = require("bwip-js");

function shippingCode(value) {
  return bwipjs.toSVG({ bcid: "datamatrix", text: String(value) });
}

<div style="width: 20mm">{{{shippingCode parcel.id}}}</div>

This SVG has no size of its own and fills its container, so size the element around it. See Handlebars templates for helpers.js and scripts.

Component and spreadsheet templates

Component templates have no barcode component, but their Page header and Page footer are Handlebars, so qrCode and barcode work there. For a barcode in the body, use an HTML template.

Spreadsheet templates cannot draw QR codes or barcodes.