@synapxlab/qrcode — Générateur QR Code SVG TypeScript zéro dépendance

Démo interactive

Modifiez les paramètres ci-dessous — le QR code se met à jour en temps réel.

Texte / URL

Correction d'erreur

Marge (modules)

Couleur

Fond

Chargement…

📦 Installation

npm install @synapxlab/qrcode

yarn add @synapxlab/qrcode

pnpm add @synapxlab/qrcode

Ou via CDN (ESM, aucune installation) :

<script type="module">
  import { QRCode } from 'https://cdn.jsdelivr.net/npm/@synapxlab/qrcode/dist/qrcode.es.js';
</script>

⚡ Démarrage rapide

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

// Injection dans le DOM
document.getElementById('qr').innerHTML = QRCode.toSVG('https://synapx.fr', {
  size: 200,
  errorCorrection: 'M',
  color: '#000000',
  background: '#ffffff',
});

const { QRCode } = require('@synapxlab/qrcode');

const svg = QRCode.toSVG('https://synapx.fr');
require('fs').writeFileSync('qrcode.svg', svg);

<div id="qr"></div>

<script type="module">
  import { QRCode } from
    'https://cdn.jsdelivr.net/npm/@synapxlab/qrcode/dist/qrcode.es.js';

  document.getElementById('qr').innerHTML =
    QRCode.toSVG('https://synapx.fr', { size: 200 });
</script>

📖 API & Options

QRCode.toSVG(text, options?)

Retourne une chaîne SVG inline prête à être injectée dans le DOM.

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 (recommandé ≥ 4)
`errorCorrection`	`'L' \| 'M' \| 'Q' \| 'H'`	'M'	Niveau de correction d'erreur — L 7 %, M 15 %, Q 25 %, H 30 %
`color`	`string`	'#000000'	Couleur des modules sombres (toute valeur CSS valide)
`background`	`string`	'#ffffff'	Couleur de fond — utilisez `'transparent'` pour supprimer le fond

Types TypeScript

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

const opts: QRCodeOptions = {
  size: 256,
  errorCorrection: 'Q',
  color: '#1a1a1a',
  background: 'transparent',
};
const svg = QRCode.toSVG('Hello', opts);

Note : Le SVG retourné est un élément <svg> inline — pas de balise <img>, pas de data URI. Injected directement via innerHTML, il est retaillable à l'infini sans pixelisation.

🖊️ Intégration avec @synapxlab/wysiwyg

Injectez QRCode comme dépendance opt-in pour que l'éditeur puisse insérer des QR codes depuis sa barre d'outils. Zéro impact bundle si non utilisé.

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

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

Bouton QR code dans la toolbar — ouvre une modale avec aperçu en temps réel
Champs : texte/URL, taille, marge, correction d'erreur, couleur, fond
Le SVG est inséré directement dans le contenu — éditable via double-clic
Aucun impact si toolbar.qrcode est absent ou false

🔧 Compatibilité

Navigateurs

Chrome, Firefox, Safari, Edge — tous les navigateurs modernes. Aucune API non standard.

Node.js ≥ 18

Génération côté serveur native — export SVG vers fichier ou flux HTTP sans dépendance système.

TypeScript 5 & 6

Types complets inclus. Compatible moduleResolution bundler, node16 et nodenext.

ESM + CJS

Livré en deux formats. Fonctionne avec Vite, Webpack, Rollup, Next.js, NestJS et un simple require().

Zéro dépendance

Aucune dépendance runtime. Algorithme Reed-Solomon conforme ISO/IEC 18004 — QR codes scannables sur tous les lecteurs.

SVG vectoriel

Sortie SVG pure — retaillable sans perte, imprimable, embeddable dans un document HTML ou PDF.