ZPL & PDF Base64 Preview Extension

A VS Code extension that allows you to preview base64-encoded ZPL (Zebra Programming Language) labels and PDF documents directly in the editor.

Features

ZPL Label Preview: Decode base64-encoded ZPL code and render it as a visual label preview
PDF Preview: Display base64-encoded PDF documents with download capability
Context Menu Integration: Right-click to preview selected base64 content
Command Palette Support: Access preview commands via Command Palette

Installation & Setup

1. Install Dependencies

cd zpl-pdf-preview
npm install

2. Compile the Extension

npm run compile

3. Run the Extension

Press F5 in VS Code to open a new Extension Development Host window with your extension loaded.

Usage

Preview ZPL Labels

Select or have base64-encoded ZPL code in your editor
Right-click and select "Preview Base64 as ZPL Label"
- OR use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "Preview Base64 as ZPL Label"
A preview panel will open showing:
- The decoded ZPL code
- A rendered image of the label (using Labelary API)

Example ZPL Base64:

Xl5YMEV3MCxNMCxOCl5YQQpeTExIMCwwCl5GVzIwMCxeCl5GTzEwMCwxMDAKXkExMEEsNTAsMzAsNDBeMkJDVEVTVCBMQUJFTF5GUwpeRk8xMDAsMjAwCl5BMTBBLDUwLDMwLDQwXjJGRFRoaXMgaXMgYSB0ZXN0IGxhYmVsXkZTCl5YWg==

Preview PDF Documents

Select or have base64-encoded PDF content in your editor
Right-click and select "Preview Base64 as PDF"
- OR use Command Palette and type "Preview Base64 as PDF"
A preview panel will open with:
- Full PDF viewer
- Download button to save the PDF

How It Works

ZPL Preview

Decodes base64 to extract ZPL code
Uses the free Labelary API to render ZPL as an image
Displays both the raw ZPL code and rendered preview
Note: Requires internet connection for rendering

PDF Preview

Decodes base64 and creates a data URI
Embeds PDF in an iframe for native viewing
Provides download functionality

Example Test Data

ZPL Test Data

Create a file test-zpl.txt with this content:

Xl5YMEV3MCxNMCxOCl5YQQpeTExIMCwwCl5GVzIwMCxeCl5GTzEwMCwxMDAKXkExMEEsNTAsMzAsNDBeMkJDVEVTVCBMQUJFTF5GUwpeRk8xMDAsMjAwCl5BMTBBLDUwLDMwLDQwXjJGRFRoaXMgaXMgYSB0ZXN0IGxhYmVsXkZTCl5YWg==

This decodes to a simple ZPL label with "TEST LABEL" text.

Creating Your Own Test Data

For ZPL:

# Create ZPL code
echo "^XA^FO50,50^ADN,36,20^FDHello World^FS^XZ" > label.zpl

# Encode to base64
base64 label.zpl

For PDF:

# Encode existing PDF
base64 document.pdf

Development

Project Structure

zpl-pdf-preview/
├── src/
│   └── extension.ts      # Main extension logic
├── package.json          # Extension manifest
├── tsconfig.json         # TypeScript configuration
└── README.md            # This file

Building

npm run compile

Watch Mode

npm run watch

Packaging

To create a .vsix file for distribution:

npm install -g @vscode/vsce
vsce package

Customization Ideas

1. Add Support for Different Label Sizes

Modify the Labelary API call in extension.ts:

// Change from 4x6 to other sizes (e.g., 4x3, 2x1)
const response = await fetch('http://api.labelary.com/v1/printers/8dpmm/labels/4x3/0/', {

2. Add ZPL Validation

Add validation before rendering:

function validateZPL(zpl: string): boolean {
    return zpl.includes('^XA') && zpl.includes('^XZ');
}

3. Support Multiple File Formats

Extend to support other formats like images:

let imageCommand = vscode.commands.registerCommand('zpl-pdf-preview.previewImage', async () => {
    // Decode and display base64 image
});

4. Add Custom Label Dimensions

Add configuration options in package.json:

"configuration": {
    "title": "ZPL Preview",
    "properties": {
        "zplPreview.labelWidth": {
            "type": "number",
            "default": 4,
            "description": "Label width in inches"
        }
    }
}

ZPL & PDF Base64 Preview

Jamsheed Khalid