Playground

Shape modules, upload a center image or use the QRCodeSDK logo, preview React, Vue, Svelte, or Angular components, then copy the code into your app.

Configure

Reset

Package

React

Vue

Svelte

Angular

Output

SVG

IMAGE

CANVAS

Payloadhttps://qrcodesdk.dev

UTF-8 ECI

Emit assignment 26 before the first octet segment to explicitly declare UTF-8.

ModeAuto

VersionAuto

Error CorrectionAuto

MaskAuto

Size

Quiet zone

Dark Color#000000

Light Color#FFFFFF

Center Image

Upload and decode an image before it is passed to the QR renderer.

No image selected

The image remains local to this browser session.

Use QRCodeSDK logo Upload

Advanced Styling

Modules

Typesquare

Color#000000

Finder outer ring

Typesquare

Color#000000

Finder center

Typesquare

Color#000000

Accessibility

Alt

aria-label

Title

React

import {useRef} from 'react';

import {QRCodeSVG, type QRCodeSVGOptions, type QRCodeDownloadHandle} from '@qrcodesdk/react';

export function QRCodeExample() {
  const payload = "https://qrcodesdk.dev";

  const qrcode = useRef<QRCodeDownloadHandle>(null);

  const options: QRCodeSVGOptions = {
    style: {
      moduleSize: 8,
      quietZone: 4,
    },
  };

  return (
    <>
      <button
        type="button"
        onClick={() => qrcode.current?.download('qrcodesdk')}
      >
        Download SVG
      </button>

      <QRCodeSVG ref={qrcode} payload={payload} options={options} />
    </>
  );
}