ThermalLabel Web Editor for ASP.NET Core, ASP.NET & Docker
Key Features
Create, Load, Edit & Save XML / JSON label templates
Text, Barcodes (180+), Images, Tables, Shapes, RFID
Multi-Selection, Grouping, Smart Guides & Snap-To-Grid
Duplex (Two-Sided) Design & View Rotation
In-Place Text Edition, Undo/Redo & Clipboard
Fully Themable & Touch Friendly
Windows, Linux, Mac & Android Clients!
Backend: ASP.NET 4.6.1+, ASP.NET Core 2.0+ or Docker Web API
jQuery & HTML5 Canvas
Download Buy
ThermalLabel Web Editor Add-on is a first-class barcode label designer component for web apps which empowers your WebApps by providing an end-user visual label editor! The ThermalLabel Editor component needs a rendering backend: either the ThermalLabel SDK in your ASP.NET Core or ASP.NET (MVC & WebForms) app, or the ThermalLabel Web API for Docker, which lets you use it from Node.js, PHP, Python, Java or any other stack. It is built on jQuery and HTML5 Canvas (Fabric.js 1.x)! Built on top of latest web platform and standards, this Web Label Editor can be used in Windows, Linux, Mac & Android Clients with latest browsers!
The ThermalLabel Editor features visual aids for the creation of items like texts, barcodes, pictures, tables, RFID tags and shapes; Z-ordering, zooming, In-place text edition, grouping and multi-selection, duplex (two-sided) design, Undo/Redo, clipboard support and many more features! It is also very customizable so you can skin it to match the app's UI style on which it will be hosted in.
With the ThermalLabel Web Editor component, you can allow your end-users to create, load, edit and save ThermalLabel objects in the form of XML or JSON template definitions.
Text, barcode, image and table items are rendered on the server, either by your own ASP.NET HTTP Handler (WebForms) or Controller (MVC / ASP.NET CORE) using the ThermalLabel SDK, or by the ThermalLabel Web API for Docker /ThermalLabelEditor endpoint, so what your users see is what gets printed.
Server-side Requirements
Option A – your ASP.NET app:
- Windows Server, or Linux if using ASP.NET CORE
- Legacy ASP.NET 4.6.1+ / ASP.NET CORE 2.0+
- ThermalLabel Web Editor Server Component 16.0 (API)
- ThermalLabel SDK 16.0 (including the Web Printing assembly)
- SkiaSharp 1.68.3+
- System.Text.Encoding.CodePages 4.4.0+
Option B – any stack: ThermalLabel Web API for Docker 7.0+ (Linux container, amd64 & arm64) with the EDITOR_LICENSE_OWNER / EDITOR_LICENSE_KEY environment variables. No .NET code required.
Client-side Requirements
- ThermalLabel Web Editor JavaScript Component 16.0 + CSS (API) (already bundles the fabric.CanvasEx extension)
- jQuery 1.7+
- Fabric.js 1.5+ (1.x line only; Fabric 2.x and later are not supported)
- OS: Windows, Linux, Mac & Android
NOTE: Printing is only available on Windows Clients, requires .NET Framework 4.6.1+ and TLClientPrint 16.0 (docs). - BROWSER: Edge, Mozilla Firefox, Google Chrome & Safari latest versions. Internet Explorer 10+ is supported for the basic features.
How It Works
The editor has two parts: a JavaScript component in the browser that manages the design surface, and a backend that renders text, barcode, image and table items and generates previews, PDFs, images and printer commands. Every request is a POST to the backend URL with an Action field:
| Action | Purpose |
|---|---|
Render | Renders a Text, Barcode, Image or Table item to PNG |
Validate | Validates whether a barcode can be printed as a resident (native printer) element |
GetLabelTemplate | Converts the label model to an XML or JSON template |
GetLabelPreview / GetLabelThumbnail | Preview and thumbnail generation |
GetLabelAsPdf / GetLabelAsImage | PDF and image export |
GetPrinterCommands | Printer commands (ZPL, EPL, etc.) generation |
Save | Downloads the template as a file |
Print | Registers a print job for TLClientPrint (Windows clients) |
Expressions | Returns the list of supported expressions |
GetI18NResourceKey | Returns localized UI strings used by the editor |
Backend options
- ASP.NET Core or ASP.NET (MVC / WebForms): add a Controller or HTTP Handler that uses the Web Editor server component and the ThermalLabel SDK. Sample projects are on GitHub.
- Any other stack (Node.js, PHP, Python, Java, Go…): run the ThermalLabel Web API for Docker and point the editor to its
/ThermalLabelEditorendpoint. See the Docker sample project.
Shapes, lines, repeaters, RFID tags and literals are drawn in the browser without a round trip.
Quick Start
1. Reference the resources and add a host element:
<link rel="stylesheet" href="ThermalLabelWebEditor-16.0.css" />
<script src="jquery.min.js"></script>
<script src="fabric.min.js"></script> <!-- Fabric.js 1.x only -->
<script src="ThermalLabelWebEditor-16.0.xx.xxxx.js"></script>
<div id="editorHost" style="width:100%; height:600px"></div>2. Create the editor, point it to your backend and load a label:
var Printing = Neodynamic.SDK.Printing;
var TLE = Neodynamic.Web.Editor.ThermalLabelEditor;
// Backend URL: your ASP.NET Controller action / HTTP Handler...
TLE.thermalLabelWebEditorControllerName = "ThermalLabelWebEditorHandler/ProcessRequest";
// ...or the ThermalLabel Web API for Docker container (see the GitHub sample):
// TLE.websiteRootAbsoluteUrl = "http://localhost:8080";
// TLE.thermalLabelWebEditorControllerName = "ThermalLabelEditor";
var editor = new TLE("#editorHost"); // jQuery selector
editor.enableEditor();
var label = new Printing.ThermalLabel();
label.unit_type = Printing.UnitType.Inch; // set the unit BEFORE sizes
label.width = 4;
label.height = 3;
editor.loadThermalLabel(label);
// let the user draw a barcode with the mouse
editor.active_tool_item = new Printing.BarcodeItem();
editor.active_tool = Neodynamic.Web.Editor.EditorTool.Barcode;Then save the design with the editor API as an XML or JSON template and print or convert it with the SDK or the Web API.
Step-by-step guide: Web Label Editor in the ThermalLabel docs • API reference: client-side (JavaScript) and server-side (.NET)
Features at a Glance
Items' Selection and Handlers
Each time the user selects an item, visual handlers appear on the design surface along with the item's width and height. Handlers aid the users with full resize, move and rotation actions. Handlers use a different fill when an item is locked or not resizable, and their colors can be changed to match your own UI App Style!
In-Place Text Edition
Users can easily edit the text of a TextItem by double-clicking on it (double-tap on touch devices). The In-Place Text Edition works even if the TextItem is rotated, and honors input masks, maximum length and read-only settings.
Locking Items
Items can be locked so they cannot be resized, moved or rotated on the editor surface. Additional flags such as editable, visible, resizable and read-only give you full control over what end-users can do, and the editor shows adorner icons for locked items, data fields, expressions and comments.
Grid lines, Rulers & Snapping
Grid lines (lines or dots) and rulers in the label's unit (inches, mm, points, etc.) help you with a better label design. "Snap To Grid" places and sizes items according to the grid, while "Snap To Items" displays smart guide lines when an item's edges or center align with other items. Angle snap makes rotation easy.
Undo/Redo & Clipboard
ThermalLabel Editor allows users to undo/redo actions as well as to cut, copy, paste and duplicate items, including groups and duplex labels. Built-in keyboard shortcuts are included. In System clipboard mode, items can be pasted between different editor instances, browser tabs and even different browsers. You as the app developer are provided with methods, properties and events to update your UI accordingly.
High Quality Zoom
ThermalLabel Editor provides you with a high quality zooming feature. Users can zoom the editor's surface from 10% up to 1000%, and server-rendered items are re-rendered at the new resolution so they always stay sharp.
Picture Conversion Tool
The ImageItemUtils class features a method which allows you to get the output when converting the image source of an ImageItem to black & white based on the MonochromeSettings options set up on such ImageItem object! It is useful for you to display to your users a preview of the image in black & white format by fine tuning the MonochromeSettings options.
First-Class Barcode Support
First-Class International Barcode Standards compliance with 180+ symbologies. All the barcode algorithms were written from ground up based on the official specifications. ThermalLabel Editor leverages the ThermalLabel SDK and provides you and your end-users with most popular Linear (1D), Postal, Component Composite & 2D Barcode including Code 39, Code 128, GS1-128, GS1 DataBar, EAN 13 & UPC, Postal (USPS, Royal Mail, Australia Post, DHL, etc.), Data Matrix (GS1 & DMRE), QR Code (GS1), PDF 417, UPS MaxiCode, Micro QR Code, Han Xin Code, IFA PPN, EAN/UPC Composite (CC-A, CC-B & CC-C), DotCode and many more! Barcodes can also be validated as resident (native printer) elements. See Barcode Item.
Multi-Selection & Grouping
Draw a marquee (rubber-band) rectangle on the design surface to select several items at once, or use the click-to-group workflow on touch devices. Selected items are handled as a temporary group that can be moved, resized, rotated, locked, deleted and Z-ordered together, or turned into a permanent group. Items can also be selected by code by name, tag, type or index.
Layout & Alignment Tools
Align items to the left, right, top, bottom or center, distribute them horizontally or vertically, set the same width or height to several items, nudge them with exact precision and manage their Z-order (bring to front, send to back, etc.), which is also the order used when printing.
Duplex (Two-Sided) Design
Design front and back sides of a duplex label. The editor shows one side at a time and offers an animated 3D page flip, a Front/Back legend and automatic page switching when items are selected by code. Pasting, resizing and exporting are fully aware of both pages.
View Rotation
Rotate the design surface in 90° steps without changing the label you save or print. It is perfect for labels fed landscape but easier to read as portrait. Everything that leaves the editor (templates, preview, print, PDF, image, clipboard) is automatically normalized back to the original orientation.
Save, Preview, Export & Print
Save templates as XML or JSON, generate previews and thumbnails, export the label as PDF or image (PNG, JPEG, SVG, PCX), or get the printer commands (ZPL, EPL, Fingerprint, ESC/POS, PCL, Direct Protocol). A data source can be supplied to bind DataField items, and Windows clients can print directly through TLClientPrint. All methods can work asynchronously with callbacks.
Fully Themable UI
The look of the editor is driven by CSS custom properties: workspace, rulers, grid, guides, label frame, margins, selection handlers, marquee, tooltips, duplex legends and more. Support light and dark themes with regular CSS, and localize the editor's UI strings from your server.
Rich Item Types & Visual Aids
Create Text, Barcode, Image, Table, Rectangle, Ellipse, Line, Repeater, RFID tag and Literal (raw printer commands) items. RFID and Literal items are displayed as icons in a tray below the label. Hover tooltips, design-time borders, repeater arrows and out-of-label adorners make designing easier.
Touch Devices & Developer Events
The editor is usable on tablets and phones: tap to select, drag to move, enlarged handles on Android and double-tap for in-place text editing. For developers, a complete set of hooks (selectionChanged, newItemCreated, undoStateChanged, onError, etc.) and a full programmatic API let you integrate the editor with your own toolbars and property panels.
Units & Precision
Labels and items can use Inch, Mm, Cm, Dots per inch, Point, Pica, Mils or Twip units. When you change the label's unit, all items are converted automatically and the rulers and grid are updated. The number of fractional digits shown on the selection handlers is configurable.
Label Shape, Margins & Background
Design round labels with the ellipse shape, display the margin area in its own color and flag items that are (even partially) outside the label with a dashed adorner. A design-time background image, such as a scanned pre-printed label, can be shown behind the design as a visual guide; it is never printed.
Web Editor licenses start at USD 899 per developer (requires a ThermalLabel SDK or Web API for Docker license) and include one year of updates and priority support. See all license options.
ThermalLabel Web Editor Documentation
The editor is documented, with ASP.NET Core, MVC and WebForms samples, in the ThermalLabel SDK v16 online help.
Web Editor
Label items
Templates, data & output
Download fully-functional eval version...
Which ThermalLabel Edition Do I Need?
The same label engine and the same XML/JSON label template format are shared by all ThermalLabel products, so a label designed in an editor can be printed with the SDK or converted with the Web API.
| Product | Best for | How you use it | Platforms | Price |
|---|---|---|---|---|
| ThermalLabel SDK for .NET | .NET apps: desktop, services, console, ASP.NET Core | C# / VB.NET library (NuGet Neodynamic.SDK.ThermalLabel) | Windows, Linux, macOS (.NET Standard 2.0+) | From USD 499 |
| ThermalLabel Web API for Docker | Any language: Python, Node.js, Java, PHP, Go, C#… | Self-hosted REST API in a Docker container | Linux container (amd64 & arm64) | From USD 499 |
| ThermalLabel Windows Editor | End-user label designer inside your WinForms or WPF app | Visual .NET control. Requires the SDK | Windows (.NET Framework 4.6.1+ & .NET Core 3.1+) | Add-on |
| ThermalLabel Web Editor This page | End-user label designer inside your web app | JavaScript component. Requires the SDK or the Web API for Docker as backend | Any modern browser (Windows, Linux, macOS, Android) | Add-on, from USD 899 |
Building with .NET? Use the SDK. Any other language, or a microservice architecture? Use the Web API for Docker. Need your end users to design their own labels? Add the Windows Editor (desktop, SDK only) or the Web Editor (browser, SDK or Docker).
ThermalLabel Web Editor FAQ
- What is ThermalLabel Web Editor?
- A JavaScript label designer component (jQuery and HTML5 canvas with Fabric.js 1.x) that you embed in your own web app so end users can create, edit and save barcode label templates in the browser, with text, 180+ barcode types, images, tables, shapes and RFID items.
- Which backends does it work with?
- It needs a server-side backend to render items and produce previews, PDFs, images and printer commands. Use either your own ASP.NET Core or ASP.NET (MVC or WebForms) app with the ThermalLabel SDK and the Web Editor server component, or the ThermalLabel Web API for Docker, which exposes the /ThermalLabelEditor endpoint and works with any server-side language.
- Can I use it with Node.js, PHP, Python or Java web apps?
- Yes, by using the ThermalLabel Web API for Docker as the editor backend. Your app serves the page with the editor and the container handles rendering, so no .NET code is required in your stack.
- What do users get out of the editor?
- XML or JSON label templates that you can store in a database or file, plus previews, thumbnails, PDF and image (PNG, JPEG, SVG, PCX) exports, and printer commands for Zebra ZPL and EPL, EPSON ESC/POS, Honeywell Fingerprint and Direct Protocol, and HP PCL.
- Can users print from the browser?
- On Windows clients, the editor can print through the TLClientPrint utility (requires .NET Framework 4.6.1+). On any platform you can get the printer commands or a PDF from the backend and print them with your own workflow, for example with JSPrintManager.
- Which browsers and devices are supported?
- The latest Edge, Chrome, Firefox and Safari on Windows, Linux, macOS and Android, including touch devices. Internet Explorer 10+ is supported for the basic features.
- Can I customize its look and language?
- Yes. The editor is themed with CSS custom properties, so it supports light and dark themes, and its UI strings can be localized from your server.
- How is it licensed?
- The Web Editor is an add-on: it requires a license of the ThermalLabel SDK or of the ThermalLabel Web API for Docker, plus a Web Editor license, which starts at USD 899 per developer and includes one year of updates and priority support.