Preview
Show ZPL as images in the browser with the <zpl-preview> web component.
<zpl-preview> renders ZPL to images in the browser, using zpl-renderer-js (the zebrash renderer compiled to WebAssembly). Label data never leaves the page. Because it's a standard web component, it works in plain HTML and every framework.
npm install @node-zpl/preview<script type="module">
import "@node-zpl/preview";
</script>
<zpl-preview zpl="^XA^PW400^LL200^FO20,20^A0,40^FDHello^FS^XZ"></zpl-preview>The zpl property also accepts a Label from node-zpl, or anything with a toZPL() method.
Attributes
| Attribute | Default | Description |
|---|---|---|
zpl | ZPL to show | |
width, height | ^PW/^LL, else 4 × 6 in | Label size in millimeters |
dpmm | 8 | Dots per millimeter: 6, 8, 12 or 24 |
smoothing | 0.4 | Edge smoothing, from 0 (the printer's exact dots) to 1 (fully anti-aliased) |
ZPL with several labels shows one image per label. It fires zpl-render with event.detail.images (PNG data URLs) and zpl-error with event.detail.error.
Frameworks
React
React 19 sets props on custom elements as properties, so zpl can be a Label. Import the React entry to register the element and get typed props:
import "@node-zpl/preview/react";
<zpl-preview zpl={label} dpmm={8} onzpl-render={(event) => console.log(event.detail.images)} />;Vue
Tell Vue that zpl-preview is a custom element (compilerOptions.isCustomElement), then bind the property:
<zpl-preview :zpl.prop="label" dpmm="8" @zpl-render="onRender" />Svelte
<zpl-preview zpl={label} dpmm={8} on:zpl-render={onRender}></zpl-preview>Angular
Add CUSTOM_ELEMENTS_SCHEMA to the component's schemas:
<zpl-preview [zpl]="label" dpmm="8" (zpl-render)="onRender($event)"></zpl-preview>Loading the renderer
The renderer is about 7 MB of WebAssembly. It's loaded the first time a preview renders, so bundlers put it in a separate chunk. To serve the .wasm file yourself, which lets browsers compile it while it downloads, copy zpl-renderer-js/dist/zebrash.wasm to your server:
import { configure } from "@node-zpl/preview";
configure({ wasmUrl: "/zebrash.wasm" });configure({ render }) replaces the renderer entirely, for example with one that calls your own service.
Styling
The label images, their container and the error message are exposed as CSS parts: ::part(label), ::part(labels) and ::part(error).