Code Craft Studio — a project by Ahsan Mahmood
React library to scan and generate QR codes and barcodes, with optional Capacitor native support for Android and iOS.
A QR code is not a picture of a link.
It is a small encoding format with types inside it. A WiFi network is one shape. A contact card is another, a calendar event a third, and each carries a syntax a scanner either recognises or renders as a line of characters that means nothing to anybody.
Get the shape wrong and it still scans.
That is what makes this area quietly annoying. A malformed WiFi payload does not raise an error anywhere; it produces a code that opens as gibberish on somebody's phone at the door of a café, and no one in that exchange finds out why.
Code Craft Studio covers the whole surface instead of one corner of it.
Generation runs across 22 or more purpose-typed QR shapes, including WiFi, contact cards, events, locations, coupons and menus, with the syntax handled per type rather than left to the caller. Barcodes cover 14 or more formats: EAN, UPC, Code 128, Code 39, Code 93, ITF, Codabar, Data Matrix, PDF417 and Aztec.
Scanning is the other half, and it has a platform problem.
A browser reads a code through the camera, and for most applications that is the end of the story. It is not the end of the story in a warehouse, where a scan happens hundreds of times an hour, in poor light, at an angle nobody would choose. Native scanners are better at precisely that, which is why the same API upgrades to a platform scanner through ML Kit when Capacitor is present.
The calling code does not change. Because Capacitor stays optional, a plain React application carries none of it.
The interface layer is provider-less: one hook, plus drop-in components for scanning, generating and a combined studio view, so a working scanner is an import rather than a project.
Design customisation is not decoration here.
Colours, an embedded logo, frames, dot and corner styles all change how reliably a code reads, and the error-correction level decides whether a logo in the middle costs you a scan. Exposing those together is the difference between a code that looks right on a screen and one that reads off a printed menu under a bad lamp.
Validation runs per type. Barcode checksums are verified rather than assumed, because a check digit nobody checks is a decorative digit.
None of that is visible until the code leaves the screen. A code is generated on a laptop and then read off a laminated card, a receipt, a menu under glass or a phone held at arm's length, and the failures live in that gap rather than in the encoder.
What it does not have today is worth naming plainly.
Real analytics, extra export formats and cloud sync are not in it. Scanning and generating are the finished parts; those three are not, and a page implying otherwise would be exactly the sort of claim you discover an hour after installing.
The native path is Android. There is no iOS release behind this work, because there is no Apple Developer account here. A phone gets the browser camera instead.
MIT, on npm as code-craft-studio.
A scanner that works in a demonstration and fails in a stockroom is the ordinary outcome in this area, and the platform adapters exist for that gap rather than for the demonstration.
What it does, and what that costs to build
- Browser-camera QR scanning with optional native upgrade
- Multi-format barcode scanning (EAN, UPC, Code 128/39/93, ITF, PDF417, Aztec)
- QR generation across 22+ typed data shapes (WiFi, vCard, event, coupon)
- Barcode generation across 14+ 1D and 2D formats
- Design customization: colors, embedded logo, frames, error correction
- Provider-less useCodeCraftStudio() hook plus drop-in React components
- Runtime platform adapters selecting web or Capacitor native scanning
- Per-type validation and barcode checksum verification
Built with
- TypeScript
- React
- Capacitor
- @zxing/library
- jsbarcode
- qr-scanner
- qrcode
- ML Kit
- Vision framework
- Rollup
- Swift
- Kotlin
Worth knowing
- qr-code
- barcode
- react
- typescript
- capacitor
- scanner
- npm-package
- cross-platform
Who built Code Craft Studio?
Ahsan Mahmood built it, scanner and generator both, along with the platform adapters that pick between the browser camera and a native scanner. It is on npm as code-craft-studio under MIT, and the npm page is the link this project has. Building both halves matters more than it sounds here. A generator that emits a slightly wrong WiFi payload and a scanner that happily reads it are two bugs that hide each other, so writing both sides against one set of type definitions is the point rather than a coincidence.
Do I need a native app to scan a code?
No. The browser camera path works in a plain React application, with no Capacitor and no native build involved anywhere. Adding Capacitor upgrades the same API to a platform scanner through ML Kit, which starts to matter when scanning happens hundreds of times an hour in poor light rather than once in a demonstration. Your calling code does not change between the two, because the platform adapter is selected at runtime. A web-only project carries none of the native surface in its bundle.
Does Code Craft Studio work on iPhone?
The browser camera path runs in a phone browser, an iPhone included, because that half is a web API rather than platform code. The native scanning upgrade is Android, through ML Kit. There is no iOS release behind this work, because there is no Apple Developer account here and nothing I build has shipped to the App Store. So a code will scan on an iPhone through the browser, and no claim is being made anywhere about a native Apple scanner.
Which formats does it read and generate?
Barcodes across 14 or more formats, including EAN, UPC, Code 128, Code 39, Code 93, ITF, Codabar, Data Matrix, PDF417 and Aztec, plus QR codes across 22 or more purpose-typed shapes such as WiFi, contact cards, events, locations, coupons and menus. The typed shapes are the useful part rather than the count. A WiFi code and a contact card have different syntaxes, and getting one slightly wrong produces a code that scans perfectly and then shows a stranger a line of nonsense.
What is not in Code Craft Studio today?
Real analytics, additional export formats and cloud sync are not in it. Scanning and generating are the finished parts, and those three are named here rather than left for you to find after the install. Design customisation is present and worth knowing about, since colours, an embedded logo, frames and the error-correction level all change how reliably a printed code reads. What the library cannot tell you is whether your printer, your lamination or the lighting ruined the result, and only a test print answers that.
https://aoneahsan.com/projects/com.aoneahsan.codecraftstudio