Designer & tools

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:

ActionNotes
ViewA formatted, syntax-highlighted view of the JSON
CopyCopy the template JSON to the clipboard
DownloadExport a .json file
Paste importPaste JSON text; both full template packs and bare project JSON are recognised
File importChoose 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:

StatePer imageStored in
Signed out512 KBThe browser
Signed in2 MBThe 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:

  1. Saved to the template centre for the team to reuse;
  2. 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();

See also

On this page