Glyphicore Engine

Enterprise QR, Barcode and Visual-Code SDK for TypeScript

Generate, render, inspect, export, batch, print and scan QR codes, barcodes and custom visual identifiers from one custom-owned TypeScript engine.

Created by Pradeep Kumar Sheoran (Stack Developer)

BSG Technologies · +91-8595147850 (Also WhatsApp)

Visit the Official BSG Technologies Website

Visit here to meet, learn, contribute, discuss new topics with us and accept a coffee invitation.

🎓 Learn Here — Start without confusion

New developer? Start with the Function Selector, install the package, copy the quickstart, and then open the lesson matching your task. Every lesson explains what the function does, its syntax, parameters, return value, output, errors and real use cases.

Table of contents

1. Why Glyphicore
2. Install and quickstart
3. Choose the correct entrypoint
4. Which function should I use?
5. Learn Here lessons
6. Complete function list
7. Complete old and new feature list
8. Enterprise capability graph
9. Barcode formats
10. Error handling guide
11. Questions and answers
12. Quality and verification
13. Custom-owned runtime
14. Creator and support

Why Glyphicore

Glyphicore is not only a React QR component. It contains a standards-oriented QR engine, barcode encoders, renderers, payload builders, enterprise exports, Node and React Native-safe artifacts, browser scanning helpers, batch processing and framework-neutral integration.

| Requirement | Glyphicore support | | --- | --- | | QR versions 1–40 | ✅ Automatic or forced version selection | | Error correction | ✅ L, M, Q and H | | QR data modes | ✅ Numeric, alphanumeric, byte and automatic mixed segmentation | | Unicode | ✅ UTF-8 with ECI assignment 26 | | GS1 QR | ✅ FNC1 first/second-position headers | | Structured append | ✅ 2–16 related symbols | | Code 128 | ✅ Automatic A/B/C optimization and SHIFT support | | Retail/logistics barcodes | ✅ EAN-13, UPC-A, ITF-14, ISBN, GS1-128, Code 39 and Codabar | | React | ✅ Components, hooks and imperative export refs | | React Native | ✅ DOM-free QR, barcode and custom-code artifacts | | Node | ✅ Dependency-free PNG byte generation | | Other frameworks | ✅ Web Component for Vue, Angular, Svelte and plain HTML | | Export and printing | ✅ SVG, Canvas, PNG, PDF, ZIP, label sheets, print HTML and ZPL | | Batch work | ✅ Isolated errors, concurrency, cancellation, progress and worker handler | | Runtime generator dependency | ✅ None |

Install and quickstart

npm install glyphicore-engine

Install React only when using React components or hooks:

npm install react react-dom

React quickstart

import { QRCode, Barcode } from 'glyphicore-engine/react';

export function InvoiceCodes() {
  return (
    <section>
      <QRCode
        value={{ invoiceId: 'INV-1001', amount: 2500 }}
        size={240}
        errorCorrectionLevel="H"
        title="Invoice INV-1001 QR code"
      />

      <Barcode
        value="4006381333931"
        type="ean13"
        width={320}
        height={120}
        showText
        title="Product EAN-13 barcode"
      />
    </section>
  );
}

Output: an accessible QR code and a scanner-compatible EAN-13 barcode are rendered as SVG.

Headless TypeScript quickstart

import { generateQRMatrix, renderQRToSVG } from 'glyphicore-engine/core';

const matrix = generateQRMatrix('HELLO GLYPHICORE', {
  errorCorrectionLevel: 'M'
});

const svg = renderQRToSVG(matrix, { size: 280, title: 'Hello QR' });
console.log(matrix.length); // 21 for a small Version 1 symbol
console.log(svg.startsWith('<svg')); // true

Choose the correct entrypoint

| Import path | Use it when | React required | | --- | --- | :---: | | glyphicore-engine | You want the complete browser/React API | Optional by feature | | glyphicore-engine/core | Node, SSR, workers or headless TypeScript | No | | glyphicore-engine/react | React components and hooks | Yes | | glyphicore-engine/react-native | Native SVG/image bridge artifacts | No | | glyphicore-engine/node | Real PNG bytes on a Node server | No | | glyphicore-engine/payloads | Wi-Fi, contact, payment and other QR strings | No | | glyphicore-engine/scanner | Browser BarcodeDetector scanning | No | | glyphicore-engine/web-component | Vue, Angular, Svelte or plain HTML | No |

Which function should I use?

| I want to… | Use this API | Result | | --- | --- | --- | | Show a QR in React | QRCode | React-rendered SVG or Canvas | | Show a barcode in React | Barcode | React-rendered barcode | | Show a proprietary visual identifier | CustomCode | React-rendered custom code | | Choose code type at runtime | CodeRenderer | QR, barcode or custom component | | Use QR data inside a React component | useQRCode | Matrix, SVG, data URL and downloads | | Generate QR without React | generateQRMatrix | boolean[][] matrix | | Understand QR size/capacity | inspectQRCapacity | Diagnostics object | | Place a logo safely | calculateQRLogoSafety | Recommended logo box and warnings | | Split a large message | createStructuredAppendQR | 2–16 linked QR symbols | | Generate any supported barcode | generateBarcodePattern | Barcode module pattern | | Generate a custom visual pattern | generateCustomCode | Deterministic custom cells | | Create SVG/Blob/bytes/Canvas | generateCodeResponse | Requested output format | | Generate multiple items | generateBatchCodes | Per-item success/error results | | Run concurrent cancellable batch work | generateBatchCodesAsync | Promise of ordered results | | Move generation into a Web Worker | createBatchWorkerHandler | Worker message handler | | Create printable labels | createSVGLabelSheet | One SVG label sheet | | Create a vector QR PDF | createQRPDF | PDF Uint8Array | | Create thermal-printer commands | createZPLCode | ZPL string | | Download many generated files | createZipArchive | ZIP Uint8Array | | Generate PNG on Node | generateQRPNG | PNG Uint8Array | | Scan a browser image/video frame | scanCode / scanVideoFrame | Decoded results | | Use a non-React framework | registerGlyphicoreElement | <glyphicore-code> element | | Create scanner-friendly content | Payload builder functions | Correct payload string |

🎓 Learn Here lessons

Lesson 1 — QRCode: show a QR code in React

Description: QRCode is the easiest API for React users. Give it a string, number, array or object and it generates plus renders the QR code.

Syntax

<QRCode value={value} size={240} errorCorrectionLevel="M" />

| Parameter | Type | Required | Meaning | | --- | --- | :---: | --- | | value | CodeValue | ✅ | Content stored inside the QR code | | size | number | ❌ | Final width and height in CSS pixels; default 240 | | errorCorrectionLevel | L \| M \| Q \| H | ❌ | Damage recovery level; default M | | renderAs | svg \| canvas | ❌ | Rendering technology; default svg | | moduleShape | square \| rounded \| dots \| diamond | ❌ | Visual module style | | eyeStyle | square \| rounded \| dots | ❌ | Finder-eye style | | gradient | GradientOptions | ❌ | Linear or radial foreground gradient | | embeddedLogo | LogoOptions | ❌ | Logo included in generated SVG/data URL | | title, description | string | ❌ | Accessible SVG metadata | | onGenerate | callback | ❌ | Receives generated artifact and download helpers | | onError | callback | ❌ | Receives generation errors |

Return value: React element. With a ref, it exposes getSVG, getDataURL, downloadSVG and downloadPNG.

import { useRef } from 'react';
import { QRCode, type GlyphicoreImperativeHandle } from 'glyphicore-engine/react';

const ref = useRef<GlyphicoreImperativeHandle>(null);

<QRCode ref={ref} value="ORDER-101" title="Order 101" />;
ref.current?.downloadSVG('order-101.svg');

Output: a downloadable order-101.svg containing the QR.

Errors: invalid forced version, invalid color, incompatible forced mode or payload overflow calls onError and renders no broken code.

Use cases: tickets, invoices, URLs, product pages, Wi-Fi access and payments.

Lesson 2 — Barcode: show a barcode in React

Syntax

<Barcode value="4006381333931" type="ean13" showText />

| Parameter | Type | Required | Meaning | | --- | --- | :---: | --- | | value | CodeValue | ✅ | Data to encode | | type | BarcodeType | ❌ | Default is code128 | | width, height | number | ❌ | Output dimensions | | showText | boolean | ❌ | Shows readable text | | textPosition | top \| bottom | ❌ | Text position | | lineColor, backgroundColor | string | ❌ | Barcode colors | | onGenerate, onError | callbacks | ❌ | Success/error hooks |

Return value: React element plus the same imperative export handle as QRCode.

Output: EAN-13 SVG with readable text.

Errors: wrong length, invalid characters or checksum mismatch.

Use cases: inventory, retail products, logistics, books and warehouse labels.

Lesson 3 — CustomCode and CodeRenderer

| API | Syntax | Return | Best use | | --- | --- | --- | --- | | CustomCode | <CustomCode value="TOKEN" pattern="matrix" /> | React visual pattern | Private/internal identifiers | | CodeRenderer | <CodeRenderer type="qr" value="TOKEN" options={{ size: 240 }} /> | Selected React renderer | Forms where users choose code type |

<CodeRenderer
  type="barcode"
  value="ORDER-1001"
  options={{ type: 'code128', showText: true }}
/>

Output: Code 128 barcode. Errors: forwarded to onError. Use cases: admin builders and reusable dynamic-code screens.

Lesson 4 — React hooks

| Function | Syntax | Return value | Use it when | | --- | --- | --- | --- | | useQRCode | useQRCode(value, options?) | QR artifact | Your component needs SVG/data URL/download methods | | useBarcode | useBarcode(value, options?) | Barcode artifact | You want a custom barcode UI | | useCustomCode | useCustomCode(value, options?) | Custom artifact | You want a custom-code preview/export flow |

const qr = useQRCode({ ticketId: 'TKT-101' }, { errorCorrectionLevel: 'H' });

return qr.error
  ? <p>{qr.error.message}</p>
  : <img src={qr.dataURL} alt="Ticket TKT-101" />;

Output: { matrix, svg, dataURL, getSVG, getDataURL, downloadSVG, downloadPNG }.

Lesson 5 — generateQRMatrix

Description: the main headless QR function. It performs mode selection, version selection, error correction, block interleaving and mask scoring.

generateQRMatrix(value: string, options?: QRGenerationOptions): boolean[][]

| Parameter | Type | Meaning | | --- | --- | --- | | value | string | Exact content to encode | | errorCorrectionLevel | L \| M \| Q \| H | Recovery level | | version | 1..40 | Force a version; omit for automatic selection | | mode | auto \| numeric \| alphanumeric \| byte | Encoding mode | | eci | boolean \| 26 | UTF-8 ECI control | | fnc1 | first \| { applicationIndicator } | GS1/FNC1 QR header |

Return: square boolean[][]; true means a dark module.

const matrix = generateQRMatrix('INVOICE-2026-1001', { errorCorrectionLevel: 'Q' });
console.log(matrix.length); // for example: 25

Errors: version outside 1–40, data too large, invalid ECI, invalid FNC1 indicator or content incompatible with a forced mode.

Use cases: custom renderers, Node services, workers, tests and native bridges.

Lesson 6 — QR intelligence functions

| Function | Syntax | Parameters | Return | Use case | | --- | --- | --- | --- | --- | | inspectQRCapacity | inspectQRCapacity(value, level?) | text, L/M/Q/H | Version, bytes, blocks, utilization, recommendations | Decide size before rendering | | calculateQRLogoSafety | calculateQRLogoSafety(matrix, level?, ratio?) | matrix, correction, desired logo ratio | Safe box and warnings | Center-logo planning | | createStructuredAppendQR | createStructuredAppendQR(value, options?) | text, symbol count, correction | Linked symbol records | Split a long logical payload | | optimizeQRSegments | optimizeQRSegments(value) | text | Numeric/alphanumeric/byte segments | Inspect automatic compaction | | encodeQRData | encodeQRData(value, options?) | text and encode options | Codewords, spec, mode, segments | Advanced diagnostics/testing |

const report = inspectQRCapacity('HELLO WORLD', 'M');
console.log(report.version);          // 1
console.log(report.quietZoneModules); // 4

Errors: malformed options or payload overflow. Structured append also rejects a symbol count outside 2–16.

Lesson 7 — barcode engine functions

Recommended router

generateBarcodePattern(value: unknown, options?: BarcodeOptions): BarcodePattern

const pattern = generateBarcodePattern('(01)09506000134352(10)LOT1', {
  type: 'gs1-128'
});

console.log(pattern.type);         // gs1-128
console.log(pattern.modules.length > 0); // true

| Function | Input | Return | Errors | Best use | | --- | --- | --- | --- | --- | | generateBarcodePattern | value + barcode type | BarcodePattern | Unsupported type/invalid value | General barcode generation | | generateCode128 | ASCII text | Optimized Code 128 pattern | Empty/unsupported character | Orders and mixed identifiers | | optimizeCode128 | ASCII text | Start code, symbols and used sets | Unsupported character | Inspect A/B/C switching | | generateEAN13 | 12/13 digits | EAN-13 pattern | Length/checksum | Retail products | | generateUPCA | 11/12 digits | UPC-A pattern | Length/checksum | North American retail | | generateITF14 | 13/14 digits | ITF-14 pattern | Length/checksum | Cartons and logistics | | generateISBN | ISBN-10/13 | EAN-compatible ISBN pattern | Invalid ISBN form | Books | | generateGS1128 | (AI)value sequence | GS1-128 pattern | AI/type/date/check digit | Supply chains | | generateCode39 | supported uppercase text | Code 39 pattern | Unsupported symbols | Industrial labels | | generateCodabar | A...A, B...B, etc. | Codabar pattern | Missing start/stop | Libraries/labs/legacy flows |

Lesson 8 — render and export functions

| Function | Syntax | Return | Common error | Use case | | --- | --- | --- | --- | --- | | renderQRToSVG | (matrix, options?) | SVG string | Non-square matrix/invalid color | Server or browser SVG | | renderQRToCanvas | (canvas, matrix, options?) | void | Missing 2D context | Interactive browser preview | | renderBarcodeToSVG | (pattern, options?) | SVG string | Invalid color/dimensions | Printable barcode SVG | | renderBarcodeToCanvas | (canvas, pattern, options?) | void | Missing 2D context | Browser canvas | | renderCustomCodeToSVG | (pattern, options?) | SVG string | Invalid options | Custom visual SVG | | renderCustomCodeToCanvas | (canvas, pattern, options?) | void | Missing 2D context | Custom canvas preview | | generateCodeResponse | ({ type, value, output, options }) | Requested artifact | Canvas outside browser | Universal export API | | svgToPNGDataURL | (svg, width?, height?) | Promise<string> | Browser rasterization unavailable | Real PNG conversion |

const svg = generateCodeResponse({
  type: 'qr',
  value: 'TICKET-101',
  output: 'svg',
  options: { size: 320, errorCorrectionLevel: 'H' }
});

Output: an SVG string because output: 'svg' was selected.

Supported output values: matrix, pattern, svg, dataURL, blob, arrayBuffer and browser-only canvas.

Lesson 9 — batch, worker and enterprise exports

| Function | Parameters | Return | What it solves | | --- | --- | --- | --- | | generateBatchCodes | request array | ordered result array | Simple synchronous batches | | generateBatchCodesAsync | requests + concurrency/signal/progress | Promise<BatchCodeResult[]> | Large cancellable batches | | createBatchWorkerHandler | worker postMessage callback | async event handler | UI-thread isolation | | createSVGSprite | { id, svg }[] | SVG sprite string | Reuse codes in one document | | createSVGLabelSheet | label items + grid options | printable SVG | Product/ticket sheets | | createPrintDocument | sheet SVG + title | complete HTML string | Browser printing | | createQRPDF | matrix + page options | PDF bytes | Vector PDF generation | | createZPLCode | value + printer options | ZPL string | Zebra-compatible printers | | createZipArchive | named string/byte files | ZIP bytes | Multi-file delivery |

const results = await generateBatchCodesAsync(requests, {
  concurrency: 4,
  signal: abortController.signal,
  onProgress: (done, total) => console.log(`${done}/${total}`)
});

Output: all results stay in input order. One invalid request receives its own error without deleting successful siblings.

Lesson 10 — payload builders

Payload builders do not draw a QR. They first create the scanner-friendly text; pass that text to QRCode or generateQRMatrix.

| Function | Main parameters | Example output starts with | Use case | | --- | --- | --- | --- | | createWiFiPayload | SSID, password, encryption, hidden | WIFI: | Join a Wi-Fi network | | createVCardPayload | name, phone, email, company | BEGIN:VCARD | Save a contact | | createEmailPayload | address, subject, body | mailto: | Compose email | | createSMSPayload | phone, message | SMSTO: | Compose SMS | | createPhonePayload | phone | tel: | Start a call | | createGeoPayload | latitude, longitude, query | geo: | Open a location | | createCalendarPayload | UID, start/end, summary | BEGIN:VCALENDAR | Add an event | | createUPIPayload | VPA, name, amount, note | upi://pay? | UPI payment | | createOTPAuthPayload | issuer, account, Base32 secret | otpauth://totp/ | Authenticator setup | | createCryptoPaymentPayload | scheme, address, amount | bitcoin: etc. | Crypto payment request | | createEPCPaymentPayload | name, IBAN, EUR amount | BCD | European bank payment | | createEMVCoPayload | merchant/currency/location fields | EMV TLV data | Merchant payment QR |

const wifi = createWiFiPayload({
  ssid: 'BSG Office',
  password: 'safe-password',
  encryption: 'WPA'
});

console.log(wifi); // WIFI:T:WPA;S:BSG Office;P:safe-password;H:false;;

Errors: missing required values, invalid coordinates, invalid dates, invalid VPA/Base32/IBAN-like formats or invalid payment metadata.

Lesson 11 — Node, React Native and browser scanner

| Function | Entrypoint | Return | Use case | | --- | --- | --- | --- | | generateQRPNG | /node | PNG Uint8Array | Save/send QR PNG from Node | | renderQRMatrixToPNG | /node | PNG Uint8Array | Render an existing matrix | | createNativeQRCode | /react-native | matrix, SVG, data URL, size | Native QR bridge | | createNativeBarcode | /react-native | pattern, SVG, data URL, size | Native barcode bridge | | createNativeCustomCode | /react-native | pattern, SVG, data URL, size | Native proprietary visual | | getSupportedScanFormats | /scanner | Promise<string[]> | Discover browser support | | scanCode | /scanner | decoded result array | Scan an image/canvas/bitmap | | scanVideoFrame | /scanner | decoded result array | Scan a ready video frame | | registerGlyphicoreElement | /web-component | void | Register a framework-neutral element |

import { writeFile } from 'node:fs/promises';
import { generateQRPNG } from 'glyphicore-engine/node';

await writeFile('ticket.png', generateQRPNG('TICKET-101', { scale: 10 }));

Output: a real PNG file. Errors: invalid Node PNG color or QR generation options.

Scanner note: scanCode uses the browser BarcodeDetector platform capability. Unsupported browsers throw a clear error; check getSupportedScanFormats() first.

Lesson 12 — HTTP and data conversion helpers

| Function | Input | Return | Use case | | --- | --- | --- | --- | | createSVGHttpResponse | export options | status, SVG headers, body | API route returning SVG | | createJSONHttpResponse | export options | JSON headers and body | API route returning JSON | | serializeData | supported value/object/array | stable string | Deterministic encoding | | svgToDataURL | SVG string | SVG data URL | <img src> | | canvasToDataURL | Canvas + MIME | data URL | Browser export | | toDataURL | SVG or Canvas | data URL | Universal conversion | | svgToBlob | SVG | Blob | Browser upload/download | | svgToFile | SVG + filename | File | Form upload | | downloadSVG | SVG + filename | void | Browser download | | downloadSVGAsPNG | SVG + dimensions | Promise<void> | Correct raster PNG download | | downloadPNG | PNG data URL + filename | void | Save existing PNG data URL |

const response = createSVGHttpResponse({ type: 'qr', value: 'ORDER-101' });

return new Response(response.body, {
  status: response.status,
  headers: response.headers
});

Complete function list

The following list is intentionally present on this same npm README page so users can see the package depth without opening another website.

| Category | Public functions/components | | --- | --- | | React components | QRCode, Barcode, CustomCode, CodeRenderer | | React hooks | useQRCode, useBarcode, useCustomCode | | QR generation | generateQRMatrix, encodeQRData, chooseQRSpec, optimizeQRSegments, detectQRDataMode, utf8Bytes | | QR diagnostics | inspectQRCapacity, calculateQRLogoSafety, createStructuredAppendQR | | Advanced QR internals | createErrorCorrection, maskBit, penaltyScore, getQRBlocks, getDataCodewordCapacity | | Barcode router | generateBarcodePattern | | Code 128 / GS1 | generateCode128, optimizeCode128, generateCode128FromCodes, generateGS1128, parseGS1Elements | | Other barcodes | generateEAN13, ean13Checksum, generateUPCA, upcChecksum, generateITF14, itf14Checksum, generateISBN, normalizeISBN, generateCode39, generateCodabar | | Custom code | generateCustomCode, fnv1a, bytesToBits | | SVG renderers | renderQRToSVG, renderBarcodeToSVG, renderCustomCodeToSVG, toSVGString | | Canvas renderers | renderQRToCanvas, renderBarcodeToCanvas, renderCustomCodeToCanvas, canvasToPNG | | Universal output | generateCodeResponse, createSVGHttpResponse, createJSONHttpResponse | | Data conversion | serializeData, svgToDataURL, canvasToDataURL, toDataURL, svgToBlob, svgToFile, svgToPNGDataURL | | Browser download | downloadPNG, downloadSVGAsPNG, downloadSVG | | Validation helpers | assertColor, styleToString, assertPositiveNumber, assertDigits | | Batch and worker | generateBatchCodes, generateBatchCodesAsync, createBatchWorkerHandler | | Enterprise export | createSVGSprite, createSVGLabelSheet, createPrintDocument, createQRPDF, createZPLCode, createZipArchive | | Payload builders | createWiFiPayload, createVCardPayload, createEmailPayload, createSMSPayload, createPhonePayload, createGeoPayload, createCalendarPayload, createUPIPayload, createOTPAuthPayload, createCryptoPaymentPayload, createEPCPaymentPayload, createEMVCoPayload | | React Native-safe | createNativeQRCode, createNativeBarcode, createNativeCustomCode | | Node | generateQRPNG, renderQRMatrixToPNG | | Scanner | getSupportedScanFormats, scanCode, scanVideoFrame | | Web Component | registerGlyphicoreElement | | Package identity | GLYPHICORE_PACKAGE_INFO |

Low-level helper details and exact signatures are also maintained in API_REFERENCE.md, while FUNCTION_LIST.md provides a printable standalone inventory inside the npm tarball.

Complete old and new feature list

Foundation features

• ✅ React QR, barcode and proprietary custom-code components
• ✅ SVG and Canvas rendering
• ✅ QR versions 1–40
• ✅ L/M/Q/H error correction
• ✅ Reed–Solomon error correction and eight-mask scoring
• ✅ Code 128, EAN-13, UPC-A, Code 39, ITF-14, Codabar, ISBN and GS1-128
• ✅ Grid, dots, blocks, stripes and matrix custom patterns
• ✅ Stable arrays/objects serialization
• ✅ Data URL and browser download helpers
• ✅ Custom colors, dimensions, margin and accessible metadata

Advanced engine features added later

• ✅ Automatic numeric/alphanumeric/byte mode
• ✅ Automatic mixed QR segmentation
• ✅ UTF-8 ECI assignment 26
• ✅ Multi-block Reed–Solomon interleaving
• ✅ QR structured append for 2–16 symbols
• ✅ GS1/FNC1 QR headers
• ✅ QR capacity diagnostics and logo safety reports
• ✅ Automatic Code 128 A/B/C selection and SHIFT support
• ✅ GS1 AI length, type, date and check-digit validation
• ✅ Gradients, transparency, module shapes and finder-eye styles
• ✅ Embedded logo in exported SVG/data URL
• ✅ Real PNG raster download

Enterprise and platform features added in v1.2+

• ✅ Concurrent batches with progress and cancellation
• ✅ Web Worker message handler
• ✅ SVG sprite and printable label-sheet generation
• ✅ Vector QR PDF generation
• ✅ Dependency-free ZIP archive generation
• ✅ ZPL QR/Code 128 thermal-printer output
• ✅ Dependency-free Node PNG generation
• ✅ DOM-free React Native QR/barcode/custom artifacts
• ✅ Browser-native scanning bridge
• ✅ Framework-neutral Web Component
• ✅ Wi-Fi, vCard, email, SMS, phone, geo and calendar payloads
• ✅ UPI, OTPAuth, crypto, EPC and CRC-protected EMVCo payment payloads
• ✅ Dedicated root/core/react/native/node/scanner/web-component/payload entrypoints
• ✅ ESM, CommonJS and dual TypeScript declaration conditions
• ✅ Packed consumer tests, publint, coverage and bundle-size gates
• ✅ Chromium, Firefox, WebKit and mobile browser checks
• ✅ React 18/19 CI matrix, SBOM and provenance release workflow

Enterprise capability graph

This graph reflects verified package coverage, not a marketing benchmark against another library.

| Capability area | Verified level | Visual graph | | --- | :---: | --- | | QR standards engine | 5/5 | 🟩🟩🟩🟩🟩 | | Barcode families | 5/5 | 🟩🟩🟩🟩🟩 | | React developer experience | 5/5 | 🟩🟩🟩🟩🟩 | | Rendering and exports | 5/5 | 🟩🟩🟩🟩🟩 | | Node/native/framework paths | 5/5 | 🟩🟩🟩🟩🟩 | | Batch/print/worker tooling | 5/5 | 🟩🟩🟩🟩🟩 | | Payload builders | 5/5 | 🟩🟩🟩🟩🟩 | | Verification and packaging | 5/5 | 🟩🟩🟩🟩🟩 |

Architecture flow

Your value
   ↓
Payload builder or stable serializer
   ↓
QR / Barcode / Custom engine
   ↓
Matrix or module pattern
   ↓
SVG · Canvas · PNG · PDF · ZPL · ZIP · HTTP · Native artifact

Barcode formats

| Type | Accepted input | Automatic checksum | Typical use | | --- | --- | :---: | --- | | code128 | ASCII 0–127 | ✅ | General logistics and order IDs | | gs1-128 | GS1 (AI)value elements | ✅ | Supply chain and regulated product data | | ean13 | 12 or 13 digits | ✅ | Global retail | | upc | 11 or 12 digits | ✅ | UPC-A retail | | itf14 | 13 or 14 digits | ✅ | Shipping cartons | | isbn | ISBN-10 or ISBN-13 | ✅ | Books | | code39 | Uppercase supported Code 39 set | Format-defined | Industrial labels | | codabar | Supported data wrapped with A/B/C/D | Format-defined | Legacy/library/lab systems | | custom | Positive bar/space widths | N/A | Private deterministic patterns |

Error handling guide

Direct functions

Direct engine functions throw an Error with a Glyphicore message:

try {
  const pattern = generateEAN13('123');
} catch (error) {
  console.error((error as Error).message);
  // Glyphicore EAN-13 requires 12 or 13 numeric digits.
}

React components

<QRCode
  value={value}
  onGenerate={(artifact) => console.log(artifact.svg)}
  onError={(error) => console.error(error.message)}
/>

Batch functions

const results = generateBatchCodes(requests);

for (const result of results) {
  if (result.error) console.error(result.id, result.error.message);
  else console.log(result.id, result.output);
}

Common mistakes

| Error | Why it happens | Fix | | --- | --- | --- | | Data too large for Version 40 | Payload exceeds selected correction capacity | Shorten data, lower correction, or use structured append | | Forced numeric mode rejects value | Text contains non-digits | Use mode: 'auto' | | Barcode checksum mismatch | Last digit is incorrect | Pass checksum-free input where supported or correct the check digit | | Canvas requires browser document | Canvas requested during Node/SSR | Use SVG/bytes or /node PNG API | | BarcodeDetector unavailable | Browser lacks native scanning API | Feature-detect and provide supported-browser guidance |

Questions and answers

It can now inspect capacity, optimize QR and Code 128 encoding, validate GS1 data, create styled exports, run cancellable batches, work inside a worker, create PDF/ZIP/ZPL/print sheets, generate Node PNG bytes, supply native artifacts, scan browser frames and expose a Web Component.

React developer: start with QRCode and Barcode. Backend developer: start with generateQRMatrix, renderQRToSVG and generateQRPNG. Payment/contact QR developer: start with payload builders and then pass their result to QRCode.

Use glyphicore-engine/core, /node or /payloads for headless work. React is an optional peer and is only required for React APIs.

Yes. Use embeddedLogo, prefer error correction H, call calculateQRLogoSafety, keep a four-module quiet zone and test the final asset on target cameras.

No. Each request receives its own output or error. The asynchronous API additionally supports cancellation, concurrency and progress.

Yes. Register glyphicore-engine/web-component, then use <glyphicore-code>. The headless core functions can also be called directly from any JavaScript framework.

No library can guarantee every camera/environment combination. High contrast, correct quiet zone, conservative logo size and final-device testing are required.

No. Glyphicore does not claim standards that are not implemented. It currently supports standard QR versions 1–40; browser scanning uses the native BarcodeDetector capability.

Quality and verification

| Quality gate | Current result | | --- | --- | | TypeScript strict check | ✅ Passed | | ESLint | ✅ Passed | | Unit/integration tests | ✅ 96 passed | | Independent QR decoder tests | ✅ Versions 1–40, L/M/Q/H and Unicode | | Independent barcode decoder tests | ✅ Code 128, EAN-13 and UPC-A | | Coverage | ✅ 82.77% statements, 89.59% lines | | Browser smoke | ✅ Chromium, Firefox, WebKit and mobile | | React compatibility CI | ✅ React 18 and 19 matrix configured | | ESM/CommonJS/types consumer | ✅ Packed consumers passed | | Package structure | ✅ publint clean | | Size budget | ✅ 96.3 KiB top-level ESM / 180 KiB budget | | npm audit during release work | ✅ 0 vulnerabilities | | Release supply chain | ✅ SBOM and npm provenance workflow |

npm run verify
npm run test:coverage
npm run test:browsers
npm run bench
npm run sbom

Custom-owned runtime

Glyphicore does not use a third-party QR generator, barcode generator or visual-code generator at runtime. Its QR encoding, error correction, barcode patterns, custom patterns, serialization, SVG, Canvas, PNG, PDF, ZIP and ZPL logic is authored for this package.

React is an optional peer for React APIs. Development-only tools such as TypeScript, Vite, Vitest, Playwright, Storybook and ZXing help build and independently verify the package; they are not generator runtime dependencies.

Limitations

• Structured append depends on scanner support.
• Decorative shapes, gradients and logos can reduce scan tolerance.
• React Native APIs return bridge-ready artifacts and do not force a specific native SVG dependency.
• Browser scanning depends on BarcodeDetector support.
• Custom codes are proprietary identifiers, not universally decodable standards.
• Micro QR, rMQR and built-in Shift-JIS Kanji mode are not currently claimed.

Creator and support

| Detail | Information | | --- | --- | | Creator | Pradeep Kumar Sheoran (Stack Developer) | | Company | BSG Technologies | | Contact | +91-8595147850 | | WhatsApp | +91-8595147850 | | Official website | https://bsgtechnologies.com | | Invitation | Meet, learn, contribute, discuss new topics and accept a coffee invitation |

import { GLYPHICORE_PACKAGE_INFO } from 'glyphicore-engine';

console.log(GLYPHICORE_PACKAGE_INFO.creator);
// Pradeep Kumar Sheoran (Stack Developer)

Built and maintained by Pradeep Kumar Sheoran (Stack Developer)

BSG Technologies

Questions, collaboration or coffee? Call/WhatsApp +91-8595147850

Visit https://bsgtechnologies.com