A Developer’s Guide to Adding a JavaScript Barcode Scanner to Web Apps

In 2026, the easiest way to add a JavaScript barcode scanner is to install barcode scanning Agent Skills into your AI coding tool. Using Agent Skills published by a recognized vendor of barcode scanner software ensures you get the optimal solution for your use case and scanning environment without lengthy evaluation or customization.

This tutorial explains how to add barcode scanning to a JavaScript app using your AI coding assistant and Scandit Agent Skills. We’ve also included instructions for manually integrating a barcode scanner library and a comparison between Scandit and popular JavaScript barcode scanning options.

How do I use AI to add a JavaScript barcode scanner?

To add a JavaScript barcode scanner using AI, invoke barcode scanning Agent Skills through your AI coding tool. Once the Agent Skills create the optimal code, test your new features and performance under real-world conditions.

To avoid issues in development and production, you must choose Agent Skills built by a provider who knows how to adapt barcode scanning technology to real-world situations. Without domain knowledge, both agents and humans struggle to integrate code properly.

Domain-specific Agent Skills eliminate development guesswork by teaching your AI coding tool how to create JavaScript code that works in any barcode scanning environment. Rather than forcing users to compensate for damaged labels, awkward label positions, or multiple barcodes, Agent Skills picks the right JavaScript library features and customizations for you.

Scandit Agent Skills, based on the Agent Skills Open Standard, bring 15 years of barcode, label, and ID scanning expertise directly into any AI coding agent. Grounded in our knowledge of how Scandit APIs are deployed across thousands of customer integrations, they autonomously select the right Scandit product, customize workflows and UI, and generate production-ready integration code.

Here’s how you can use your AI coding assistant and Scandit’s Agent Skills to add production-ready barcode scanning code to your JavaScript web app.

1. Add production-ready barcode scanning code to your web project

1. Install Scandit Agent Skills by running the following command in your project directory. It automatically detects the supported coding tool you have installed and adds the Scandit plugin to each. (Re-run it to update.)

npx plugins add scandit/skills 

Prefer to set it up yourself? Manual installation steps for each AI coding assistant →

2. Using your AI coding tool, describe your use case in plain language. More detail is better, and you can attach photos, such as the barcodes to scan. The Agent Skill will ask for more information and a Scandit license key, if necessary.

Here is an example prompt to add barcode scanning to an existing JavaScript inventory app:

In this JavaScript app, users currently add items to an inventory by typing in barcodes manually. Add camera-based barcode scanning to this flow.

- Use /sparkscan-web, with a floating scan button.
- A scan looks up the item in existing inventory and adds it to the list, exactly like manual entry does. If the barcode isn't found, prompt to add it.
- Keep manual entry as is. Scanning is an additional input.
- Enable EAN-13, UPC-A, Code 128, and QR.
- Match the scanning UI to the app's design system.

We call the sparkscan-web skill explicitly, as it’s the fastest way to get a reliable barcode scanning experience, including all of Scandit’s AI barcode scanning features.

3. If you didn’t invoke a specific skill, the data-capture-sdk product-picker skill recommends the appropriate Scandit product and framework combination (e.g., SparkScan, BarcodeCapture, MatrixScan AR, MatrixScan Batch, Smart Label Capture, etc.).

4. The matching product-and-framework skill (e.g., sparkscan-web) autonomously integrates barcode scanner code into your web project.

5. If needed, use additional prompts to customize workflows, the user interface, data manipulation, and error handling, and to integrate with your backend system.

6. Review the generated code and test against production workflows. If changes are required, use your AI coding tool and Scandit Agent Skills to autonomously update the code.

2. Test your web app’s barcode scanning performance

The best way to test a potential JavaScript barcode scanning API is to run it using real-world scenarios. Whether you’re using Scandit Agent Skills or another barcode scanning library, here are several performance-testing questions to ask:

• Is there clear guidance and feedback to foster a smooth workflow rather than confuse users?
• Can you scan barcodes in different orientations, such as upside down and sideways? Flip the device upside down to see how the scanner performs.
• Can you scan barcodes with reflections and glare?
• Can you scan barcodes at a distance? Are you able to zoom in if needed?
• Do you receive scanning feedback in loud environments and while wearing headphones?

You can use our sample sheet of barcodes to evaluate your app’s performance quickly and find out more about how to measure barcode scanning performance in our in-depth best practice guide.

Start barcode scanning on the web

Add enterprise-class barcode scanning in minutes with SparkScan.

Try for free

How do I build a JavaScript barcode scanner manually?

To build a JavaScript barcode scanner manually, first choose the appropriate SDK, then configure barcode symbology support, customize the UI, and test scanning under real-world conditions.

Your best option for balancing customization with development velocity is to use a pre-built barcode scanning component for the web, such as Scandit SparkScan. Pre-built components solve many integration challenges for you and reduce timelines, while still allowing for customization.

SparkScan offers these features:

• High-speed scanning for any situation, including data-dense codes and tiny, torn, damaged, curved, and shiny barcodes.
• AI scanning engine that reduces unwanted scans by up to 100% and has a 0% false positive rate for all major barcodes.
• Rapid decoding of barcodes even at long range, in low light, or at extreme angles.
• An optimized user experience, including a shutter button and camera preview that floats on top of any web app.
• Easily customize colors, sizes, and positions of UI elements to fit your app’s existing UI.

SparkScan’s trigger button comes with a semi-transparent background and lets users drag it to their preferred position. When not in use, the trigger button collapses, and the camera preview disappears to free up screen real estate.

When run, the sample application looks similar to this:

The prerequisites for these steps are:

• The ListBuildingSample added to your IDE’s workspace. If you don’t have an IDE handy, you can run the sample now in StackBlitz.
• A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

1. Add the Scandit Data Capture SDK license key to your project

To run the application, you must add the Scandit Data Capture SDK license key to the project. In the sample app, you can do this in two ways:

Add an environment variable

1. Open .env.example in an editor and insert your license key after SCANDIT_LICENSE_KEY=.
2. Save and rename the file to .env.

Add programmatically

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Replace -- ENTER YOUR SCANDIT LICENSE KEY HERE -- with your license key.

2. Run the sample app

To test that your license key works and the app runs, build and deploy the application onto your target device. If you’re using StackBlitz, the app should run automatically once you update the license key.

Once running, follow these steps to capture barcodes using your device’s camera:

IMAGE - REQ ACCESS

3. Change supported symbologies

The symbologies your app supports are configured through SparkScanSettings. The sample app is configured to support EAN-13, UPC-12/UPC-A, and Code 128 symbologies.

To change this to the symbologies for your use case:

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. Modify the call to enableSymbologies() as follows:

this.sparkScanSettings.enableSymbologies([Symbology.EAN13UPCA, Symbology.Code128, Symbology.QR, Symbology.Code39]);

Here, we’ve added support for QR codes and Code 39.

4. Customize the user interface

The SparkScan built-in user interface includes the camera preview and scanning UI elements. These guide the user through the scanning process.

You can customize many aspects of the default SparkScan UI and UX to suit your needs and use cases. These customizations include the colors of all items (i.e., icons, buttons, toolbar), trigger button icon, size of the preview window, and more.

The graphic below shows three different examples of how colors, positions, and sizes can be customized to fit different apps.

1. Open /src/app/presenter.ts and navigate to the connect() method.
2. To change the size of the camera preview, navigate to where SparkScanViewSettings is declared:

   this.sparkScanViewSettings = new SparkScanViewSettings();

   Copy
3. Add this line to change the camera preview from its default smaller size to a larger window:

   this.sparkScanViewSettings.defaultMiniPreviewSize = SparkScanMiniPreviewSize.Expanded;

   Copy
4. To change the color of the trigger button background and its animation (the pulsing effect shown when the scanner is active), navigate to where SparkScanView is declared:

   this.sparkScanView = SparkScanView.forElement(
     document.getElementById("spark-scan-ui")!,
     this.dataCaptureContext,
     this.sparkScan,
     this.sparkScanViewSettings
   );

   Copy
5. Add the following lines below this declaration. Here, hex values are used to specify different shades of blue.

   this.sparkScanView.triggerButtonExpandedColor = Color.fromHex("#123768");
   this.sparkScanView.triggerButtonAnimationColor = Color.fromHex("#59D3DE");

   Copy
6. To change the toolbar background color, add:

   this.sparkScanView.toolbarBackgroundColor = Color.fromHex("#01AAA7");

   Copy

5. Change error feedback

To show an error message when scanning specific barcodes, such as those already added to an existing list, you can customize SparkScan’s error feedback prompt.

The following steps explain how to change the error message and add a color overlay in the sample app when the user scans a specific barcode number.

1. Open /src/app/presenter.ts and navigate to the isBarcodeRejected() method.
2. Replace the barcode number in the following statement with a barcode number you have:

   return barcode.data === "9781738187539";

   Copy
3. Navigate to the getFeedbackForBarcode() method.

Change the first if statement from this:

return new SparkScanBarcodeErrorFeedback("Barcode rejected.", 60_000);

to this:

return new SparkScanBarcodeErrorFeedback("Barcode is incorrect.", 60_000, Color.fromHex("#FF0000"), new Brush(Color.fromHex("#00FFFF"), Color.fromHex("#FFFFFF"),1));

The method’s parameters are:

• message: The error message to display when a wrong barcode is captured.
• resumeCapturingDelay: The time interval after which to resume the capture process, in milliseconds.
• visualFeedbackColor: The color to flash the screen when the wrong barcode is scanned, set using the Color class.
• brush: The color of the solid shape laid over the barcode to indicate that it was rejected, set using the Color class.

The method also has a parameter to emit a sound and vibrate the device when it is called.

With these basics in place, you’re ready to add barcode scanning to your own web app!

TESTING THE SCANDIT JAVASCRIPT SDK IS EASY

Integrate with just a few prompts using Scandit Agent Skills

Try for free

How Scandit supports JavaScript barcode scanning

Scandit’s JavaScript Barcode Scanner SDK is an AI-powered capture engine and Agent Skills knowledge base that adapts to any workflow and edge case. Proven across hundreds of billions of scans on many device types and frameworks, our software scans the right code every time, regardless of label or environmental condition.

Scandit’s performance

Here’s what you get with the Scandit JavaScript Barcode Scanner SDK:

• Zero false positives for all major barcode symbologies.
• Greater than 99% accuracy for common barcode symbologies.
• Decode speeds of 480 scans per minute, faster than human perception.
• Reliable barcode scanning under less-than-ideal conditions: tiny, torn, damaged, curved, or shiny barcodes, long scan ranges, low light, and extreme angles.
• Successful captures with camera resolutions as low as 240x320 pixels and barcode resolutions as low as 0.5 pixels per thin barcode element.
• Compiles in WebAssembly (Wasm) to bring highly efficient load times and footprint for reduced latency and faster downloads.
• Supports Progressive Web Apps (PWA) on newer versions of Android and iOS.

The Scandit Vision AI Engine is the intelligence behind the Scandit Smart Data Capture Platform, which powers our barcode, ID, and label scanning, as well as ShelfView products. Additionally, the Scandit JavaScript Barcode Scanner SDK is built on a C/C++ foundation, ensuring core features load efficiently in the background and consume minimal system resources.

Framework support

The Scandit JavaScript Barcode Scanner SDK supports JavaScript, TypeScript, React, Svelte, Angular, Vue/Vue.js, Next.js, and all major web browsers. Read our system requirements to learn what’s needed.

For developers working across platforms, Scandit’s barcode scanning products are also available for Native iOS, Native Android, Cordova, Xamarin , .NET (iOS/Android and MAUI), React Native, Flutter, Capacitor, and Titanium.

Security and privacy

Scandit follows a security by design philosophy, where you retain complete control over data collection and processing. From a development perspective, this means:

• All image processing is performed on the device to ensure confidentiality and high availability of scanning.
• Any data you choose to share with Scandit is encrypted during transit and at rest.
• Scandit is ISO 27001:2022 Certified and compliant with applicable privacy regulations, including GDPR and CCPA.

For a complete barcode scanner SDK evaluation kit, read our guide to choosing the best barcode scanner SDK for your app.

How does Scandit compare with ML Kit and ZXing for Javascript barcode scanning?

Here’s a table showing how we believe Scandit compares with the free ML Kit and ZXing barcode scanning libraries for Javascript apps. The versions compared are current as of July 2026, with ZXing in maintenance mode since 2019.

In summary, choose Scandit for production apps that require native Javascript support, zero false positives, pre-built workflows, AI scanning features, and enterprise-grade support SLAs. Use ML Kit when you need the additional capabilities of Google’s machine vision APIs. Use ZXing only when its maintenance status and features fit your risk profile.

Product features

*According to the ZXing documentation, it detects multiple barcodes by repeatedly decoding portions of the image. After one barcode is found, the areas left, above, right, and below it are scanned recursively.

**The Scandit SDK detects multiple barcodes in full-frame images in real-time, and tracks their positions as they move in and out of frame.

Security and compliance

These results are based on side-by-side feature comparisons in April 2025 (ML Kit) and December 2025 (ZXing). For a deeper comparison between Scandit and these libraries, including performance testing results, read our ML Kit Barcode Scanner vs. Scandit and ZXing Barcode Scanner vs. Scandit blogs.

Your JavaScript barcode scanner is more than just a technical choice

Helpful UX, high performance, and AI support are critical goals when selecting and implementing a JavaScript barcode scanner library. Fewer user frustrations and adaptability to growing business demands are far preferable to low adoption rates, bug reports, and unhappy business leaders.

Two issues were important to us when implementing the web-based rail maintenance mobile apps. The first was guaranteeing the scanning solution’s high performance across multiple types of barcode. The second was how well the product would be supported. Scandit outperformed alternative open-source and plug-in solutions on both fronts.

Stefan Graf, Product Owner, SAP Cloud Technologies, SBB CFF FFS