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

Datahttps://qrcodesdk.dev

UTF-8 ECI

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

ModeAuto

VersionAuto

Error CorrectionAuto

MaskAuto

Size

Margin

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

Dots (Data modules)

Typesquare

Color#000000

Corners Square (Finder squares)

Typesquare

Color#000000

Corners Dot (Finder dots)

Typesquare

Color#000000

Accessibility

Alt

aria-label

Title

React

import {useRef} from 'react';

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

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

  const qrcode = useRef<QRCodeDownloadHandle>(null);

  const options: QRCodeSVGOptions = {
    size: 8,
    margin: 4,
  };

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

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