The CSS and Javascript project for building label printing software on the web.

Step 1 : Select/Customize a Label Template

In the labelgrid Application below, select a predefined template and click on the "Create Label" button to create the label. Alternatively you can click on the "Custom" button to create a custom label template.

Step 2 : Design the Label (WYSIWYG)

Text objects can be created by clicking on the "Create Text" button and moved around by dragging it. Double click on any of the objects to bring up a dialog to customize the text object properties. At anytime, you can save or load previously created labels.

Step 3 : Print

Save your label. Click on the "Calibrate" link to calibrate and setup the browser/printer for printing. The settings will be automatically saved and loaded the next time you use labelgrid. You can click on the "Print Label" button to print the label.

Label Files (Browser's local storage)

A maximum of 10 label files are supported in the browser's local storage. In future releases, you will be able to Export your label files to prevent losing them when you switch or re-install your browser.

Labels :

About labelgrid

labelgrid is a CSS, Javascript and HTML project for building label printing software on the web. It provides you with commonly used templates in the market and allows you to print without any external plug-in and tools. The output is based on pure CSS and HTML and bypasses the need for any third party tools for printing. The framework provides capabilities known as calibration to adjust the label margins to overcome all the printing problems associated with web printing.

A WYSIWYG (What You See Is What You Get) label designer is also included. The aim of this project is to provide an industrial strength label printing tool on the web based on completely on open technology such as HTML.

Currently supported Browsers

labelgrid Application (v0.2 preview)

Calibrate (0,0)


Now you can print your labels anywhere!