ZPL Label Designer
A visual label designer for generating Zebra Programming Language (ZPL) directly in Visual Studio Code. Add and position text, rectangles, Code 39 barcodes, QR codes, and monochrome images, configure label dimensions and DPI, then copy the generated ZPL.
This repository is a minimal extension conversion of the original browser-based ZPL Label Designer. The original standalone page remains in label_designer.html for reference, but the supported entry point is now the VS Code command.
Getting started
After installing the extension, click ZPL Designer in the VS Code status bar. You can also open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and run:
ZPL Label Designer: Open Designer
Features
- Visual canvas for positioning and resizing label objects
- Text, filled rectangle, Code 39 barcode, QR code, and image tools
- Monochrome image conversion to ZPL GRF data
- Configurable label width, height, and printer DPI
- Generated ZPL dialog for quick copying
- Local processing with no image uploads or external service dependency
- High-contrast, automatically expanded property inspector for light and dark VS Code themes
Use the designer
- Select Text, Rectangle, Barcode, QR Code, or Image from the Tools panel.
- Click and drag on the canvas to place resizable objects. The Image tool opens a file picker and inserts a thresholded monochrome image.
- Select an object to edit its exposed values in the Property Inspector.
- Change label width, height, or DPI in the bar above the canvas.
- Select Generate ZPL to open and copy the generated printer instructions.
The current preview keeps the design only for the lifetime of the open webview. It does not yet save designer projects, parse existing ZPL, print directly, or restore a design after the panel is closed.
Development
Requirements:
- Node.js 20 or newer
- Visual Studio Code 1.85 or newer
Install dependencies:
npm install
Open the repository in VS Code and press F5. In the Extension Development Host, click ZPL Designer in the status bar or run:
ZPL Label Designer: Open Designer
Package and install
Create an installable VSIX:
npm run package
Then run Extensions: Install from VSIX... in VS Code and select the generated .vsix file.
Architecture
extension.js registers the command and creates a script-enabled webview.js/ contains the original designer and ZPL generation logic.css/designer.css contains the original UI styles.css/vscode.css adapts the page layout and colors for the VS Code editor.- jQuery and jQuery UI are installed locally and packaged with the extension; the webview does not depend on a CDN.
Webview resources are restricted to the extension directory and loaded under a Content Security Policy. User-selected images are processed inside the webview and are not uploaded.
Known limitations
- Designs cannot yet be saved or reopened.
- Generated ZPL is not validated against a printer or emulator.
- The text preview font size is not currently represented in generated ZPL.
- Linear barcode support is limited to Code 39.
- QR output uses ZPL's native
^BQ command and error-correction level M.
- The legacy designer is optimized for mouse input and fixed-size panels.
License
MIT. See LICENSE.
