Skip to content
Devix Open Source
Search products /
devix.pk

Reference

Options, methods and events

Options

Option Type Default What it does
value string — What the code carries.
level 'L' | 'M' | 'Q' | 'H' M, or H with a logo How much damage it can survive.
version 1–40 smallest that fits Forces a size.
logo Logo — See Logos.
fitLogoLevel boolean true Raise the level so a logo fits, rather than shipping a code that will not scan.
quiet number 4 Modules of light border. Four is what the specification asks for; less risks a failed scan.
dark / light string #000 / #fff light: 'none' leaves it transparent.
shape 'square' | 'rounded' | 'dot' square square scans most reliably.
finderShape Shape as shape The three corner patterns, separately.
size number — Fixes the SVG's width and height. Omit for a fluid code that fills its box.
title string "QR code for …" What a screen reader says.
theme 'light' | 'dark' | 'auto' auto
classNames, strings As in every Devix widget. 
createQrCode(el, {
  onRender: (code) => console.log(code.version, code.level, code.mode, code.mask),
  onWarning: (message) => toast(message),
});

Methods

qr.setValue('https://devix.pk/new');
qr.setOptions({ level: 'H', shape: 'dot' });
qr.getValue();
qr.getCode();        // { matrix, size, version, level, mode, mask } — or null
qr.toSvg();
qr.toCanvas(canvas); // draws into one you own, or a new one
await qr.toBlob(512, 'image/png');
await qr.download('ticket.png');
qr.destroy();

The encoder on its own

No DOM needed, so this works on a server, in a worker, or in a build step:

import { encode, toSvg, toDataUrl } from '@devix-labs/qr-code';

const code = encode('https://devix.pk', { level: 'H' });
code.version;   // 3
code.mode;      // 'byte'
code.matrix;    // number[][], 1 for a dark module

toSvg(code, { dark: '#18181b', quiet: 2 });
toDataUrl(code);   // for an <img src> or a CSS background

encode throws a RangeError for an empty string, a version outside 1–40, or more data than a QR code can hold.

Capacity

import { dataCodewords, versionFor, modeFor } from '@devix-labs/qr-code';

modeFor('12345');                       // 'numeric'  — holds the most
modeFor('HELLO WORLD');                 // 'alphanumeric'
modeFor('hello');                       // 'byte'     — lower case is not in the alphanumeric set
versionFor('1'.repeat(100), 'M', 'numeric');   // 5
dataCodewords(40, 'L');                 // 2956

Upper case makes a real difference: HELLO WORLD is alphanumeric and fits a version 1 code, while Hello World is byte mode and needs a bigger one. If you control the text — a coupon code, a reference — upper case it.

Updated 15 Sep 2026