Glyphicore

Glyphicore is a production-ready React + TypeScript component library for QR codes, barcodes, and custom visual identifiers. The package name is glyphicore-engine.

Built by Pradeep Kumar Sheoran (Developer) at BSG Technologies. Visit https://bsgtechnologies.com to meet, learn, contribute, and discuss new topics with us. Contact: +91-8595147850 (also WhatsApp).

Features

• QR code generation from strings, numbers, booleans, arrays, objects, JSON-like payloads, URLs, payment text, and custom serializable data.
• Barcode generation for Code 128, EAN-13, UPC-A, and custom patterns.
• Proprietary custom visual codes: grid, dots, blocks, stripes, and matrix.
• SVG and Canvas rendering.
• PNG-style data URL export through browser canvas usage and SVG data URL export for server/API responses.
• Stable object serialization with sorted keys and circular-reference protection.
• Custom size, margin, foreground/background colors, rounded QR modules, readable barcode text, and accessible metadata.
• React components, hooks, and pure TypeScript utility functions.
• ESM + CJS output, declaration files, tree-shakable exports, Storybook examples, and Vitest coverage.

Hashtags and keywords: #Glyphicore, #React, #TypeScript, #QRCode, #Barcode, #Code128, #EAN13, #UPCA, #BSGTechnologies.

Installation

npm install glyphicore-engine

React is a peer dependency:

npm install react react-dom

Quickstart

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

export function InvoiceCodes() {
  return (
    <>
      <QRCode value={{ invoiceId: 101, amount: 500 }} size={240} rounded />
      <Barcode value="INV-1001" type="code128" width={320} height={110} showText />
      <CustomCode value={['A', 'B', 'C']} pattern="matrix" />
    </>
  );
}

QR Usage

<QRCode value="https://example.com" />

<QRCode
  value={{ orderId: 'ORD-1001', amount: 2500, status: 'paid' }}
  foregroundColor="#111827"
  backgroundColor="#ffffff"
  errorCorrectionLevel="M"
  rounded
/>

<QRCode value={['apple', 'banana', 'orange']} renderAs="canvas" />

Barcode Usage

<Barcode value="123456789012" type="code128" showText />
<Barcode value="4006381333931" type="ean13" showText />
<Barcode value="036000291452" type="upc" showText />
<Barcode value="HELLO-123" type="code39" showText />
<Barcode value="10012345000017" type="itf14" showText />
<Barcode value="A123456B" type="codabar" showText />
<Barcode value="(01)09506000134352" type="gs1-128" showText />
<Barcode value="978-0-306-40615-7" type="isbn" showText />

Imperative Ref API

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

const ref = useRef<GlyphicoreImperativeHandle>(null);

<QRCode ref={ref} value="Invoice-1001" />;
ref.current?.downloadSVG('invoice.svg');
ref.current?.getDataURL();

Universal Renderer

<CodeRenderer
  type="qr"
  value={{ orderId: 101, customer: 'Rahul', amount: 1500 }}
  options={{ size: 250, foregroundColor: '#111827', backgroundColor: '#ffffff' }}
/>

Hooks

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

qr.svg;
qr.dataURL;
qr.downloadPNG('ticket.png');
qr.downloadSVG('ticket.svg');

API Response Friendly Output

import { generateCodeResponse } from 'glyphicore-engine';

const dataURL = generateCodeResponse({
  type: 'qr',
  value: { ticketId: 'TKT-101', userId: 25 },
  output: 'dataURL'
});

For API routes:

import { createSVGHttpResponse } from 'glyphicore-engine';

const result = createSVGHttpResponse({
  type: 'qr',
  value: { ticketId: 'TKT-101' }
});

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

Supported outputs: matrix, svg, dataURL, canvas, and pattern. Canvas output is intended for browser-side flows where a real HTMLCanvasElement exists.

Pure Utilities

import {
  generateQRMatrix,
  generateBarcodePattern,
  generateCustomCode,
  renderQRToSVG,
  serializeData
} from 'glyphicore-engine';

const payload = serializeData({ id: 1, name: 'User', items: ['A', 'B'] });
const matrix = generateQRMatrix(payload);
const svg = renderQRToSVG(matrix, { size: 260, foregroundColor: '#7c3aed' });

UPI / Payment QR

import { createUPIPayload } from 'glyphicore-engine';

const value = createUPIPayload({
  payeeVpa: '8595147850@upi',
  payeeName: 'Pradeep Kumar Sheoran',
  amount: 101,
  transactionNote: 'Glyphicore support'
});

<QRCode value={value} rounded />

QR Diagnostics

import { inspectQRCapacity } from 'glyphicore-engine';

inspectQRCapacity('HELLO WORLD', 'M');

Returns mode, version, module size, byte length, and codeword capacity details.

Download Example

<QRCode
  value="Invoice-1001"
  onGenerate={({ downloadPNG, downloadSVG }) => {
    downloadPNG('invoice-1001.png');
    downloadSVG('invoice-1001.svg');
  }}
/>

Storybook

npm run storybook

Storybook includes QR, Code 128, custom matrix, and universal renderer examples.

Live Demo

npm run demo

The demo includes invoice QR, inventory barcode, custom token, universal renderer, UPI payload, and QR diagnostics examples.

Supported Barcode Types

• code128: printable ASCII Code 128-B encoding with checksum.
• ean13: 12 or 13 numeric digits with EAN-13 checksum validation.
• upc: 11 or 12 numeric digits with UPC-A checksum validation.
• code39: uppercase A-Z, digits, space, and standard Code 39 symbols.
• itf14: 13 or 14 numeric digits with ITF-14 checksum validation.
• codabar: digits and Codabar symbols with A/B/C/D start-stop support.
• gs1-128: GS1-style application identifier payloads routed through Code 128.
• isbn: ISBN-10 or ISBN-13 normalized to EAN-13-compatible output.
• custom: deterministic bar/space widths for proprietary internal use.

No Third-Party Generator SDKs

Glyphicore does not depend on QR SDKs, barcode SDKs, generator packages, external rendering libraries, or existing code-generation libraries. The QR, barcode, custom pattern, serialization, SVG, and canvas logic in this repository is authored in TypeScript for this package.

Development tools such as Vite, TypeScript, Vitest, Testing Library, React, and Storybook are used only to build, test, document, and render the package.

Limitations

• QR support currently focuses on byte mode and versions 1-10 with a single Reed-Solomon block profile per version. This covers many admin, invoice, ticket, inventory, and dashboard payloads, but very large payloads should be shortened or linked through a URL.
• Custom visual codes are not universal QR or barcode standards. They are useful for internal token-like visual identifiers only when your own scanner/decoder support is built separately.
• PNG file download is browser-oriented. Server responses can use SVG or SVG data URLs directly.

Browser Compatibility

Glyphicore targets modern browsers with SVG, Canvas 2D, TextEncoder, and standard DOM APIs. It is compatible with React 18+ and newer React versions.

Publish Checklist

npm run typecheck
npm test
npm run build
npm publish --access public

Donation and Support

Support development through UPI/mobile: +91-8595147850.

Official website: https://bsgtechnologies.com