@synapxlab/qrcode

Zero-dependency QR code generator with SVG output. TypeScript-first, works in the browser and Node.js, ships as both ESM and CJS.

Live demo · Français

Installation

npm install @synapxlab/qrcode

Usage

import { QRCode } from '@synapxlab/qrcode';

// Returns an SVG string — inject it directly into the DOM
const svg = QRCode.toSVG('https://example.com');
document.getElementById('qr')!.innerHTML = svg;

API

QRCode.toSVG(text, options?)

| Parameter | Type | Description | |-----------|------|-------------| | text | string | Text or URL to encode | | options | QRCodeOptions | Optional settings (see below) |

Returns string — an inline SVG element.

QRCodeOptions

| Option | Type | Default | Description | |--------|------|---------|-------------| | size | number | 200 | Width and height of the SVG in pixels | | margin | number | 4 | Quiet zone in modules around the QR code | | errorCorrection | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | Error correction level | | color | string | '#000000' | Dark module colour (any CSS colour) | | background | string | '#ffffff' | Background colour (any CSS colour) |

Error correction levels: L = 7 %, M = 15 %, Q = 25 %, H = 30 % of data recoverable.

Examples

// Custom size and colours
QRCode.toSVG('https://synapxlab.com', {
  size: 300,
  color: '#1a1a1a',
  background: '#f5f5f5',
});

// High error correction with extra quiet zone
QRCode.toSVG('Hello World', {
  errorCorrection: 'H',
  margin: 6,
});

// Transparent background
QRCode.toSVG('https://example.com', {
  background: 'transparent',
});

TypeScript

Full types are included. Import the options interface if needed:

import { QRCode, type QRCodeOptions } from '@synapxlab/qrcode';

const opts: QRCodeOptions = { size: 256, errorCorrection: 'Q' };
const svg = QRCode.toSVG('Hello', opts);

Integration with @synapxlab/wysiwyg

Inject QRCode as a dependency so the editor can insert QR codes from its toolbar:

import { WysiwygEditor } from '@synapxlab/wysiwyg';
import { QRCode } from '@synapxlab/qrcode';

new WysiwygEditor('#editor', {
  qrcode: QRCode,
  toolbar: { qrcode: true },
});

Compatibility

• Browsers: all modern browsers (Chrome, Firefox, Safari, Edge)
• Node.js: ≥ 18
• TypeScript: 5 and 6
• Module formats: ESM (import) and CJS (require)
• Dependencies: none

License

MIT © SynapxLab

@synapxlab/qrcode — Documentation française

Démo live

Générateur de QR codes sans dépendance, sortie SVG. TypeScript natif, compatible navigateur et Node.js, livré en ESM et CJS.

Installation

npm install @synapxlab/qrcode

Utilisation

import { QRCode } from '@synapxlab/qrcode';

// Retourne une chaîne SVG — à injecter directement dans le DOM
const svg = QRCode.toSVG('https://example.com');
document.getElementById('qr')!.innerHTML = svg;

API

QRCode.toSVG(text, options?)

| Paramètre | Type | Description | |-----------|------|-------------| | text | string | Texte ou URL à encoder | | options | QRCodeOptions | Options facultatives (voir ci-dessous) |

Retourne string — un élément SVG inline.

QRCodeOptions

| Option | Type | Défaut | Description | |--------|------|--------|-------------| | size | number | 200 | Largeur et hauteur du SVG en pixels | | margin | number | 4 | Zone de silence en modules autour du QR code | | errorCorrection | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | Niveau de correction d'erreur | | color | string | '#000000' | Couleur des modules sombres (toute couleur CSS) | | background | string | '#ffffff' | Couleur du fond (toute couleur CSS) |

Niveaux de correction d'erreur : L = 7 %, M = 15 %, Q = 25 %, H = 30 % de données récupérables.

Exemples

// Taille et couleurs personnalisées
QRCode.toSVG('https://synapxlab.com', {
  size: 300,
  color: '#1a1a1a',
  background: '#f5f5f5',
});

// Correction d'erreur élevée avec marge généreuse
QRCode.toSVG('Hello World', {
  errorCorrection: 'H',
  margin: 6,
});

// Fond transparent
QRCode.toSVG('https://example.com', {
  background: 'transparent',
});

TypeScript

Les types sont inclus. Importez l'interface des options si besoin :

import { QRCode, type QRCodeOptions } from '@synapxlab/qrcode';

const opts: QRCodeOptions = { size: 256, errorCorrection: 'Q' };
const svg = QRCode.toSVG('Hello', opts);

Intégration avec @synapxlab/wysiwyg

Injectez QRCode comme dépendance pour que l'éditeur puisse insérer des QR codes depuis sa barre d'outils :

import { WysiwygEditor } from '@synapxlab/wysiwyg';
import { QRCode } from '@synapxlab/qrcode';

new WysiwygEditor('#editor', {
  qrcode: QRCode,
  toolbar: { qrcode: true },
});

Compatibilité

• Navigateurs : tous les navigateurs modernes (Chrome, Firefox, Safari, Edge)
• Node.js : ≥ 18
• TypeScript : 5 et 6
• Formats de module : ESM (import) et CJS (require)
• Dépendances : aucune

Licence

MIT © SynapxLab