Block
QR code
A scannable square code carrying a link or a short piece of text — drawn as sharp vector, so it stays crisp at any size.
What it is for
A QR code is a square that a phone camera or scanner turns back into text — most often a payment link, a tracking address or a reference number. Use it when someone should get from the paper (or the PDF) to something on a screen without typing.
Choose something else when:
- the reader only needs to see a number, not scan it — use a Text block;
- a warehouse or till scanner expects stripes rather than a square — use a Barcode;
- you want a clickable link inside the text — put the link in a Text block. A QR code is for people who are holding the printed page.
Add and edit it
- In the palette, open Code and pick QR code (the entry adds a QR code; the list beside it offers "QR code" and "Barcode (Code 39)"). The same entry is in every "Add block" menu, and typing "qr" into the palette search finds it.
- Select the code and use the side panel. Value is the first field.
- Shortcut: Edit value… in the block's menu (⋮), or on right-click, selects the block and brings Value into view. Double-clicking the code on the page does not open anything — every setting is in the side panel.
- To make the value come from your data, click in Value, then click a field in the Data
bindings pane (see Fields and bindings). The field goes in as a
{{ }}token; the panel and the canvas show the code for your sample data.
In the flow of the page the square sits centred across the width. Put it inside a Row column if you want it pushed to one side, next to an address or a total.
Settings
| Setting | What it does | Default and limits |
|---|---|---|
| Value | The text or link the code carries. Fixed text, a data field, or a mix such as https://pay.example.com/{{ $data.invoice.id }}. |
A sample web address. Empty (or a field that has no value) shows a "QR (no value)" marker. |
| Size | The length of the square's side on the page, in millimetres. Includes the quiet zone. | 25 mm. At least 5 mm. A code is never wider than the space it sits in. |
| Error correction | How much smudging, folding or print noise the code survives. Low (up to 7% damage), Medium (15%), High (25%), Highest (30%). | Medium. Higher levels add squares, so each square gets smaller at the same Size. |
| Quiet zone (squares) | The width of the plain light border around the code, counted in code squares. Scanners often fail without it. | 4. 0 or more. |
| Dark color | The colour of the code's squares. | Black. |
| Light color | The colour behind the code. Clearing it falls back to white — the code always prints on a solid field. | White. |
Under these settings, Format and print shows what the code carries ("Encodes"), how much of its room that uses, how many squares it has, and how small each square comes out, worked out from the page as it is laid out now. For a value from your data it says "with the data the canvas shows".
What it accepts
Any text. It is written as UTF-8, so plain letters, digits and the characters of a web link take one byte each, and accented or non-Latin letters (ā, ž, é, €) take two or three. How many bytes fit depends on the error correction:
| Error correction | Most bytes |
|---|---|
| Low | 2,953 |
| Medium | 2,331 |
| High | 1,663 |
| Highest | 1,273 |
A value longer than that is refused rather than cut short: the page shows a "QR code (value too long)" marker and the side panel raises an issue giving the byte count and, when a lower error correction would hold it, which one. Whether a particular scanner shows accented or non-Latin letters correctly is not checked here — scan a printed copy.
Size, density and error correction
The more the code carries, and the higher the error correction, the more squares it needs across the same size — so each square gets smaller. "Format and print" gives the size of one square in millimetres and in printer dots.
A printer puts ink on a grid of dots. When a square is narrower than one dot of a 300-dpi printer (0.085 mm), such a printer cannot draw every square, and the side panel raises an issue saying so — make the code larger, shorten the value or lower the error correction. That is the smallest a printer can physically draw, not the smallest a scanner can read: scanners need more, and how much depends on the scanner.
Colours and contrast
Dark on light is what scanners expect. Keep Dark color much darker than Light color; swapping the two usually stops the code being read at all, and pale colours on white often do too.
Examples
Each example is a complete template stored with this documentation and checked automatically, so the sample data below really does produce the page described.
A short payment link, dark on white
The example is qr-code-1: a line of text and a 30 mm code, Medium error correction, quiet zone 4,
black on white. Value is {{ $data.invoice.payUrl }}.
Sample data:
{ "invoice": { "payUrl": "https://pay.example.com/i/1044" } }
Expected page: the sentence "Pay this invoice online", then one centred 30 mm square code. "Format and
print" encodes "https://pay.example.com/i/1044" (30 of 2,331 bytes at Medium) — a short value, so the
squares are large and easy to read. Change payUrl in the sample data and the code changes with it.
A fixed link beside an address
The example is qr-code-2: a Row with the company address in a wide left column and a 30 mm
column on the right holding a QR code whose Value is typed text, https://example.com/terms, not a
field. There is no sample data — every generated document carries the same code.
Expected page: three address lines on the left, and the code at the right edge of the line, as wide as its 30 mm column. Use this for a link to your terms page or a shop address. The Row is how you push a code to one side; on its own the square sits centred.
One code per record
To print a different code for each guest, order or product, put the QR code inside a Repeater and set Value to a field of each record. The Repeater article's first example does exactly that.
Output differences
- PDF and HTML: sharp vector squares in your dark and light colours.
- Word (DOCX): a black-and-white picture of the same squares — your custom colours are not carried over. Dark-on-light still scans.
Before you rely on it
- Print a page at 100% scale — "fit to page" shrinks the code.
- Scan it with the scanner or phone your readers will use.
- Check that it reads back exactly what "Encodes" shows.
Nothing in the editor can confirm a code scans — only a printed test can.
Troubleshooting
- The page shows "QR (no value)". Value is empty, or the field it points at has no value in the data. Type a value, or pick a field that exists in your sample data.
- The page shows "QR code (value too long)". The text is over the limit for the chosen error correction (table above). Shorten it, or choose a lower error correction level — the side panel issue says which level would hold it.
- It will not scan. Print at 100%; check Dark color is far darker than Light color; keep the quiet zone at 4 or more; make the code larger. If "Format and print" says the squares are under one printer dot, enlarge it, shorten the value or lower the error correction.
- It scans, but shows the wrong text. Compare with "Encodes" in Format and print. Accented letters take more room and some scanners show them wrongly — test with the real scanner.
- It is stuck in the middle of the line. The code sits centred in its space. Put it in a Row column to place it beside other content.
- The Word file's code is black and white. That is how Word receives it; PDF keeps your colours.