Online designer
Design print templates in the browser: elements, canvas, data binding, image size limits and JSON import/export.
Last updated
The portal ships an online template designer (/design/new): drag out a layout, bind data placeholders, and hand the exported template to the SDK — no code required.
Elements and canvas
- Element library: text, image, QR code, barcode, line, rectangle, table and
repeat block. Text and code elements support
{{placeholders}}. - Canvas: drag, zoom, alignment snapping and full undo/redo.
- Context menu: copy / cut / paste / duplicate / delete, plus bring forward, send backward, bring to front and send to back.
- Property panel with three tabs: Layout | Appearance | Data.
- Colour picker: preset swatches, a custom hex field and the system picker.
- Follows the portal's light and dark themes.
JSON import and export
The JSON menu in the toolbar keeps template data in the browser:
| Action | Notes |
|---|---|
| View | A formatted, syntax-highlighted view of the JSON |
| Copy | Copy the template JSON to the clipboard |
| Download | Export a .json file |
| Paste import | Paste JSON text; both full template packs and bare project JSON are recognised |
| File import | Choose a file from disk |
Imports are structurally validated first; invalid JSON reports a clear error and leaves the current project untouched.
Data and images
Placeholders: write {{orderNo}} or {{order.customer.name}} in element
content. Only plain path lookup is supported — no expressions.
Image size limits:
| State | Per image | Stored in |
|---|---|---|
| Signed out | 512 KB | The browser |
| Signed in | 2 MB | The server |
Images are embedded into the template JSON as base64 (the renderer only accepts embedded images and never downloads remote URLs). An oversized image is not written into the template, and the property panel says so in place.
Privacy when publishing
Once a template containing embedded images is published publicly, every other visitor sees a uniform grey placeholder (detail page, downloaded template pack, "save to my templates", public thumbnail). The original is visible only to you and the reviewing administrator. The designer explains this in a dialog before publishing.
Taking the template to print
An exported template can be:
- Saved to the template centre for the team to reuse;
- Loaded in application code and printed:
import { HttpTemplateClient } from '@printlink/template-sdk';
const detail = await new HttpTemplateClient({ baseUrl }).get('tpl_dispatch_note');
await client
.compose({ queueId })
.paper('100x150')
.addDocument(detail.project).data(order)
.preview();One template × N data sets = N pages in one job:
const job = client.compose({ queueId }).paper('100x150');
for (const order of orders) job.addDocument(project).data(order);
await job.printAndWait();