@qrcodesdk/browser

@qrcodesdk/browser adds renderers that depend on browser DOM APIs. Use it with @qrcodesdk/core when your output should be an element created in the browser or a browser-triggered download.

Install

npm install @qrcodesdk/core @qrcodesdk/browser

pnpm add @qrcodesdk/core @qrcodesdk/browser

vp

vp add @qrcodesdk/core @qrcodesdk/browser

deno

deno add @qrcodesdk/core @qrcodesdk/browser

bun

bun add @qrcodesdk/core @qrcodesdk/browser

yarn

yarn add @qrcodesdk/core @qrcodesdk/browser

Render an Image element

import {QRCodeImageRenderer} from '@qrcodesdk/browser';
import {qrcode} from '@qrcodesdk/core';

const image = qrcode('https://qrcodesdk.dev').render(
  QRCodeImageRenderer({
    size: 8,
    margin: 4,
    colors: {
      colorDark: '#111827',
      colorLight: '#ffffff',
    },
    dotsOptions: {type: 'rounded'},
    cornersSquareOptions: {type: 'extra-rounded', color: '#7c3aed'},
    cornersDotOptions: {type: 'dot'},
    alt: 'QR code for qrcodesdk.dev',
    ariaLabel: 'Scan to open qrcodesdk.dev',
  }),
);

document.body.append(image);

QRCodeImageRenderer() returns an HTMLImageElement. Its src is a PNG data URL, and its width and height match the rendered QR code size.

Render a Canvas element

import {QRCodeCanvasRenderer} from '@qrcodesdk/browser';
import {qrcode} from '@qrcodesdk/core';

const canvas = qrcode('https://qrcodesdk.dev').render(
  QRCodeCanvasRenderer({
    size: 8,
    margin: 4,
    colors: {
      colorDark: '#111827',
      colorLight: '#ffffff',
    },
  }),
);

document.querySelector('#qrcode')?.append(canvas);

QRCodeCanvasRenderer() returns an HTMLCanvasElement that you can insert into the DOM, draw into another canvas, or export with toBlob() or toDataURL().

Renderer options

| Option | Type | Default | Description | | ----------------------- | ---------------------------- | -----------------: | --------------------------------------------- | | size | number | 5 | Pixel size of each QR module. | | margin | number | 4 | Quiet-zone width in modules. | | colors.colorDark | string | '#000000' | Dark module color. | | colors.colorLight | string | '#ffffff' | Background color. | | dotsOptions | QRCodeDotsOptions | {type: 'square'} | Ordinary module shape and optional color. | | cornersSquareOptions | QRCodeCornersSquareOptions | {type: 'square'} | Finder-ring shape and optional color. | | cornersDotOptions | QRCodeCornersDotOptions | {type: 'square'} | Finder-center shape and optional color. | | alt | string | undefined | Image alt attribute; Image renderer only. | | ariaLabel | string | undefined | Image aria-label; Image renderer only. | | title | string | undefined | Image title attribute; Image renderer only. | | image.source | CanvasImageSource | undefined | Image already loaded by the caller. | | image.size | number | 0.4 | Relative centered image-box size. | | image.padding | number | 1 | Clear padding in QR modules. | | image.clearBackground | boolean | true | Clears modules behind the image. |

Color options use hash-prefixed values such as #111827. Browser pixel output requires a positive integer size and a non-negative integer margin.

All feature colors inherit colors.colorDark when omitted. Shapes are shared by Canvas and Image output, including PNG downloads.

Prepared center images

Canvas and Image renderers accept an already-loaded CanvasImageSource. Finish loading before rendering; QRCodeSDK never fetches the source:

const logo = new Image();
logo.src = '/logo.png';
await logo.decode();

const canvas = qrcode('https://qrcodesdk.dev')
  .errorCorrection('H')
  .render(QRCodeCanvasRenderer({image: {source: logo, size: 0.3}}));

Unloaded or zero-sized sources throw synchronously. The overlay is also included in PNG downloads. See Customize QR Codes for sizing and scan-reliability guidance.

Download PNG

Wrap an Image renderer with QRCodeDownloadImageRenderer to trigger a browser download:

import {QRCodeDownloadImageRenderer, QRCodeImageRenderer} from '@qrcodesdk/browser';
import {qrcode} from '@qrcodesdk/core';

qrcode('https://qrcodesdk.dev').render(
  QRCodeDownloadImageRenderer({
    renderer: QRCodeImageRenderer({
      alt: 'QR code for qrcodesdk.dev',
    }),
    filename: 'qrcode',
  }),
);

The renderer appends .png when necessary, clicks a temporary download link, and returns void.

Download SVG

SVG strings come from @qrcodesdk/core. Wrap its renderer to download the result in the browser:

import {QRCodeDownloadSVGRenderer} from '@qrcodesdk/browser';
import {QRCodeSVGRenderer, qrcode} from '@qrcodesdk/core';

qrcode('https://qrcodesdk.dev').render(
  QRCodeDownloadSVGRenderer({
    renderer: QRCodeSVGRenderer({
      size: 4,
      margin: 2,
      ariaLabel: 'Scan to open qrcodesdk.dev',
    }),
    filename: 'qrcode',
  }),
);

The renderer appends .svg when necessary, downloads an SVG Blob, revokes its temporary object URL, and returns void.

Package boundary

@qrcodesdk/browser depends on browser DOM APIs and does not replace @qrcodesdk/core. The core package still provides qrcode(), matrix generation, builder options, and shared styling normalization.

Public API

import {
  type QRCodeCanvasImageOptions,
  QRCodeCanvasRenderer,
  type QRCodeCanvasRendererOptions,
  QRCodeDownloadImageRenderer,
  type QRCodeDownloadImageRendererOptions,
  QRCodeDownloadSVGRenderer,
  type QRCodeDownloadSVGRendererOptions,
  QRCodeImageRenderer,
  type QRCodeImageRendererOptions,
} from '@qrcodesdk/browser';

Documentation

• @qrcodesdk/browser
• Installation
• Render to Canvas
• Render to an Image Element
• Render SVG
• Customize QR Codes