^XA Free · open source · local-only

Free Online ZPL Viewer & Editor

Paste or type Zebra Programming Language and preview the label instantly. The viewer renders in your browser, so your ZPL is never uploaded to a remote service.

Open the full ZPL editor Browse ZPL commands

No sign-upNo label uploadsMIT licensed

01 / Interactive viewer

ZPL code

^XA
^CI28
^PW600
^LL800
^LH0,0

^FX Change Encoding
^CI28

^FX Borders
^FO20,20^GB570,770,8,,1^FS
^FO20,270^GB570,,8^FS
^FO20,470^GB570,,8^FS
^FO220,270^GB,200,8^FS
^FO20,570^GB570,,8^FS
^FO25,470^GB100,100,50^FS
^FO20,670^GB570,,8^FS

^FX Weight and page number
^CF0,30
^FO0,50^FB609,1,0,C^FD6,4 kg\&^FS
^CF0,20
^FO40,60^FB529,1,0,R^FD1 von 1\&^FS

^FX From Address
^CFA,20
^FO60,80^FDACME Inc.^FS
^FO60,100^FDCompany Street 5^FS
^FO60,120^FD32584 Löhne^FS

^FX To Address
^CF0,20
^FO60,165^FDSHIP TO:^FS
^CFA,20
^FO80,195^FDMax Mustermann^FS
^FO80,215^FDTeststraße 6^FS
^FO80,235^FD86152 Augsburg^FS

^FX Fragile
^FO365,180^GB200,70,8,,1^FS
^CF0,50
^FO400,195^FDFRAGILE^FS

^FX QR-Code
^FO40,290
^BQN,2,8
^FDMM,ALENNART KOEBE^FS

^FX Barcode Code 39
^FO260,310^BY3^B3,N,80,N,Y^FD1234^FS

^FX Shipping Company Logo
^FO40,490^GB70,10,10,W,4^FS
^FO40,505^GB50,10,10,W,4^FS
^FO95,505^GB15,10,10,W,4^FS
^FO40,520^GB30,10,10,W,4^FS
^FO75,520^GB35,10,10,W,4^FS
^FO40,535^GB15,10,10,W,4^FS
^FO60,535^GB50,10,10,W,4^FS
^FO40,550^GB70,10,10,W,4^FS

^FX Shipping Company Details
^CF0,30
^FO150,500^FDZPLr^FS
^CFA,20
^FO150,535^FDThe open source ZPL renderer^FS

^FX Barcode Code 128
^FO40,590^BY3^BCN,70,N,N,N^FD0123456789ABC^FS

^FX Bottom infos
^CF0,20
^FO60,700^FB489,1,0,L^FDReferences:\&^FS
^CFA,20
^FO60,740^FB489,1,0,L^FDInvoice nr.\&^FS
^FO60,740^FB489,1,0,C^FD54321\&^FS
^FO60,740^FB489,1,0,R^FD02/01/2019\&^FS

^XZ

Label preview

Language coverage: 200+ commands recognized
Runtime: Node.js + browser
Processing: 100% local

How to view a ZPL file online

Open your label. Choose Open ZPL file in the viewer, or paste code from a .zpl or .txt file. A complete label starts with ^XA and ends with ^XZ.
Check the preview. Change text, barcodes, or coordinates and the first label updates locally. The quick viewer uses 8 dots/mm (203 dpi). Set other print densities and inspect multiple labels in the full editor.
Keep your result. Download the preview as PNG, or continue editing the same label in the ZPL editor and visual designer.

Label blank, too small, or cut off?

Check ^PW label width, ^LL label length, and ^FO field positions. Dimensions are in printer dots. In the editor, match the print density to your printer and review any diagnostics.

Preview support and printer differences

ZPLr renders supported text, graphics, and barcodes such as ^BC Code 128 and ^BQ QR codes. Some commands are partial or control printer hardware without drawing pixels. Read the command support notes and verify the output on your target printer.

Editor, viewer, and designer

One source / three surfaces

Three ways to work with one ZPL label

Start in source code, inspect the rendered result, or select fields directly on the label. Every view stays synchronized, so you can move quickly without losing the underlying ZPL.

ZPL editor

Edit ZPL with a language-aware Monaco workspace built for label source.

Syntax highlighting and formatting
Parameter-aware command help
Source-linked diagnostics

ZPL viewer

Render a live black-and-white label preview without sending code to an external API.

True label dimensions
Barcode and QR rendering
PNG export

ZPL designer

Work directly on supported fields while keeping the underlying ZPL synchronized.

Drag, resize, and align
Layers, guides, and properties
Code and canvas selection sync

01 / Live ZPL preview

Write code. See the label—not a guess.

The online ZPL viewer renders a deterministic one-bit raster locally as you type. Source-linked diagnostics, command documentation, formatting, and safety limits help you find problems before a label reaches a print workflow.

Live browser rendering with configurable print density
ZPL validator diagnostics linked back to source
Command catalog with parameter guidance
Multiple labels, files, and workspace ZIPs

Preview ZPL online

Rendered shipping label in the live ZPL preview canvas — Deterministic raster203 dpiNo remote API

Visual ZPL label designer with a drag-and-drop canvas, layers, guides, and field properties — CanvasPropertiesSource synchronized

02 / Visual ZPL designer

Design on the label while keeping real ZPL underneath

Drag, resize, align, distribute, lock, hide, and reorder supported fields on a WYSIWYG canvas. Rulers, snapping, manual guides, layers, and property controls make precise label layout faster.

Drag and resize

Snap and guides

Align and distribute

Layers and properties

Lock and hide fields

Keyboard editing

Start designing a ZPL label

03 / Variable data and assets

One design, every record

Import CSV or JSON, bind columns to ^FN fields, preview each record, and turn ZPL into PNG batches. Images and fonts are managed in the same local workspace.

CSV and JSON records

Import structured data and map columns to numbered ZPL fields.

Images and fonts

Import workspace assets and manage their ZPL resource names.

Record preview

Step through live record values before producing a batch.

Flexible export

Save ZPL, PNG images, batch PNGs, or a complete workspace ZIP.

ZPL variable data manager previewing records imported from CSV or JSON for batch label export — CSV + JSONLive record previewBatch PNGs

Private by architecture

Your ZPL never needs to leave the browser

ZPLr parses, renders, and edits labels on your device. Your ZPL and imported data never leave this browser for processing. There is no account, upload API, or server-side label processing.

No upload endpoint

Label source and imported datasets are processed by the browser application.

No account required

Open the editor and begin working without creating a profile.

Open implementation

Inspect the MIT-licensed code and integrate the same engine yourself.

04 / JavaScript and TypeScript ZPL library

One ZPL engine, two runtimes

Use ZPLr as a Node.js ZPL renderer in backend jobs or as a browser library for local previews. Both entries share the parser, diagnostics, command capabilities, and deterministic raster model.

Typed ESM APIs for parsing and rendering ZPL
Node canvas output through the optional skia-canvas peer
HTMLCanvasElement and Blob output in modern browsers
Reusable render sessions, structured diagnostics, and safety limits

npm install zplr Read usage guide

Node.jszplr · zplr/node

// "zplr/node" exposes the same Node.js API.
import { renderZplPNG } from "zplr";
import { writeFile } from "node:fs/promises";

const [png] = await renderZplPNG(source, {
  printDensity: 8,
});

await writeFile("label.png", png);

Browserzplr/web

import { renderZpl } from "zplr/web";

const job = await renderZpl(source);
const canvas = job.labels[0].canvas;

document.querySelector("main")?.append(canvas);

Command supportSee supported, partial, and recognized commands.DiagnosticsUse stable codes in integrations and tooling.Source on GitHubReview the renderer or contribute a change.

Built for real label work

From a first preview to an automated label pipeline

Shipping labels

Inspect addresses, tracking barcodes, routing blocks, and print dimensions.

Retail and inventory

Build UPC, EAN, Code 128, Data Matrix, QR, and item-label templates.

Template workflows

Bind CSV or JSON records to ^FN fields and preview every variation.

Application previews

Embed ZPL parsing and rendering in Node.js services or browser interfaces.

Frequently asked questions

About the ZPL editor and library

Need implementation details? The project documentation covers command support, diagnostics, limits, and runtime APIs.

What is a ZPL editor?

A ZPL editor helps you write and inspect Zebra Programming Language label source. ZPLr combines source editing, command guidance, diagnostics, live rendering, and visual field editing in one browser workspace.

What is a ZPL viewer?

A ZPL viewer turns Zebra Programming Language source into a visual label preview. ZPLr lets you paste and view ZPL online while running the parser and renderer locally in your browser, without uploading your label or data to a rendering server.

Is ZPLr also a visual ZPL label designer?

Yes. Supported fields can be selected, dragged, resized, aligned, reordered, locked, hidden, and edited through layers and property controls while the ZPL source stays synchronized.

Can I use ZPLr from Node.js or a browser application?

Yes. Import zplr or zplr/node for Node.js, and zplr/web for browser projects. Both entries expose typed parsing and rendering APIs built from the same engine.

Can the editor export ZPL labels as PNG files?

Yes. You can export the active label as PNG, generate PNGs for variable-data records, save the ZPL source, or download a workspace ZIP containing labels, datasets, and assets.

Which ZPL commands are supported?

ZPLr recognizes more than 200 commands across rendering, state, storage, control, and compatibility categories. The public command-support document records which commands are supported, partial, or recognized without rendered output.

Ready when you are

Your next ZPL label can start here

Open the editor with a working shipping-label example, then change the code, move fields visually, or connect variable data.

Open the free ZPL editor