Svelte Barcode Scanner

Scan barcodes and QR codes in your Svelte app with STRICH Barcode Scanning SDK.

> npm i @pixelverse/strichjs-sdk
Launch demo ↗ Start free trial ↗

Flag of Switzerland Made in Switzerland

Runs in the browser

Add barcode scanning to your Svelte app: fully client-side processing, no backend required!

Simple, transparent pricing

No large up-front commitment. Unlimited devices. Cancel anytime. Free 14-day trial.

Built for developers

Zero dependencies. Works with all frameworks. Great docs for humans and agents alike.

Quick start: scan with the Popup Scanner

The fastest way to scan a barcode in Svelte. No component to write, just call PopupScanner.scan() from an event handler and await the result.

The Popup Scanner is a configurable modal dialog over your app and closes as soon as a matching barcode is read. It's intentionally light, but still configurable enough to fit your app:

  • Customizable labels for user guidance. Defaults are localized to the browser language.
  • Colors to match your app's branding.
  • Audio and vibration feedback on each scan.
  • Custom detectionHandler to validate codes, or to keep the dialog open until all required barcodes have been scanned.

Check out our Popup Scanner guide, or dive directly into the Svelte sample code to get started.

BarcodeReader: Add an embeddable scanner to your Svelte app

For more fine-grained control over the integration, embed a BarcodeReader in your Svelte app.

When scanning is central to a screen, for example a stock-taking view with the camera on top and scanned items below, embed the scanner using the BarcodeReader API. Our sample component wraps the BarcodeReader with a Svelte component and ties its lifecycle to the component's lifecycle.

For detailed sample code, refer to our Svelte sample code on Github. The repository contains a sample component as well as examples for single, multiple and repeated scanning use cases.

Install and initialize

Install from NPM. Our SDK has zero dependencies, and we use Trusted and Staged Publishing. 

➜ npm i @pixelverse/strichjs-sdk

Before scanning, you need to initialize the SDK with your license key: 

await StrichSDK.initialize('your-license-key');

You'll need a license key: Start a free trial and create one in the Customer Portal. License keys are scoped to your app URLs: localhost and private IP ranges are always included, so local development works out of the box.

Trusted in production

Portrait of Dinesh Kumar
“I migrated an existing project from Dynamsoft to STRICH - it was painless and the user experience was vastly superior. The library was painless to integrate, the SDK is well thought out, and the performance excellent.”

Dinesh Kumar, CTO @ Lumanorth

Portrait of Cameron Myers
“We tried a number of different libraries for barcode scanning but always had compatibility issues. With STRICH we got fast, reliable scanning with no issues. Integration was easy, we were up and running in production in a day. We couldn’t recommend it more!”

Cameron Myers, Web Dev @ Brooklyn Public Library

Portrait of Johny Ho
“We did an extensive analysis on commercial barcode scanner SDKs and STRICH provided the best value for performance. Alex was also great to work with and quick to respond to questions.”

Johny Ho, Dev Team Lead @ Thoughtbot

Not convinced? See how companies like Brooklyn Public Library, Swiss Railways (SBB) and Zeercle use STRICH for their scanning processes, or read our article on Barcode scanning in web apps.

Svelte tips

Implementation guidance and some common pitfalls to avoid.

Check our sample code

We have extensive sample code available on GitHub. Have a look to get a feeling, or point your agent at it and let it explain it to you.

Initialize the SDK before the user needs it

Calling StrichSDK.initialize() before using PopupScanner or BarcodeReader. Initialization may perform an online license check, so be sure to do it as early as possible (app startup), so the scanner opens without delay.

Destroy the reader in onDestroy

The BarcodeReader holds the camera. If it isn't destroyed in Svelte's onDestroy hook, the next initialization will fail because the camera is still in use. PopupScanner manages this automatically.

Keep the host element's size fixed

The scanner's container must use position: relative and a fixed size while scanning. Give it an explicit height (e.g. 300px) rather than letting it grow or shrink with the content around it, such as the list of scanned items.

Stop/start instead of remounting

For flows with user interaction between multiple scans, such as confirming each item, considering calling stop() and start() on the BarcodeReader. That way the camera stays open, and scanning resumes instantly.

Scanning QR codes in Svelte

Both integrations read QR codes, and all other supported types, through the same API. Enable QR codes with by configuring the 'qr' symbology. See supported barcode types for the full list.

Frequently asked questions

Is there a Svelte component package?

STRICH has zero dependencies and works with any framework. The Popup Scanner needs no component at all, and the Svelte sample code is all it takes to embed the scanner. Copy it into your project and adapt it, or tell your agent to do it.

Which Svelte versions are supported?

Any recent Svelte version works. STRICH doesn't place any requirements on the web framework it runs on.

Does it include TypeScript types?

Yes. The SDK ships with full TypeScript definitions.

Is there a free trial?

Yes, we offer a 14-day free trial. A credit card or PayPal is required to start the trial, but you won't be charged if you cancel before it ends.

How much does STRICH cost?

Plans start at €99/month for up to 10'000 scans, with unlimited devices and applications. Business and Enterprise licenses have flat annual pricing with unlimited scans and devices. See pricing.

Does barcode data leave the device?

No. Barcodes are decoded on the device, in the browser. The SDK only uses connectivity to perform license check and track usage, never barcode contents. Online license checks and usage tracking can both be disabled with add-ons in Business and Enterprise plans.

Which browsers are supported?

All major browsers on Android and iOS. The camera requires HTTPS (or localhost) and the decoding requires support for WebAssembly.

Still have questions? Check out the full FAQ.

Start your free 14-day trial today

Integrating STRICH into your web app typically takes less than a day. Or try our free demo app and convince yourself that STRICH meets your needs.

Launch demo app ↗ Start free trial ↗