@qrcodesdk/browser

Documentation | Live Demo

@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

Entry points

Each image format has its own entry point, so code that imports one renderer only loads that format's encoder. Use these entry points when importing directly without an application bundler. The root @qrcodesdk/browser entry point re-exports everything; bundlers with tree shaking drop the encoders you do not use.

| Entry point | Exports | | --------------------------- | ------------------------------------------------------------------- | | @qrcodesdk/browser/png | QRCodePNGImageRenderer | | @qrcodesdk/browser/webp | QRCodeWebPImageRenderer | | @qrcodesdk/browser/gif | QRCodeGIFImageRenderer | | @qrcodesdk/browser/jpeg | QRCodeJPEGImageRenderer | | @qrcodesdk/browser/image | QRCodeDownloadImageRenderer and shared Image element option types | | @qrcodesdk/browser/canvas | QRCodeCanvasRenderer and canvasCenterImage() | | @qrcodesdk/browser/svg | QRCodeDownloadSVGRenderer |

Choose an output

| Need | Renderer | Return value | | ------------------------------------------ | ----------------------------- | ------------------- | | Insert a PNG-backed image | QRCodePNGImageRenderer | HTMLImageElement | | Insert a smaller WebP image | QRCodeWebPImageRenderer | HTMLImageElement | | Insert a GIF image | QRCodeGIFImageRenderer | HTMLImageElement | | Insert a JPEG image | QRCodeJPEGImageRenderer | HTMLImageElement | | Draw or export with Canvas APIs | QRCodeCanvasRenderer | HTMLCanvasElement | | Trigger an SVG download | QRCodeDownloadSVGRenderer | void | | Trigger a PNG, WebP, GIF, or JPEG download | QRCodeDownloadImageRenderer | void |

PNG uses the browser's native encoder and is the default choice. WebP is lossless and usually the smallest file. Its encoder is bundled in the SDK, so output is the same in every browser, including Safari, which cannot encode WebP natively. GIF is limited to 256 colors and binary transparency, so prefer PNG or WebP for transparent backgrounds and photographic center images. JPEG is lossy, has no transparency, and is larger for plain QR codes; its bundled encoder blends transparent pixels onto a white matte instead of the black that browsers' native JPEG encoding produces. Use it when a destination requires JPEG.

Render an Image element

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

const image = qrcode('https://qrcodesdk.dev').render(
  QRCodePNGImageRenderer({
    accessibility: {
      alt: 'QR code for qrcodesdk.dev',
      ariaLabel: 'Scan to open qrcodesdk.dev',
    },
  }),
);

document.body.append(image);

QRCodePNGImageRenderer() returns an HTMLImageElement. Its src is a PNG data URL, and its width and height match the rendered QR code size. QRCodeWebPImageRenderer(), QRCodeGIFImageRenderer(), and QRCodeJPEGImageRenderer() take the same options and return WebP, GIF, and JPEG data URLs.

See Render QR codes in the browser for inserting and replacing browser output.

Configure and download output

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

• Canvas element
• PNG, WebP, GIF, and JPEG Image elements
• SVG and image download wrappers

Canvas and Image element output take an optional center image created with canvasCenterImage(). 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, WebP, GIF, or JPEG bytes without a DOM.

Public API

import {
  type QRCodeCanvasAccessibilityOptions,
  type QRCodeCanvasCenterImage,
  type QRCodeCanvasOptions,
  QRCodeCanvasRenderer,
  type QRCodeCanvasRendererOptions,
  QRCodeDownloadImageRenderer,
  type QRCodeDownloadImageRendererOptions,
  QRCodeDownloadSVGRenderer,
  type QRCodeDownloadSVGRendererOptions,
  type QRCodeGIFImageOptions,
  QRCodeGIFImageRenderer,
  type QRCodeGIFImageRendererOptions,
  type QRCodeImageAccessibilityOptions,
  type QRCodeImageRendererOptions,
  type QRCodeJPEGImageOptions,
  QRCodeJPEGImageRenderer,
  type QRCodeJPEGImageRendererOptions,
  type QRCodePNGImageOptions,
  QRCodePNGImageRenderer,
  type QRCodePNGImageRendererOptions,
  type QRCodeWebPImageOptions,
  QRCodeWebPImageRenderer,
  type QRCodeWebPImageRendererOptions,
  canvasCenterImage,
} from '@qrcodesdk/browser';

Documentation

• @qrcodesdk/browser
• Choose your setup
• Canvas element renderer
• Image element renderers
• SVG string renderer
• Customize appearance