# Getting started

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

Source: https://82label.app/en/docs/getting-started/

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

```js
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](https://82label.app/en/designer/) and pick the paper: a roll size (say 50×30), a [Formtec sheet](https://82label.app/en/templates/) 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](https://82label.app/en/docs/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.

```html
<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:

```sh
npm i @82label/core
```

```js
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](https://82label.app/en/docs/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.

> In the browser dialog keep **scale at 100% (actual size)**, **no margins**, and paper at the label size (roll) or A4 (sheets). 82label sets the `@page` size, so the defaults usually fit.

## Next

- [Template JSON](https://82label.app/en/docs/template/): element types and coordinates
- [Roll labels](https://82label.app/en/docs/roll/) · [Formtec sheets](https://82label.app/en/docs/sheets/) · [Courier waybills](https://82label.app/en/docs/couriers/)
- [Barcodes](https://82label.app/en/docs/barcodes/) · [QR codes](https://82label.app/en/docs/qr/)
- [Printing](https://82label.app/en/docs/printing/) · [Installing and linking the print agent](https://82label.app/en/docs/agent/)