The label editor

Applies to: the BarcoderX label editor add-on

Status: Planned. Nothing is released yet and there is nothing to download. How the editor is delivered is decided. Its detailed behavior will be fixed when the editor is planned in detail, so the capabilities below may change before release.

What the editor is for

The label editor lets people design labels in a web browser and print them. Designers lay out a label in real units such as millimeters or inches, connect it to data and keep versions of it. Operators pick a ready template, supply the data or a quantity, print, and reprint when needed.

The editor is an add-on. It is sold with the SDK or with the BarcoderX server. See Editions and licensing.

How it is delivered

The editor is a JavaScript product. It is written once, in TypeScript, and delivered as packages:

• A package for React.
• A package for Angular.
• A package for Vue.
• A .NET wrapper for Blazor and other .NET applications.

All of them sit on the same core, so the editor behaves the same in every one. You add the package that matches your application and embed the editor in your own pages.

How it works with the rest of BarcoderX

• The editor uses the web API only. It contains no barcode, layout or drawing engine. Every preview is produced by the same engine that makes your print output. What you see in the editor is what the printer prints. See Web API.
• Printing goes through the print agent. The editor asks the web API to print, and the web API sends the job to the print agent on your network. The browser never prints to a port on your own computer. See The print agent.
• Drafts are saved on your server. The editor does not keep your work in the browser's storage, and it does not save user preferences.

What you will be able to do

• Add every kind of label element, as each is released: text, barcodes, pictures, lines, boxes, ellipses, grids, repeaters, RFID and raw printer commands.
• Select, move, resize and rotate elements, with zoom, pan, rulers in the label's unit and snapping to a grid, to other elements and to the printer's dot grid.
• Align, distribute, reorder and lock elements, cut, copy, paste and duplicate them, and undo and redo your changes.
• Work with the keyboard as well as the mouse.
• Connect elements to data fields, write expressions with help for field and function names and with errors shown as you type, and attach sample data to step through records. See Templates and data and Expressions.
• See the label as the printer will print it, at the printer's resolution, and see the printer commands that will be sent. Elements that a printer can only print approximately are marked, and a list of problems leads you to the element that causes each one.
• Set up the page: size, unit, resolution, orientation, layout and media.
• Save, version, restore, publish, import and export templates. If someone else changed a template while you worked, the editor shows you both versions instead of overwriting.
• Manage font and image assets. Uploading a font needs your confirmation that you hold its license. See Text, fonts and pictures.
• Choose a printer, copies and data, print, and follow the job's status.
• Export the current label, or a batch from sample data, to PDF, PNG, JPEG, SVG, PCX and HTML, and download the printer commands. See Output formats.

License and trial behavior

The editor holds no license key and checks nothing itself. It asks the server for the license state. If the editor add-on is not licensed, the editor shows a banner and a watermark over the design area, and stays fully usable. Output made through the editor is marked or unmarked by the server, like every other output. See Evaluation mark and license keys.

Language, appearance and access

• The editor is available in English and Spanish.
• The editor is light only. There is no dark theme and no theme switch.
• The editor aims at WCAG 2.1 level AA for its controls, and every command on the design area is planned to work from the keyboard.
• A host page can adjust the colors of the design area through documented style variables whose names start with --bx-canvas-. They stay within the light theme.
• The editor is designed to run on pages that use a strict content security policy: no inline script and no eval.

Later

Touch input, such as pinch zoom, and the design of two-sided labels are planned for after the first release.

What the editor does not do

• It does not open a template from a web address. This is not in the first release.
• It does not save user preferences.
• It does not print through a program that the page launches on your computer, and it does not print to a local port.
• It does not run barcode or layout code in the browser.

BarcoderX is a product of P4 Software.