QR — Manual
Full reference for the QR generator: every content type, size/margin/shape, error correction, dot and corner styles, gradients, center logo, and export.
Back to overview: QR · Open the live tool: www.jpkc.com/tools/qr/
This manual describes the QR code generator in full: every content type, every styling option, and every export. The tool's interface is in English, so the labels appear here in their original spelling.
Interface layout
The page has two columns:
- Left (wide) — the input: the Content card with the content type at the top, then Main Options, then the styling cards Dots Options, Background Options, Corners Square Options, Corners Dot Options, and finally Center Image / Logo.
- Right (narrow, sticky) — the Preview card with the live preview, a size badge, and the action buttons.
The preview updates automatically (with a slight delay) as you type or change options. The Generate button re-renders explicitly and confirms with a toast.
Choosing the content type (Content Type)
The Content Type select determines what gets encoded. Each choice reveals a matching input mask, and the tool assembles the correct string for the QR code automatically. There are exactly six types:
Plain Text
The default. A large text area accepts any text, a URL, or structured data (pre-filled with https://www.jpkc.com). The Upload .txt button loads the contents of a text file (.txt) instead of typing it. Ctrl+Enter in the text area triggers a regeneration.
URL
A single field for a web address. If the scheme is missing, the tool prepends https:// automatically — so you can enter example.com and get https://example.com encoded.
WiFi Network
Produces a scannable WiFi login. Fields: Network Name (SSID), Password, Security (choice of WPA/WPA2, WEP or None (Open)), and the Hidden network toggle. This yields the standard string:
WIFI:S:<SSID>;T:<WPA|WEP|nopass>;P:<password>;H:<true|false>;;Special characters in the SSID and password (\ ; : ") are escaped correctly. Scanning the code offers to connect with a single tap on most phones.
vCard (Contact)
A digital business card. Fields: First Name, Last Name, Organization, Phone, Email and Website. The tool builds a vCard version 3.0 (BEGIN:VCARD … END:VCARD). Empty fields are omitted; first and last name fill both the structured N: line and the display name FN:.
Produces a mailto: link. Fields: To (recipient), Subject, and Message. Subject and body are URL-encoded and appended. Scanning opens the mail app with the message prepared.
SMS
Produces an smsto: entry from Phone Number and Message. Scanning opens the messaging app with the recipient and text. The result has the form smsto:<number>:<message>.
Main Options
Size
Size (Pixels) sets the edge length of the code in pixels. Allowed range is 50 to 3000, default 350. Out-of-range values are clamped back. The current size shows as a badge above the preview (e.g. 350 × 350 px). Because the code is internally a vector, this number only affects the raster exports (PNG/JPEG/WebP) — the SVG scales losslessly.
Margin
Margin (Pixels) is the margin (the quiet zone) around the code, 0 to 200 pixels, default 0. A sufficient light border is part of the QR spec and matters for scanning — see Tips & Tricks.
QR Shape
QR Shape picks the overall shape: Square (the default) or Circle (cropped to a circle).
Error Correction
QR codes carry redundancy so they stay readable when dirty or partly obscured. Error Correction offers four levels:
| Level | Recovery | When to use |
|---|---|---|
| Low (L) | ~ 7% | clean display, maximum capacity |
| Medium (M) | ~ 15% | general default |
| Quartile (Q) | ~ 25% | print, center logo |
| High (H) | ~ 30% | rough environment, logo, outdoors |
Higher levels cost capacity: the same content needs a denser code in H than in L. Important: the moment you embed a logo, the tool forces High (H) and locks the select (see Center Image).
Styling dots and corners
Dots Options
Dots Style sets the shape of the data dots: Square, Dots, Rounded, Extra rounded, Classy or Classy rounded. Below it is the color block (see Colors), defaulting to black.
Corners Square Options
The three large squares in the corners (the finder patterns) can be styled separately. Corners Square Style: Same as dots (default — inherits the dot style), Square, Extra rounded or Dot. The Custom color toggle reveals a dedicated color block; without it the corner inherits the dot color.
Corners Dot Options
The inner dot of each corner marker. Corners Dot Style: Same as dots (default), Square or Dot. Here too a Custom color toggle allows a different color.
Colors: single or gradient
Each color block (dots, corners, background) offers two modes, switched with the Single and Gradient buttons:
- Single — one color, chosen via the color field. The picker (Coloris) accepts HEX, RGB or HSL input and offers standard swatches.
- Gradient — a gradient with two stops (Color 1, Color 2), as Linear or Radial (the Gradient select), with a Rotation from 0 to 360° (in 5° steps).
Background Options
The Transparent background toggle makes the background see-through (handy for SVG/PNG/WebP on a colored surface). With it off, a color block (single/gradient, default white) and the Corner Roundness slider (0–100%) are available; the slider rounds the outer corners of the background.
Center Image / Logo
The file field in the Center Image / Logo card embeds your own image in the center. Accepted: PNG, JPG, SVG, WebP, AVIF and GIF (animated GIFs render as the first frame). The options:
- Image Size — logo size relative to the code, 10 to 60%, default 40%.
- Image Margin — padding around the logo in pixels (default 5). The maximum scales automatically with code and logo size so the image never becomes negatively sized.
- Hide dots behind image — clears the modules behind the logo so it stays crisp (recommended, on by default).
Once a logo is set, the tool forces error correction to High (H) and locks the select — a logo covers modules, and the high redundancy keeps the code scannable anyway. The trash-icon button removes the logo again and restores your previous error-correction level. The logo, too, is processed purely locally and never uploaded.
Preview and export
Generate
Generate re-renders the code explicitly and reports "QR code generated!". In practice you rarely need it, because the preview keeps up live — it's mainly the deliberate "done" action.
Export: PNG, SVG, JPEG, WebP
Four download buttons export the current code:
- SVG — lossless vector, ideal for print and arbitrary scaling.
- PNG — raster image with transparency support.
- WebP — modern, compact raster export.
- JPEG — raster image without transparency (a transparent background is filled).
All raster formats are produced at the pixel size chosen under Size. The file is named qrcode.<ext>.
Copy SVG
Copy SVG puts the code as SVG markup on the clipboard — handy for pasting it straight into HTML, a design file or a document without going through a file.
The learning and reference area
Below the generator sits a thorough, interactive learning area with three tabs:
- Anatomy — the building blocks of a QR code (finder patterns, alignment patterns, timing patterns, separators, quiet zone, format and version information, the dark module) with an interactive overview that highlights a region on the live code as you hover it.
- Encoding — how text becomes a QR code: encoding modes (Numeric, Alphanumeric, Byte, Kanji), the bitstream, Reed-Solomon error correction, interleaving, zig-zag placement and masking, plus live demos of the eight mask patterns, an L vs M vs Q vs H comparison, and a damage demo.
- Reference — lookup tables: versions 1–40 with grid sizes, maximum capacity (version 40), the alphanumeric character set, common content formats, and a short history-and-standards rundown.
This area explains the theory and does not affect generation — it's a standalone learning resource for anyone who wants to understand what they're producing.
Architecture and privacy
- Fully client-side: the code is rendered in the browser with qr-code-styling; content and logo never leave it. There's no server round-trip to process your data.
- Vector first: every code is an SVG internally; raster formats are produced from it.
- Live preview: changes are applied with a slight delay to keep typing smooth.
- Logo forces H: a center image fixes error correction at High.
For the introduction and target audiences, see the overview. Concrete walk-throughs are in the examples, strategy and pitfalls in the tips & tricks. You can try it all in the tool.