QRCodeSDK

QRCodeSDK separates QR code generation from output. Start with qrcode(), then render SVG, PNG, Canvas, Image elements, terminal text, matrix data, or your own custom format.

Install and render SVG

1. Install @qrcodesdk/core.

   pnpm add @qrcodesdk/core

2. Render your first QR code.

   import {SVGQRCodeRenderer, qrcode} from '@qrcodesdk/core';
   
   const svg = qrcode('https://qrcodesdk.dev').render(SVGQRCodeRenderer());

SVG is the best default for most user-facing QR codes because it stays sharp at any size and works in browsers, servers, emails, and static assets.

Choose your output

Render SVGCreate a scalable SVG string from @qrcodesdk/core.

Render PNG in Node.jsCreate a PNG Buffer for files, API responses, and attachments.

Render to CanvasCreate an HTMLCanvasElement in browser apps.

Render to an Image ElementCreate an HTMLImageElement with a PNG data URL or trigger a browser PNG download.

Render Terminal TextCreate compact terminal output for CLIs, logs, and snapshots.

Customize the QR code

Most renderers use the same styling options.

import {SVGQRCodeRenderer, qrcode} from '@qrcodesdk/core';

const svg = qrcode('https://qrcodesdk.dev')
  .errorCorrection('H')
  .render(
    SVGQRCodeRenderer({
      size: 8,
      margin: 4,
      colors: {
        colorDark: '#111827',
        colorLight: '#ffffff',
      },
      ariaLabel: 'Scan to open qrcodesdk.dev',
    }),
  );

Go deeper

InstallationChoose the package for your output format and runtime.

Customize QR CodesSet size, margin, colors, accessibility labels, error correction, version, and mask.

PlaygroundConfigure Angular and React components visually, preview output, and copy code.

Builder APIUse data modes, error correction, matrix output, and the immutable builder.

Custom RenderersRender the QR matrix into any output type.

API ReferenceReview public exports from @qrcodesdk/core, @qrcodesdk/browser, and @qrcodesdk/node.