Loading the designer…

New label

Which printer is this label for? A label is laid out for one machine: its fonts, its media and its command set. The choice is made now and stays with the design, so pick the printer the label will actually be sent to.

Sample data

The JSON the label is rendered with. Expressions in the template such as shipment.tracking or product.sku resolve against it. A label has no bands, so it has no dataSource either: one label is one record.

Render this template

The request your server sends to ERD Report Cloud for the open design and its data. Its format is the printer language the label's own target names — zpl, tspl, epl2 or dymo — and the response body is what you write to the printer. The API key is a server secret; never call the render API from a browser.

Per-request overrides of the template's defaults; leave empty to keep them. The template's own defaults and assets are edited in the inspector: click the empty workspace outside the page.


    
  

About this demo

This page embeds the ERD Report Designer in its LABEL mode exactly as your application would: one script, one stylesheet, a root element with a height, and ErdReportDesigner.mountReportDesigner(). Read its source alongside README.md in the archive. Open the browser's developer tools: every event the designer raises is logged to the console as you work, and window.demo.handle() is the handle your application would hold.

The Examples menu opens three label designs — a 4 × 6 inch Zebra shipping label, a 50 × 30 mm TSC product label with a native EAN-13, and a 50 × 25 mm Zebra asset tag with a QR code — each with sample data, from demo/labels/. File → Save JSON downloads exactly what the render API accepts, and Label → Render request shows the call your server makes with it.

This page is the label designer: it was mounted with composition: { mode: 'label' }, so its palette carries no bands and it refuses a report template rather than opening one it could not honestly edit. reports.html beside it is the same page mounted the other way.