@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

pnpm add @qrcodesdk/core @qrcodesdk/browser

Render an image element

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

const image = qrcode('https://qrcodesdk.dev').render(
  ImageQRCodeRenderer({
    alt: 'QR code for qrcodesdk.dev',
  }),
);

document.body.append(image);

Render a canvas element

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

const canvas = qrcode('https://qrcodesdk.dev').render(CanvasQRCodeRenderer());

document.body.append(canvas);

Download files

import {DownloadImageQRCodeRenderer, ImageQRCodeRenderer} from '@qrcodesdk/browser';
import {qrcode} from '@qrcodesdk/core';

qrcode('https://qrcodesdk.dev').render(
  DownloadImageQRCodeRenderer({
    renderer: ImageQRCodeRenderer(),
    filename: 'qrcode',
  }),
);

Use it for

• appending QR codes directly to a browser page
• styling image elements with CSS
• drawing QR codes into canvas workflows
• creating client-side SVG and PNG downloads

Package boundary

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

Related pages

• Installation
• Render to Canvas
• Render to an Image Element
• Customize QR Codes