Skip to content
PureDevKit

Documentation · Updated 2026-09-02

QR Code Studio

Design, verify, and export QR codes — Wi-Fi, vCard, UPI, and 8 more types with custom shapes, logos, live scan verification, auto-fix, bulk ZIP, and print sheets. Everything runs in your browser.

Open QR Code StudioWi-Fi presetvCard presetUPI presetLogo presetBulk preset

Getting started

Overview

QR Code Studio is a full-page editor. Pick a content type, fill a form, style the code, watch the live scan verdict, and export PNG, SVG, PDF, an A4 sticker sheet, or a bulk ZIP. Every code is static — it encodes your content directly and can never expire.

When to use

Use it any time you need a QR code: sharing Wi-Fi, contact cards, UPI payment codes, links on posters, table menus, asset tags, or event tickets.

Steps

  1. 1Open /tools/qr-code/ (or a preset like /tools/wifi-qr-code/).
  2. 2Pick a content type in the left panel and fill the form.
  3. 3Style shapes, colors, and logo in the right panel.
  4. 4Check the verification badge under the preview.
  5. 5Download from the export card, or switch to Bulk / CSV for batches.

Tips

  • Your session auto-saves to localStorage — use New in the header to reset.
  • Nothing is uploaded: payload building, rendering, verification, and ZIP packaging all run in the tab.

Editor layout

Three columns on desktop: content (left), live preview with verification and export (center), design (right). The switch above the preview toggles between Single code and Bulk / CSV modes.

When to use

Refer to this when you cannot find a control.

Steps

  1. 1Left — content type chips and the form for the selected type; in bulk mode, the batch data editor.
  2. 2Center — mode switch, live preview, scan verdict, warnings with Auto-fix, payload readout, and the Download card.
  3. 3Right — style presets, module and eye shapes, colors, logo, error correction, and quiet zone.
  4. 4Top bar — New, Scan image (decode), and quick PNG download.

Content types

The 11 content types

Each type is a structured form that compiles to the correct payload format — you never hand-write WIFI: strings or vCard fields. Types: URL, Text, Wi-Fi, vCard, Email, SMS, Phone, Location, Event, UPI payment, and Crypto.

When to use

Pick the type that matches what should happen when someone scans — open a link, join a network, save a contact, start a payment.

Steps

  1. 1URL — a link; https:// is added automatically if you omit the scheme.
  2. 2Text — any literal text, including otpauth:// URIs for authenticator apps.
  3. 3Email / SMS / Phone — prefilled compose screens via mailto:, SMSTO:, and tel:.
  4. 4Location — geo:lat,lng opens the maps app at the pin.
  5. 5Event — an embedded iCalendar VEVENT that offers to add the event.
  6. 6Crypto — bitcoin:/ethereum:/litecoin: address links with optional amount.

Reference

  • Shorter payloads make coarser, easier-scanning codes. Long vCards and URLs need a larger print size.

Wi-Fi codes

Encodes the standard WIFI: payload that iPhone and Android cameras understand natively — guests scan and join without typing the password.

When to use

Guest networks at home, cafés, offices, and rentals.

Steps

  1. 1Enter the SSID exactly as it appears in Wi-Fi settings.
  2. 2Pick the security type — WPA/WPA2 covers almost every modern router.
  3. 3Enter the password; special characters like ; , : are escaped automatically.
  4. 4Toggle Hidden network if the SSID does not broadcast.

Tips

  • The password is inside the code in plain text — print it only where guests are welcome.
  • Rotating the password? Just regenerate and reprint; static codes have nothing else to update.

vCard contact codes

Embeds a vCard 3.0 document — scanning shows an “Add contact” prompt with your details prefilled, no app or hosted profile in between.

When to use

Business cards, email signatures, conference badges, storefront windows.

Steps

  1. 1Fill at least a first or last name; phone, email, company, title, website, and address are optional.
  2. 2Skip fields you do not need — smaller vCards make cleaner codes.
  3. 3Export SVG for print design tools, PNG for slides and signatures.

Reference

  • Details live inside the code, so edits need a reprint — the trade-off for zero tracking and no service dependency.

UPI payment codes

Builds the standard upi://pay deep link (pa, pn, am, cu, tn) that GPay, PhonePe, Paytm, BHIM, and every NPCI-compliant app opens as a prefilled payment screen.

When to use

Shop counters, invoices, delivery collection, event fees, donations.

Steps

  1. 1Enter your UPI ID (VPA) — double-check it; payments go wherever this points.
  2. 2Add a payee name so payers see who they are paying.
  3. 3Optionally fix the amount, or leave it empty so payers type the bill.
  4. 4Print the A4 sticker sheet for the counter.

Reference

  • The code contains only your receiving address. Scanning it can never pull money without the payer approving in their app.
  • No payment touches this site — the code is a link, not a transaction.

Design

Presets, module and eye shapes

Eight one-click presets, seven module shapes (square, rounded, dots, classy, diamond, bars, lines), and independent eye frame / eye ball shapes (square, rounded, circle, leaf).

When to use

Match the code to your brand without breaking the patterns scanners lock onto.

Steps

  1. 1Start from a preset close to your brand, then adjust.
  2. 2Module shapes restyle the data area; the three corner eyes are styled separately.
  3. 3Keep the eyes recognizable — they are how scanners find the code at all.

Colors, gradients, and backgrounds

Solid or linear/radial gradient fills, custom eye color, custom background, or a transparent background for placing the code on your own artwork.

When to use

Brand colors, dark designs, print materials with colored backgrounds.

Steps

  1. 1Set the code color, or enable a gradient and pick the second color and angle.
  2. 2Keep contrast above 3:1 against the background — the verifier warns below that.
  3. 3Transparent background exports keep alpha in PNG and SVG.

Tips

  • Dark modules on a light background scan most reliably. Light-on-dark works in most apps but the verifier flags it.

Error correction and quiet zone

Four error-correction levels (L 7% → H 30% damage recovery) and a quiet-zone slider. Higher correction makes denser codes; the quiet zone is the blank border scanners need.

When to use

Raise correction for logos or codes that will be printed small or may get scuffed.

Steps

  1. 1M is the everyday default; use Q or H with a logo.
  2. 2Keep the quiet zone at 4 modules for print — the spec recommendation.

Verification & auto-fix

Live scan verification

On every change, the studio renders your styled code and scans it back with a real decoder (jsQR). The badge shows scan status and measured contrast — proof it works before you print.

When to use

Always — it runs automatically. Trust the badge over how the code looks.

Steps

  1. 1Green — decoded and matches your content exactly.
  2. 2Amber — scans, but content differs, or advisory warnings apply.
  3. 3Red — the test scan failed; warnings explain why.

Reference

  • Warnings cover contrast under 3:1, inverted colors, logo vs error-correction level, and quiet zone under 2 modules.

Auto-fix

One click applies the smallest set of changes that makes the code scan — quiet zone to 4, error correction up, logo capped, colors deepened in their own hue, and shapes simplified only as a last resort. Each step re-verifies with the decoder.

When to use

Whenever the badge is red or amber and you would rather not debug it yourself.

Steps

  1. 1Click “Auto-fix — keep my design, make it scan” under the warnings.
  2. 2Review the toast summary of what changed.
  3. 3Fine-tune in the Design panel — every fix is a normal setting you can adjust.

Export & print

PNG, SVG, and PDF

PNG at 512–4096px, true vector SVG (with gradients, shapes, and embedded logo), and a print-ready PDF at 300 DPI — all watermark-free.

When to use

PNG for web and slides, SVG for design tools and large-format print, PDF for sending straight to a printer.

Steps

  1. 1Pick a pixel size and click PNG, or export SVG for infinite scaling.
  2. 2PDF wraps a 2048px render at 300 DPI (about 17 cm).

Print size rules

Minimum 2×2 cm for arm's-length scanning; for distance use the 10:1 rule — scanning distance divided by 10 equals the minimum code width. Always print at 300 DPI.

When to use

Posters, menus, business cards, packaging, signage.

Steps

  1. 1Business cards and menus: 2×2 cm minimum.
  2. 2Posters scanned from 1 m: at least 10 cm wide.
  3. 3Longer content (vCards, Wi-Fi) needs more modules — print those larger.

A4 sticker sheet

Tiles the current code across an A4 PDF at 300 DPI with 3–6 columns and an optional label under each — ready for sticker paper or a label cutter.

When to use

Table tents, product stickers, counter cards, repeated labels.

Steps

  1. 1Set columns and an optional label in the export card.
  2. 2Click A4 sheet and print the downloaded PDF at 100% scale.

Bulk & decode

Bulk / CSV mode

Paste up to 500 lines (or name,content CSV rows), preview the first dozen codes live in your current design, and download a ZIP of PNGs or SVGs. First CSV column names the file.

When to use

Table numbers, asset tags, per-branch links, ticket batches.

Steps

  1. 1Switch to Bulk / CSV above the preview.
  2. 2Paste rows or click Load CSV.
  3. 3Check the live grid, then download the PNG or SVG ZIP.

Reference

  • Duplicate names get numeric suffixes; failed rows are listed in the ZIP's README.

Decode an image

Drop any image containing a QR code onto the page (or click Scan image) and jsQR reads it locally — see exactly what a code contains before scanning it with your phone.

When to use

Checking codes from posters or emails, recovering a payload, verifying third-party codes for quishing.

Steps

  1. 1Drop the image anywhere on the studio, or use Scan image in the header.
  2. 2The decoded text appears under the preview with a copy button.

Related tools

QR Code Generator

Free online QR code generator with logo, colors, and shapes. Make a QR code for a URL, Wi-Fi, vCard, UPI, location, PDF, or text — download as PNG, SVG, or PDF. No sign up, no watermark, never expires.

Open

TOTP / HOTP

Generate TOTP codes and otpauth URIs locally.

Open

URL tools

Parse URLs, edit UTM params, and slugify paths.

Open

App icons

Design and export iOS, Android adaptive, and PWA icon packs in your browser.

Open

Placeholder

PNG/JPEG/WebP placeholders at any size, in-browser.

Open