# @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

<PackageManagerTabs packages={['@qrcodesdk/core', '@qrcodesdk/browser']} mode="add" />

## 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

```ts
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](/guides/browser-usage/) 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](/reference/renderers/canvas/)
- [PNG-backed Image element](/reference/renderers/image/)
- [SVG and PNG download wrappers](/reference/renderers/browser-downloads/)

Follow [Add a center image](/guides/center-images/) to prepare a `CanvasImageSource`, and
[Download or save](/guides/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

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