@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

npm install @qrcodesdk/core @qrcodesdk/browser

pnpm

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

Choose an output

Need	Renderer	Return value
Insert a PNG-backed image	QRCodeImageRenderer	HTMLImageElement
Draw or export with Canvas APIs	QRCodeCanvasRenderer	HTMLCanvasElement
Trigger an SVG download	QRCodeDownloadSVGRenderer	void
Trigger a PNG download	QRCodeDownloadImageRenderer	void

Render an Image element

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

const image = qrcode('https://qrcodesdk.dev').render(
  QRCodeImageRenderer({
    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.

Learn here more about using the library in the browser.

Configure and download output

Each output has a dedicated reference for its return value, options, and browser constraints:

• Canvas element
• PNG-backed Image element
• SVG and PNG download wrappers

Follow Add a center image to prepare a CanvasImageSource, and Download or save for browser helpers and manual Canvas export.

Runtime constraints

Create these renderers only where document, Canvas, and browser download APIs are available. For server rendering, defer them until hydration or use the runtime-neutral SVG renderer from @qrcodesdk/core. Use @qrcodesdk/node when you need PNG bytes without a DOM.

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,
  type QRCodeCanvasOptions,
  QRCodeCanvasRenderer,
  type QRCodeCanvasRendererOptions,
  QRCodeDownloadImageRenderer,
  type QRCodeDownloadImageRendererOptions,
  QRCodeDownloadSVGRenderer,
  type QRCodeDownloadSVGRendererOptions,
  type QRCodeImageOptions,
  QRCodeImageRenderer,
  type QRCodeImageRendererOptions,
} from '@qrcodesdk/browser';