Getting Started with Barcode Web Component

Smart UI Web Components work with current evergreen browsers and Node 18+ for local tooling; pin package versions to match your project policy.

Smart UI is distributed as the smart-webcomponents NPM package. You can also use the full download from the Download page.

Quick start

1. Install the package:
   
   

   npm install smart-webcomponents

   
   
2. Load the Barcode module (ES module script):
   
   

   <script type="module" src="node_modules/smart-webcomponents/source/modules/smart.barcode.js"></script>

   
   
3. Add the default stylesheet (prefer angular.json / bundler entry in app codebases; for plain HTML use a link):
   
   

   <link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

   
   
4. Add markup in one of two ways - semantic custom element (the component tag is in your HTML) or a host div (you mount programmatically with appendTo):
   
   

   Semantic element (id matches the selector in Smart()):

   <smart-barcode id="barcode"></smart-barcode>

   
   

   Host container (id matches appendTo on Smart.Barcode):

   <div id="barcodeContainer"></div>

   
   
5. Initialize after the module loads: define a const barcodeOptions object, then either bind with Smart('#barcode', ...) on the semantic tag or use new Smart.Barcode({ ...barcodeOptions, appendTo: '#barcodeContainer' }) on the host div:
   
   

   <script type="module">
   	import 'node_modules/smart-webcomponents/source/modules/smart.barcode.js';
   
   	const barcodeOptions = {};
   
   	// Option A - semantic <smart-barcode> with id="barcode"
   	Smart('#barcode', class {
   		get properties() {
   			return barcodeOptions;
   		}
   	});
   
   	// Option B - host div id="barcodeContainer"
   	// const barcodeInstance = new Smart.Barcode({
   	// 	...barcodeOptions,
   	// 	appendTo: '#barcodeContainer'
   	// });
   
   	// Option C - constructor(selector, options), then append the returned element yourself
   	// const myBarcode = new Smart.Barcode('#barcode', barcodeOptions);
   	// document.body.appendChild(myBarcode);
   </script>
   		

   
   

   Uncomment Option B when you use the host div; use Option A when you use the semantic element. The Runtime cookbook also documents new Smart.Barcode('#barcode', barcodeOptions) with appendChild, and document.createElement('smart-barcode') with .props or Object.assign (all are valid patterns; do not combine overlapping patterns for the same instance unless you intend multiple components).

6. Serve the folder over HTTP (or use your bundler dev server) and open the page.

Runtime cookbook

Alternative creation patterns and imperative APIs. These are all valid ways to create Smart UI components: semantic markup + Smart(); new Smart.Barcode({ ...options, appendTo: '#...' }); new Smart.Barcode('#barcode', barcodeOptions) plus appendChild on the returned element; and document.createElement('smart-barcode') then assigning options via .props or Object.assign on the element.

Constructor with a selector string and options, then append the returned element (for example const myBarcode = new Smart.Barcode('#barcode', barcodeOptions)):

	const barcodeOptions = {};
	const myBarcode = new Smart.Barcode('#barcode', barcodeOptions);
	document.body.appendChild(myBarcode);
	

Create with document.createElement('smart-barcode'), assign properties (same as any custom element), then append:

	const barcodeOptions = {};
	const barcode = document.createElement('smart-barcode');
	Object.assign(barcode, barcodeOptions);
	document.body.appendChild(barcode);
	

Host on a div with appendTo (import the module, then instantiate when the document is ready; the container id must match appendTo):

	import "../../source/modules/smart.barcode.js";

	document.readyState === 'complete' ? init() : window.addEventListener('load', init);

	function init() {
		const barcodeOptions = {};
		const barcode = new Smart.Barcode({
			...barcodeOptions,
			appendTo: '#barcodeContainer'
		});
	}
	

Demo

The barcode element supports a wide range of the most common barcode types available:

• PharmaCode
• CodaBar
• Code128A | Code128B | Code128C
• MSI | MSI10 | MSI11 | MSI1010 | MSI1110
• EAN8 | EAN13
• Code39
• Code93

<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="../../source/modules/smart.barcode.js"></script>
    </head>
    <body>
        <smart-barcodetype="pharmacode" value="12345"></smart-barcode>
        <smart-barcode type="code128c" value="22481203"></smart-barcode>
        <smart-barcode type="codabar" value="A2402B"></smart-barcode>
        <smart-barcode type="code39" value="*1234*"></smart-barcode>
        <smart-barcode type="code128a" value="EXAMPLE"></smart-barcode>
    </body>
    </html>

Demo

Appearance

The rendering mode is set using the renderAs property - svg(default) and canvas are supported.
The recommended rendering mode is svg as the image quality remains the same as the barcode is zoomed in.

<!DOCTYPE html>
    <html lang="en">
    <head>
		<link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="../../source/modules/smart.barcode.js"></script>
      </head>
    <body>
        <smart-barcode render-as="svg" type="codabar" value="A2402B"></smart-barcode>
        <smart-barcode render-as="canvas" type="codabar" value="A2402B"></smart-barcode>
    </body>
    </html>

Demo

The barcode's color, background color and bar dimensions can be customized by their respective properties:

<smart-barcode value="A2402B" line-color="red" line-width="3" line-height="20" background-color="lightblue"></smart-barcode>

Demo

The label of the barcode can be set to visible or hidden with displayLabel. Its color, font, size, margins and position can be customized by their respective properties. When the barcode is rendered as svg, the label can also be customized with CSS.

<smart-barcode value="A2402B" ></smart-barcode>

Behavior

Every valid barcode can be exported to a downloadable file. The export method supports the following formats:

• svg
• png
• jpg

<script>
    function exportBarcode(){
        let barcode1 = document.getElementById('export-barcode');
        barcode1.export('png', 'my-barcode');
    }
</script>
<smart-barcode id="export-barcode" value="A2402B" label-position="top" label-font-size="30" label-color="orange" label-font="arial" line-color="orange"></smart-barcode>
<button onclick="exportBarcode()">Download</button>

Demo

Smart.BarCode contains a built-in validator, which depends on the barcode type.
In the case of a invalid value, the isValid method will return false and the invalid event will be triggered.

The invalid event.detail contains multiple values that can indicate the validity of the barcode:

• invalidCharacters - An array indicating the invalid characters.
• patternValidity - A boolean indicating the validity of the barcode pattern.
• lengthValidity - A boolean indicating the validity of the barcode length.

The demo below will output the illegal charcters of the barcode:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
        <script type="text/javascript" src="../../source/modules/smart.barcode.js"></script>
    
 <script>
 window.onload = function(){
    var barcode2 = document.getElementById('invalid-barcode');
    const OnInvalid = (event) => {
            let invalidChars = event.detail.invalidCharacters;
            document.getElementById("invalid-box").textContent+= invalidChars.join(' and ')
        };

    barcode2.addEventListener("invalid", OnInvalid);
}
 function changeValue(){
    barcode2 = document.getElementById('invalid-barcode');
    barcode2.value = "A1230B@!"
}
 </script>
</head>
<body>
 <smart-barcode>Click Me</smart-barcode>
</body>
</html>

Demo

Append to the DOM:

const container = document.getElementById('barcode-container');
container.appendChild(barcode);
	

Remove from the DOM:

barcode.remove();
	

Set a property:

barcode.disabled = true;
barcode.theme = 'dark';
	

Get a property value:

const isDisabled = barcode.disabled;
const currentTheme = barcode.theme;
	

Invoke a method:

barcode.refresh();
barcode.focus();
	

Add event listener:

barcode.addEventListener('invalid', (event) => {
    console.log('invalid triggered:', event.detail.invalidCharacters);
});
	

Remove event listener:

const handleBarcodeEvent = (event) => {
    console.log('invalid triggered:', event.detail.invalidCharacters);
};

barcode.addEventListener('invalid', handleBarcodeEvent);
barcode.removeEventListener('invalid', handleBarcodeEvent);
	

Accessibility

The Barcode component follows WAI-ARIA best practices:

• Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
• ARIA roles - Appropriate roles and labels are applied automatically
• Focus management - Visible focus indicators for keyboard users
• Screen readers - State changes are announced to assistive technology
• High contrast - Supports Windows High Contrast Mode and forced colors

For custom labeling, set aria-label or aria-labelledby attributes on the component.

Related Components

• QRCode

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.