React and Vue

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

import { renderToSVG } from '@82label/core';

export function LabelPreview({ template, row }) {
  // renderToSVG escapes every value, so the markup is safe to insert
  return <div dangerouslySetInnerHTML={{ __html: renderToSVG(template, row) }} />;
}

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

import { defineLabelElement } from '@82label/core';
import '@82label/core/styles.css';
defineLabelElement();

// React 19
<label-82 template="lbl_a1b2c3d4e5" data={JSON.stringify(rows)} button="Print" />