82label
My templates한국어Get started

Docs › Start

Getting started

Make a template and print your first label from your site.

82label is a label template format (JSON) and a library that prints it. Draw the template in millimetres in the designer, then print from your site with one call: Label82.print(template, data). The library has no dependencies and is MIT licensed.

Drawn by the real library

Code for this example

const template = {
  v: 1,
  name: 'Product barcode 50×30',
  paper: { kind: 'roll', dpi: 203 },
  label: { width: 50, height: 30 },
  elements: [
    { type: 'text', x: 2.5, y: 2, w: 45, h: 6, text: '{{name}}', size: 9, bold: true, fit: 'shrink' },
    { type: 'text', x: 2.5, y: 8, w: 45, h: 4, text: '{{price}}', size: 8 },
    { type: 'barcode', x: 2.5, y: 13, w: 45, h: 15, format: 'code128', value: '{{sku}}' },
  ],
};

const rows = [
  { name: 'Wireless earbuds Pro', price: '₩39,000', sku: 'EP-2026-0412' },
  { name: 'Fast charging cable 1m', price: '₩9,900', sku: 'CB-1M-0007' },
];

Label82.print(template, rows);

The label above is drawn by the real library. Print this example opens the browser print dialog on 50×30 mm paper. Two data rows print two labels.

1. Make a template

  1. Open the designer and pick the paper: a roll size (say 50×30), a Formtec sheet or a courier waybill.
  2. Place text, barcodes, QR codes, images, lines and boxes. Values that change are written in double braces, like {{name}} (fields).
  3. In Get code, copy code with the template JSON inside, or sign in, Save, and load it by id (lbl_…).

2. Add it to your site

A page without a build step needs one script tag. It defines the global Label82 and registers the <label-82> tag.

<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>

<button id="print">Print labels</button>
<script>
  const template = {
    v: 1,
    name: 'Product barcode 50×30',
    paper: { kind: 'roll', dpi: 203 },
    label: { width: 50, height: 30 },
    elements: [
      { type: 'text', x: 2.5, y: 2, w: 45, h: 6, text: '{{name}}', size: 9, bold: true, fit: 'shrink' },
      { type: 'text', x: 2.5, y: 8, w: 45, h: 4, text: '{{price}}', size: 8 },
      { type: 'barcode', x: 2.5, y: 13, w: 45, h: 15, format: 'code128', value: '{{sku}}' },
    ],
  };

  document.getElementById('print').onclick = () =>
    Label82.print(template, [
      { name: 'Wireless earbuds Pro', price: '₩39,000', sku: 'EP-2026-0412' },
      { name: 'Fast charging cable 1m', price: '₩9,900', sku: 'CB-1M-0007' },
    ]);
</script>

With npm:

npm i @82label/core
import { print } from '@82label/core';
import template from './labels/product.json'; // template JSON from the designer

async function printLabels(orders) {
  const rows = orders.map((o) => ({ name: o.productName, price: o.priceText, sku: o.sku }));
  const result = await print(template, rows);
  // result.via: 'agent' (print agent) or 'browser'
  return result;
}

3. How it prints

By default (mode: 'auto') print() sends the labels straight to the label printer when the 82label print agent runs on the PC, with no dialog, and opens the browser print dialog otherwise. Both print the same picture at the same size in millimetres.

Next