ZPL GUI Editor V2 is a work-in-progress web editor for Zebra Programming Language (ZPL) labels. The goal is to emulate a "photo editor" experience for ZPL, allowing users to design, preview, and export labels visually. At the moment, this project is still under active development and WILL contain bugs or incomplete features.
See Live Demo for the current working example of the editor. I would suggest turning off HTML objects in the settings to avoid the overlap of the preview.
| Badge | Status | Description |
|---|---|---|
 |
Not Started | Feature is planned but work has not yet begun. |
 |
WIP | Work is currently in progress. |
 |
In Development | Feature is being actively developed and tested. |
 |
Implemented | Feature is functional but may require further refinement. |
 |
Complete | Feature is fully functional and verified. |
- Add and position labels on a canvas (Implemented)
- Edit label properties: size, position, options (Implemented)
- Live label preview with update on change (Implemented)
- Toggle preview modes (on-save / on-change) (Not Implemented)
- Dynamic item creation (multiple items) (Implemented)
- Add, remove, and delete items (Implemented)
- Item selection & focus (Implemented)
- Import ZPL files (parse & render) (Not Implemented)
- Export labels to ZPL (Preview implemented) (Implemented)
- Support multiple file formats (Not Implemented)
- Text: render & edit text fields (Implemented)
- Graphics: render & edit shapes (Implemented)
- Images: render uploaded images (Implemented)
- Barcodes: render and handle input (Not Implemented)
- Options: configure ZPL element attributes (Implemented)
- Local save & load (browser storage) (Not Started)
- Cloud save/load integration (Not Started)
- API integration for cloud save/load (Not Started)
- Database integration for cloud save/load (Not Started)
- Support for P-Touch Labels (Not Started)
- Support for ZPL Labels to be Printed on Legal Size Paper (Not Started)
Before getting started with Html2ZPL, ensure your runtime environment meets the following requirements:
- Server Software: Node 21+
-
Clone the repository:
git clone https://github.com/retreat896/Html2ZPL.git cd Html2ZPL -
Install dependencies:
Navigate to the project directory and run:
npm install
Development Server:
To start the development server with hot-reload:
npm run devThe terminal will show a local URL (typically http://localhost:5173). Open this URL in your browser to start using the editor.
Building for Production:
To create an optimized production build:
npm run buildThe built files will be in the dist directory. You can preview the production build locally using:
npm run preview-
The Begining: Implement a basic drag and drop label GUI -
Basic Item Creation: Implement some of the base label components such as text, graphic, and barcode. -
Basic Saving: Implement Label saving and item saving to "Cloud" using API. -
Basic Export: Implement Exporting to ZPL code from HTML Dom. -
Basic Import: Implement a way to import ZPL code into HTML. -
API Creation: Implement an API to allow users to save and load their labels. -
Database Integration: Implement a database to allow users to save and load their labels. -
UI Overhaul: Implement a flat modern style GUI for the application. -
Advanced API Integration: Add more complex features to the API like user login, OAuth, and more. -
Advanced Saving: Implement a project manager to allow saving multiple label sets, sharing, and storage options. -
Advanced Items: Implements advanced items such as Images and possibly custom user items. -
Final UI Design: Implement the final UI design for the application.
- ** Report Issues**: Submit bugs found or log feature requests for the project.
- ** Submit Pull Requests**: Review open PRs, and submit your own PRs.