ZPL-Renderer-JS is a wrapper of Zebrash by IngridHQ

ZPL-Renderer-JS

Convert Zebra ZPL labels to PNG directly in the browser (or node) without the use of third party services like Labelary or labelzoom!

Online playground

XA Viewer has ZPL completitions/recommendations and lets you export ZPL in various image types:

Instalation

npm i zpl-renderer-js

Usage

The NPM package includes .umd, .esm, and .cjs builds. You can also find the raw WASM if you want to load it as a separate resource.

In case of using the raw WASM you will need to load src/wasm_exec.js and create a wrapper for the functions.

Warning

The output of this library (per build) is ~8MB as the wasm is inlined inside so no resource has to be loaded separately. It is higly recommended that you use a bundler and lazy load the library (or the component that uses the lib.)
In case of using the .umd build defer the load of the resource.

Note

Loading the library in a web worker is also recommended and more so if you are planning on doing multiple renderings in a short time span.
For now this is not included as a function directly in the library, you need to create and load the web worker. An example can be found in examples/1-zpl-web-worker.ts and a consumer component in examples/1-zpl-ww-consumer.tsx

import { ready } from "zpl-renderer-js"

const { api } = await ready;
const zplImage = await api.zplToBase64Async("^XA^FO50,50^ADN,36,20^FDHello^FS^XZ");

console.log("Base64 PNG: ", zplImage)

  /**
   * Asynchronously render a ZPL label into a PNG image (Base64-encoded string).
   *
   * @param zpl - The raw ZPL code to render.
   * @param widthMm - Label width in millimeters. Defaults to 101.6 mm (~4 inches).
   * @param heightMm - Label height in millimeters. Defaults to 203.2 mm (~8 inches).
   * @param dpmm - Dots per millimeter (print resolution). Defaults to 8 (~203 DPI).
   * @returns A Promise that resolves to a Base64-encoded PNG image string representing the rendered label.
   * @throws Will throw an error if the ZPL is invalid or rendering fails.
   * @example
   * ```typescript
   * import { ready } from "zpl-renderer-js"
   * const { api } = await ready;
   * const zplImage = await api.zplToBase64Async("^XA^FO50,50^ADN,36,20^FDHello^FS^XZ");
   * console.log(zplImage); // Base64-encoded PNG string
   * ```
   */
  zplToBase64Async: (
    zpl: string,
    widthMm?: number,
    heightMm?: number,
    dpmm?: number
  ) => Promise<string>;

  ///////////// [OLD API, use the async variant] /////////////
  /**
   * Render a ZPL label into a PNG image (Base64-encoded string).
   *
   * @param zpl - The raw ZPL code to render.
   * @param widthMm - Label width in millimeters. Defaults to 101.6 mm (~4 inches).
   * @param heightMm - Label height in millimeters. Defaults to 203.2 mm (~8 inches).
   * @param dpmm - Dots per millimeter (print resolution). Defaults to 8 (~203 DPI).
   * @returns A Base64-encoded PNG image string representing the rendered label.
   * @deprecated Use `zplToBase64Async` instead.
   */
  Render: (
    zpl: string,
    widthMm?: number,
    heightMm?: number,
    dpmm?: number
  ) => string;

Made with <3 by Fabrizz