🎨 Visual Label Editor

How to build a label in the visual editor

This editor lets you design the label by dragging elements onto an editing area and, at the end, generates the matching command code (PP, FT, PT, PB, BARSET, PF). Instead of working out coordinates by hand, you place everything with the mouse and copy the result.

1. Set the label width and height in millimeters and choose the DPI (203, 300 or 600) in the left panel. The default is 101.6 x 76.2 mm, which is 4 x 3 inches.
2. Drag from the element list onto the label: Text, Barcode, QR Code, Line or Variable.
3. Click an element to edit its properties in the right panel (text, font, size) and drag it to adjust its position.
4. Use Preview to check the layout and Generate Code to see the finished code, which appears below the editor.
5. Copy the code and take it to your system or printer. To continue later, use Export and keep the project file.

Editor features

• Multi-select: select several elements (dedicated button or Ctrl+click) to change the font and size of all of them at once.
• Shortcuts: Del deletes, Ctrl+A selects everything and Ctrl+D duplicates the element.
• Zoom and grid: zoom control from 50% to 150%, plus buttons to center the label, reset the view and turn the grid on or off.
• Import existing code: the "Load" button accepts code you have already written and, optionally, a JSON with the variable values, rebuilding the layout in the editor.
• Project files: Export and Import save and open the complete project. The tools panel also has "Export JSON", "Statistics" and "Validate Project".

Variable elements are for fields that change on every label, such as batch, date or product name. You set the field name in the layout and fill in the values in the test JSON.

Practical examples

• Product label: a large text with the name, a separator line and a barcode with the internal code right below.
• Batch identification: fixed texts ("Batch:", "Expiry:") next to variables, so the same layout works for any batch.
• QR Code label: a QR code with the item's link or code, plus readable text next to it for visual checking.
• Adjusting an old layout: import the code of a label already in use, move the elements that ended up misaligned and generate the code again.

Tips

• Check your printer's DPI before you start. A different DPI changes the conversion between millimeters and dots.
• When the code is generated, the barcode uses the Code 39 format and the QR Code uses fixed parameters. Always test a real label on the printer before producing in quantity.
• If you need the same layout in ZPL (Zebra printers), see the ZPL converter.

Privacy and how it works

The editor runs in your browser: the design, the generated code and the variable JSONs are not sent to any server. The project you are editing is saved automatically in the browser's local storage (localStorage) so you do not lose your work when you reload the page; clearing the site data deletes that draft. General details about the site are in the Privacy Policy.

Frequently asked questions

Other free tools

• 📋 ZPL EditorSpecialized editor for ZPL code (Zebra Programming Language)
• 🔧 Env ConverterEasily convert .env files between different formats
• 🌐 Is Up - Website CheckerCheck if a website responds from your browser
• 📡 Is Online - Connection CheckerChecks whether your browser can open a connection to Google and Cloudflare and shows the c
• 🌍 Public IP - Find My IPFind your public IP address and copy it in one click
• 📸 Pageres - Screenshot Capture ToolGet an image of a page’s top at widths from 320 to 1920 px and download the file