web-component-designer-zpl-demo

September 7, 2026 ยท View on GitHub

Demonstration Project using https://github.com/node-projects/web-component-designer

The ZPL support includes barcode, font-metric, and resize work adapted from ZPLab and renders barcodes with BWIP-JS. See THIRD-PARTY-LICENSES.md for complete notices. The sample also includes the extended element tree for selecting, locking, and controlling the designer/runtime visibility of label elements.

url of demo project

https://node-projects.github.io/web-component-designer-zpl-demo/index.html

Developing

  • Install dependencies
  $ npm install
  • Compile TypeScript after making changes
  $ npm run tsc
  • Run the app in a local server
  $ npm start
  • Open the URL printed by the development server.

Acknowledgements and third-party licenses

This demo redistributes the ZPL add-on and its bundled printer-preview fonts. We sincerely thank u8array and the ZPLab project for making its barcode, preview, resizing, font-metric, and printer-font work available to the community. If you are looking for a complete standalone ZPL label designer, ZPLab is an excellent choice. The web-component-designer ZPL add-on serves a different purpose: it is designed to be embedded into and integrated with another application. The deployed page links directly to THIRD-PARTY-LICENSES.md. The demo consumes the published @node-projects/web-component-designer and @node-projects/web-component-designer-zpl npm packages. Their browser assets, printer-preview fonts, and bundled third-party notices are copied into the deployed site from node_modules.