DEV Community

Snappy Tools
Snappy Tools

Posted on • Originally published at snappytools.app

QR Codes Explained: How They Work, What They Store, and How to Create One

QR codes are one of those technologies that went from niche to universal almost overnight. Before 2020 they were largely ignored outside of Japan; after the pandemic made touchless everything essential, they're on every restaurant menu, bus stop, and product label.

But most developers still treat them as a black box. Here's how they actually work, what they can store, and how to create them correctly.

What is a QR code?

QR stands for Quick Response. A QR code is a 2D matrix barcode — a grid of black and white squares that encodes data. Unlike 1D barcodes (the kind on grocery items), QR codes can store significantly more information and can be scanned from any orientation.

QR codes were invented in 1994 by Denso Wave, a Toyota subsidiary, for tracking car parts in manufacturing. They published the format as an open standard, which is part of why it spread so widely.

What can a QR code store?

QR codes can encode any text. The scanner interprets the text based on well-known format conventions:

Content type Format Example
URL Any valid URL https://example.com
Plain text Any text Hello, World!
Email mailto: URL mailto:name@example.com
Phone number tel: URL tel:+12025551234
SMS SMSTO:number:message SMSTO:+12025551234:Hello
WiFi WIFI protocol WIFI:T:WPA;S:MyNetwork;P:password;;
Contact (vCard) vCard format BEGIN:VCARD\nVERSION:3.0\nFN:Name...
Location geo: URI geo:37.786,-122.399
App Store link App Store URL Standard https URL

WiFi QR codes are particularly useful. Guests at a venue can scan and automatically connect without typing the password. The format is:

WIFI:T:WPA;S:NetworkName;P:Password;;
Enter fullscreen mode Exit fullscreen mode

The T: field is the authentication type (WPA, WEP, or nopass for open networks). The trailing ;; is required. Supported on Android 10+ and iPhone iOS 11+.

How QR codes work (the quick version)

A QR code has several functional regions:

  • Finder patterns: The three square patterns in three corners. These let scanners locate and orient the code regardless of rotation.
  • Timing patterns: Alternating black-and-white stripes that help calculate cell size.
  • Alignment patterns: In larger QR codes, these help correct distortion.
  • Data modules: The remaining cells, which store the actual encoded data.

Data is encoded using a combination of Reed-Solomon error correction and one of four encoding modes: Numeric (digits only), Alphanumeric (uppercase + digits + some symbols), Byte (arbitrary binary, including UTF-8 text), and Kanji.

Error correction levels

QR codes can be partially damaged or obscured and still scan correctly. There are four error correction levels:

Level Damage tolerance When to use
L (Low) 7% Screen display, clean prints
M (Medium) 15% General purpose default
Q (Quartile) 25% When some damage is expected
H (High) 30% Overlaying a logo, outdoor prints

Higher error correction = larger, denser QR code. For on-screen display, Level L or M is fine. For print materials where you want to overlay a logo in the centre, use Level H.

Static vs dynamic QR codes

Static QR codes encode the data directly. The URL or content is permanently embedded. They're free, work forever, and need no backend.

Dynamic QR codes encode a short redirect URL. The actual destination can be changed later without printing a new QR code. They require a paid service (Bitly, QR Tiger, etc.) and depend on that service remaining operational.

For most developer use cases — linking to a documentation page, contact card, or app store — a static QR code is the right choice. Dynamic codes are worth the cost only when you need analytics or the ability to update the destination later (e.g., event schedules, menus).

What size should a QR code be for print?

A QR code must be large enough for scanners to read. General guidelines:

Use case Minimum size
Business card 2.5 cm × 2.5 cm (1 inch)
Flyer / poster 3–4 cm (1.5 inches)
Banner / signage 5+ cm, scaled to viewing distance
Outdoor billboard 10+ cm for close range; scale up for distance

The scanning distance is roughly 10× the QR code size. A 3 cm code is comfortable to scan at 30 cm (12 inches). For a banner on a wall 3 metres away, the code should be at least 30 cm.

Download QR codes as SVG (vector) if the tool supports it — you can scale an SVG to any size without pixelation. PNG is fine for fixed-size use on screen.

Creating a QR code without a third-party service

The QR Code Generator at SnappyTools creates QR codes for URLs, plain text, and WiFi credentials entirely in the browser — no server, no account, no data uploaded. Choose error correction level, download as PNG, and you're done. It uses the qrcode.js library which produces standard QR codes compatible with all modern phone cameras.

Generating QR codes programmatically

JavaScript (qrcode.js):

// npm install qrcode
const QRCode = require('qrcode');
const url = 'https://example.com';
QRCode.toDataURL(url, { errorCorrectionLevel: 'M' }, (err, dataUrl) => {
  document.getElementById('qr').src = dataUrl;
});
Enter fullscreen mode Exit fullscreen mode

Python (qrcode library):

# pip install qrcode[pil]
import qrcode
img = qrcode.make('https://example.com')
img.save('qrcode.png')

# With options
qr = qrcode.QRCode(error_correction=qrcode.constants.ERROR_CORRECT_H)
qr.add_data('https://example.com')
qr.make(fit=True)
img = qr.make_image()
img.save('qrcode-h.png')
Enter fullscreen mode Exit fullscreen mode

Go (skip-go/qrcode):

import "github.com/skip2/go-qrcode"
qrcode.WriteFile("https://example.com", qrcode.Medium, 256, "qrcode.png")
Enter fullscreen mode Exit fullscreen mode

One thing most developers get wrong

When encoding a URL in a QR code, make sure the URL is fully qualified with the scheme (https://). A code containing just example.com without https:// will not be auto-linked by most phone cameras — they need the protocol prefix to recognise it as a URL.

Always test the generated QR code by scanning it with a phone before distributing it.

Top comments (0)