How To

Use scancod.es in your own project

This page explains the integration surface, the file order, and the most useful wrapper helpers. Use index.html if you just want to generate codes manually. Use demo.html if you want to inspect the renderer and option surface interactively.

Files and roles

File Purpose
scancod.es.core.js Low-level renderer for QR, Barcode, Data Matrix, and PDF417.
scancod.es.js Wrapper layer with structured helpers like EPC, WiFi, Geo, vCard, Email, SMS, and Tel.
demo.html Library demo with the full renderer controls.
index.html Practical end-user tool for manual barcode generation.

Browser setup

Load the core first, then the wrapper. The browser global exposed by the wrapper is scanCodes. 
<script src="scancod.es.core.js"></script>
<script src="scancod.es.js"></script>
<script>
  scanCodes.QR.toCanvas('https://scancod.es', document.getElementById('qr'), {
    ecLevel: 'M',
    cellSize: 8,
    shape: 'rounded'
  });
</script>

Node.js setup

const scanCodes = require('./scancod.es.js');

const svg = scanCodes.QR.toSVG('https://scancod.es', {
  ecLevel: 'Q',
  cellSize: 6
});

console.log(svg);

Common wrapper helpers

Each helper accepts structured input and exposes the same QR methods as scanCodes.QR:

  • payload(input)
  • toCanvas(input, canvas, opts)
  • toSVG(input, opts)
  • toDataURL(input, opts)
  • toSVGDataURL(input, opts)
  • toDataURLAsync(input, opts)
  • getInfo(input, opts)
  • scanCodes.EPC for SEPA / EPC payments
  • scanCodes.WiFi for WiFi/WLAN access
  • scanCodes.Geo for geo: positions
  • scanCodes.VCard and scanCodes.MeCard for contacts
  • scanCodes.Email, scanCodes.SMS, and scanCodes.Tel for action links

Example: WiFi QR

const wifiSvg = scanCodes.WiFi.toSVG({
  ssid: 'OfficeNet',
  password: 'supersecret',
  encryption: 'WPA2',
  hidden: false
}, {
  ecLevel: 'M',
  cellSize: 8,
  margin: 4,
  dark: '#111827',
  light: '#ffffff'
});

Example: EPC payment QR

const paymentSvg = scanCodes.EPC.toSVG({
  name: 'Example GmbH',
  iban: 'DE89370400440532013000',
  bic: 'COBADEFFXXX',
  amount: 49.90,
  remittance: 'Invoice 2026-05'
}, {
  ecLevel: 'M',
  cellSize: 7
});

Example: Geo position QR

const geoPayload = scanCodes.Geo.payload({
  lat: 48.137154,
  lon: 11.576124,
  label: 'Munich Office'
});

const geoDataUrl = scanCodes.Geo.toSVGDataURL({
  lat: 48.137154,
  lon: 11.576124,
  label: 'Munich Office'
}, {
  ecLevel: 'Q',
  cellSize: 7,
  transparentBackground: true
});

Using the low-level namespaces directly

Use these when you already have the payload string or when you need 1D / Data Matrix / PDF417 output:

  • scanCodes.QR
  • scanCodes.Barcode
  • scanCodes.DataMatrix
  • scanCodes.PDF417
  • scanCodes.core for direct access to the core export 
scanCodes.Barcode.toCanvas('590123412345', canvas, {
  type: 'ean13',
  scale: 2,
  height: 80,
  displayValue: true
});

Recommended page split

  • Use index.html as the operational tool you link to from your domain root.
  • Use demo.html when you want to expose or test the raw renderer options.
  • Use this page as the onboarding reference for developers integrating the library.