Skip to content
QRCodeSDK

Installation

Most projects start with @qrcodesdk/core.

  • Install @qrcodesdk/core if you need SVG, terminal text, matrix output, or custom renderers.
  • Add @qrcodesdk/node if you need PNG buffers in Node.js.
  • Add @qrcodesdk/browser if you need Canvas, Image elements, or browser downloads.

Start with core

Section titled “Start with core”

Use @qrcodesdk/core for runtime-neutral QR code generation.

Terminal window
pnpm add @qrcodesdk/core
npm install @qrcodesdk/core
yarn add @qrcodesdk/core
bun add @qrcodesdk/core
import {SVGQRCodeRenderer, qrcode} from '@qrcodesdk/core';


const svg = qrcode('https://qrcodesdk.dev').render(SVGQRCodeRenderer());

@qrcodesdk/core includes:

  • qrcode() and QRCodeBuilder
  • SVG string output
  • terminal text output
  • raw matrix output
  • custom renderer support

Add PNG output in Node.js

Section titled “Add PNG output in Node.js”

Use @qrcodesdk/node when the result must be PNG bytes in a Node.js process.

Install it alongside @qrcodesdk/core.

Terminal window
pnpm add @qrcodesdk/core @qrcodesdk/node
npm install @qrcodesdk/core @qrcodesdk/node
yarn add @qrcodesdk/core @qrcodesdk/node
bun add @qrcodesdk/core @qrcodesdk/node
import {qrcode} from '@qrcodesdk/core';
import {PNGQRCodeRenderer} from '@qrcodesdk/node';


const png = qrcode('https://qrcodesdk.dev').render(PNGQRCodeRenderer());

Use PNG buffers for files, API responses, downloads, email attachments, and other integrations that expect image/png bytes.

Add browser DOM output

Section titled “Add browser DOM output”

Use @qrcodesdk/browser when the result should be a DOM element created in the browser.

Install it alongside @qrcodesdk/core.

Terminal window
pnpm add @qrcodesdk/core @qrcodesdk/browser
npm install @qrcodesdk/core @qrcodesdk/browser
yarn add @qrcodesdk/core @qrcodesdk/browser
bun add @qrcodesdk/core @qrcodesdk/browser
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);

Use browser renderers when you want an HTMLCanvasElement, an HTMLImageElement, a client-side SVG or PNG download, or DOM/CSS integration.

Package guide

Section titled “Package guide”
Package Install when you need Outputs
@qrcodesdk/core Runtime-neutral generation and common output formats. SVG strings, terminal text strings, raw matrices.
@qrcodesdk/node Server-side PNG generation in Node.js. PNG Buffer.
@qrcodesdk/browser DOM elements and client-side browser workflows. HTMLCanvasElement, HTMLImageElement, downloads.

Next steps

Section titled “Next steps”