Design the label.
Print it in one line.

<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>

<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>
<script>
  // Templates saved on 82label.app load by id; edits on the site apply at once.
  Label82.print('lbl_a1b2c3d4e5', [
    { name: 'Wireless earbuds Pro', price: '₩39,000', sku: 'EP-2026-0412' },
  ]);
</script>

<link rel="stylesheet" href="https://82label.app/cdn/v0.2.0/82label.css">
<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>

<label-82
  template="lbl_a1b2c3d4e5"
  data='[{"name":"Wireless earbuds Pro","price":"₩39,000","sku":"EP-2026-0412"}]'
  button="Print label">
</label-82>

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;
}

import { useState } from 'react';
import { print } from '@82label/core';
import template from './labels/product.json';

export function PrintLabelButton({ items }) {
  const [busy, setBusy] = useState(false);
  const onClick = async () => {
    setBusy(true);
    try {
      const rows = items.map((it) => ({ name: it.name, price: it.price, sku: it.sku }));
      const r = await print(template, rows);
      if (r.status === 'pending_permission') alert('Allow this site in the print agent.');
    } finally {
      setBusy(false);
    }
  };
  return <button onClick={onClick} disabled={busy}>Print labels</button>;
}

<script setup>
import { ref } from 'vue';
import { print } from '@82label/core';
import template from './labels/product.json';

const props = defineProps({ items: Array });
const busy = ref(false);

async function onPrint() {
  busy.value = true;
  try {
    await print(template, props.items.map((it) => ({ name: it.name, price: it.price, sku: it.sku })));
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <button :disabled="busy" @click="onPrint">Print labels</button>
</template>