# npm

> Installing @82label/core, imports, bundlers and TypeScript.

Source: https://82label.app/en/docs/npm/

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

One ES module with no dependencies. TypeScript types ship with it (`Template`, `Row`, `PrintOptions`, `PrintResult` and more).

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

## Keeping templates as files

Put the file from the designer's **Download JSON** in your project and import it. The template is versioned with your code and works without the 82label server.

```ts
import type { Template } from '@82label/core';
import raw from './labels/product.json';

const template = raw as Template;
```

## With the web component

```js
import { defineLabelElement } from '@82label/core';
import '@82label/core/styles.css';

defineLabelElement(); // registers <label-82>
```

## Rendering on a server

`renderToSVG` builds an SVG string without a DOM: label previews in Node or Cloudflare Workers, or in email. Printing (`print`) runs in the browser only.

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

const svg = renderToSVG(template, { name: 'Wireless earbuds Pro', price: '₩39,000', sku: 'EP-2026-0412' });
```

> Dedicated React and Vue packages are coming. Until then use `@82label/core` directly ([React and Vue examples](https://82label.app/en/docs/frameworks/)).