QRCraft

QR code generation SDK with custom cell shapes, marker styles, and multiple output formats.

Features

• Custom shapes - circle, rounded, diamond, squircle cells
• Marker styles - independent border & center shapes for finder patterns
• Multiple outputs - Canvas, SVG, DataURL, raw matrix
• Content encoders - URL, Text, Wi-Fi, SMS, Phone, Email
• Contrast checker - WCAG-compliant contrast ratio validation

Install

npm install qrcraft

CDN:

<script src="https://unpkg.com/qrcraft@latest/dist/qrcraft.umd.cjs"></script>

ES Module:

import { QRCraft } from 'qrcraft';

Quick Start

import { QRCraft } from 'qrcraft';

// Render to canvas
const canvas = document.getElementById('qr');
await QRCraft.toCanvas(canvas, 'https://example.com', {
  size: 256,
  cellShape: 'circle',
  markerBorder: 'rounded',
  markerCenter: 'circle',
});

// Generate SVG string
const svg = await QRCraft.toSVG('https://example.com', {
  size: 512,
  fgColor: '#1a1a2e',
  bgColor: '#e8e8e8',
});

// Get a data URL (PNG base64)
const dataUrl = await QRCraft.toDataURL('https://example.com');

REST API

No SDK needed — generate QR codes with a single HTTP request from any language or platform.

Endpoint:

GET https://useqrcraft.vercel.app/api/generate?data=https://example.com

Parameters

• data (string) Required. The content you want to encode. Always URL-encode this value if it contains special characters.
• size (number) Default: 256. The width and height of the generated image in pixels.
• format (string) Default: svg. The image format to return. Supports vector graphics (svg) or raster images (png).
• fgColor / bgColor (string) Default: #000000 / #FFFFFF. The foreground (dots) and background colors. You must URL-encode the # symbol as %23.
• errorCorrection (string) Default: M. How much of the QR code can be damaged/covered and still be readable. Accepts: L (7%), M (15%), Q (25%), H (30%)
• margin (number) Default: 2. The amount of empty whitespace (quiet zone) around the QR code.

Usage Examples

cURL (SVG & PNG):

# SVG
curl "https://useqrcraft.vercel.app/api/generate?data=https://mysite.com&size=512" -o qr.svg

# PNG with custom colors
curl "https://useqrcraft.vercel.app/api/generate?data=Hello&format=png&fgColor=%231a1a2e" -o qr.png

HTML (Direct Embed):

<img src="https://useqrcraft.vercel.app/api/generate?data=https://mysite.com&size=300" alt="QR" />

Content Helpers

const wifi = QRCraft.encodeWiFi('MyNetwork', 'password123', 'WPA');
const sms = QRCraft.encodeSMS('+1234567890', 'Hello!');
const phone = QRCraft.encodePhone('+1234567890');
const email = QRCraft.encodeEmail('[email protected]', 'Subject', 'Body');

await QRCraft.toCanvas(canvas, wifi, { size: 256 });

React Example

import { useEffect, useRef } from 'react';
import { QRCraft } from 'qrcraft';

function QRCode({ value, size = 256 }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current || !value) return;
    QRCraft.toCanvas(ref.current, value, {
      size,
      cellShape: 'rounded',
      markerBorder: 'rounded',
      markerCenter: 'circle',
    });
  }, [value, size]);

  return <canvas ref={ref} width={size} height={size} />;
}

API Reference

Methods

| Method | Returns | Description | |--------|---------|-------------| | QRCraft.toCanvas(canvas, data, opts) | Promise<void> | Render QR code to a canvas element | | QRCraft.toSVG(data, opts) | Promise<string> | Generate SVG markup string | | QRCraft.toDataURL(data, opts) | Promise<string> | Generate PNG as base64 data URL | | QRCraft.generate(data, opts) | Promise<object> | Get raw QR matrix data | | QRCraft.checkContrast(fg, bg) | { ratio, pass } | WCAG contrast ratio check |

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | size | number | 256 | Output size in pixels | | margin | number | 2 | Quiet zone (modules) | | fgColor | string | "#000000" | Foreground color | | bgColor | string | "#FFFFFF" | Background color | | errorCorrection | string | "M" | L, M, Q, or H | | cellShape | string | "square" | square, circle, rounded, diamond, squircle | | markerBorder | string | "square" | square, circle, rounded, squircle | | markerCenter | string | "square" | square, circle, rounded, dots, squircle |

License

Proprietary — see LICENSE