Easy to use, yet powerful barcode generator for the web and Node.js
Version:
Build:
License: MIT
9+
12+
9+
5+

Include

Download the library and include the script or use the CDN.
<script src="JsBarcode.all.min.js"></script>

Use

Create a HTML tag:
<svg id="barcode"></svg>

Generate with JsBarcode:
JsBarcode("#barcode", "Hi!");

Customize

Customize the barcode with the 17 different options.

Examples

Hello world

HTML:

<svg id="barcode"></svg>

Javascript:

JsBarcode("#barcode", "Hi world!");

Result:

Example with options

HTML:

<svg id="barcode"></svg>

Javascript:

JsBarcode("#barcode", "1234", {
  format: "pharmacode",
  lineColor: "#0aa",
  width: 4,
  height: 40,
  displayValue: false
});

Result:

Declare options in HTML

HTML:

<svg class="barcode"
  jsbarcode-format="upc"
  jsbarcode-value="123456789012"
  jsbarcode-textmargin="0"
  jsbarcode-fontoptions="bold">
</svg>

Javascript:

JsBarcode(".barcode").init();

Result:

Download / CDN links

Name Supported barcodes CDN / Download
All All the barcodes! JsBarcode.all.min.js
CODE128 CODE128 (auto and force mode) JsBarcode.code128.min.js
CODE39 CODE39 JsBarcode.code39.min.js
EAN / UPC EAN-13, EAN-8, EAN-5, EAN-2, UPC (A) JsBarcode.ean-upc.min.js
ITF-14 ITF-14 JsBarcode.itf-14.min.js
ITF ITF JsBarcode.itf.min.js
MSI MSI, MSI10, MSI11, MSI1010, MSI1110 JsBarcode.msi.min.js
Pharmacode Pharmacode JsBarcode.pharmacode.min.js

Options

Option Default value Type
format "auto" (CODE128) String
width 2 Number
height 100 Number
displayValue true Boolean
fontOptions "" String
font "monospace" String
textAlign "center" String
textPosition "bottom" String
textMargin 2 Number
fontSize 20 Number
background "#ffffff" String (CSS color)
lineColor "#000000" String (CSS color)
margin 10 Number
marginTop undefined Number
marginBottom undefined Number
marginLeft undefined Number
marginRight undefined Number
valid function(valid){} Function