QR — Manual

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, the status area (scan test, capacity, warnings) and the action buttons.

The preview updates automatically: after a delay of about 400 ms while you type or change colors, number fields and sliders, and immediately for most dropdowns and toggles in the options (such as QR Shape, Error Correction, the dot and corner styles or Transparent background). Exceptions that use the same delay: Security and Hidden network in the WiFi form and the Gradient dropdown (Linear/Radial). The Generate button re-renders explicitly and confirms with a toast. If the input is empty, the tool creates no code and shows "Enter some content to create a QR code." instead.

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 nine types. If you leave a type's required fields empty, no code is created — rather than, say, a QR code that contains nothing but https://.

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 instead of typing it (accepted are files with a text MIME type or the .txt extension). Ctrl+Enter in the text area triggers a regeneration.

URL

A Website URL 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. An existing scheme (http:, https:, ftp: …) is left untouched. The tool treats anything before the first colon as a scheme, though, if it starts with a letter and contains only letters, digits, dots, plus or minus signs — so addresses with a port such as localhost:8080 or example.com:8443/path get no https://. Always enter such addresses with their scheme.

WiFi Network

Produces a scannable WiFi login. Fields: Network Name (SSID), Password, Security, and the Hidden network toggle for hidden networks. The Security select offers:

This yields the standard string:

WIFI:T:<WPA|SAE|WEP|nopass>;S:<SSID>;P:<password>;H:true;;

The P: field is dropped for None (Open), and H:true only appears when Hidden network is on. Special characters in the SSID and password (\ ; , : ") are escaped. Without an SSID, no code is created. 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, CRLF line endings). Empty organization, phone, email and website fields are left out; the N: (structured name) and FN: (display name) lines, however, are always in the vCard. First and last name fill both — without them, N: stays empty (N:;;;;) and FN: falls back to the organization or stays empty as well. Backslashes, semicolons, commas and line breaks in names and organization are escaped by vCard rules, so "Smith, Jones & Partners" doesn't split into two fields. If every field is empty, no code is created.

Email

Produces a mailto: link. Fields: To (recipient), Subject, and Message. Subject and body are URL-encoded and appended as ?subject=…&body=…. Scanning opens the mail app with the message prepared.

SMS

Produces an SMSTO: entry from Phone Number and Message. The tool strips spaces, parentheses, dots, slashes and hyphens from the number. Scanning opens the messaging app with the recipient and text. The result has the form SMSTO:<number>:<message>.

Phone Call

A single Phone Number field for a call code. Here too the tool strips spaces and separators; the international format with + works everywhere. Result: tel:<number>, e.g. tel:+49821123456. Scanning offers to dial the number.

Location (Geo)

Two fields, Latitude (−90 to 90) and Longitude (−180 to 180), in decimal degrees (WGS 84). They produce geo:<latitude>,<longitude>, e.g. geo:48.3705,10.8978; scanning opens the place in the phone's map app. If a value is missing or out of range, no code is created.

Calendar Event

An appointment to add to the calendar. Fields: Title, Location, Start, End (both as date and time) and Description. The tool builds an iCalendar block from them:

BEGIN:VEVENT
SUMMARY:<title>
LOCATION:<location>
DTSTART:20261015T143000
DTEND:20261015T160000
DESCRIPTION:<description>
END:VEVENT

Empty fields are left out; title, location and description are escaped just like in the vCard. The times are "floating", i.e. without a time zone: the phone enters the event in its own local time. A code is created as soon as Title or Start is set — for a calendar entry that scanners reliably pick up, fill in both.

Accents, emoji and other scripts

All content types are encoded as UTF-8. Accented letters, ß, Cyrillic, Chinese characters or emoji therefore end up in the code intact and display correctly in current scanners. Pure ASCII text is passed to the library unchanged, so it can still choose the more compact Numeric or Alphanumeric modes for digits or capital letters.

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). The number sets the pixel dimensions of the raster exports (PNG/JPEG/WebP) and is also the nominal size of the SVG (width/height, which is how it appears after Copy SVG too). The library rounds the module size down to whole pixels, and the remainder ends up as extra margin — in the raster image and in the SVG alike. At very small values this is noticeable: at 50 px with the Quiet zone of 4 modules toggle on (7 px margin, see below) and a code with 25 × 25 modules, each module is just 1 px, and the code fills only half the edge length. The finished SVG scales losslessly but keeps that ratio of code to margin. For SVG exports, a Size of a few hundred pixels is therefore worthwhile; the rounding then hardly matters.

Margin

Margin (Pixels) is the margin (the quiet zone) around the code, 0 to 400 pixels. It sits inside the edge length chosen under Size.

Below it is the Quiet zone of 4 modules (recommended) toggle, on by default. The tool then calculates the margin itself so that at least four modules stay clear all around, as the QR specification requires: margin = ceil(4 × Size ÷ (module count + 8)). At 350 px and a code with 25 × 25 modules, that's 43 px. The computed value appears in the Margin field, which is locked while the toggle is on. Because the library rounds the module size down to whole pixels and centers the code, a little more usually stays clear: in the example the modules become 10 px, the code 250 px wide, and the actual margin is 50 px — five modules.

The automatic has two limits. The margin is capped at 400 px; at a Size close to 3000 px and a code with only 21 × 21 modules (version 1), that's just short of a full four modules, and no warning appears in this case. And in circle mode the margin only applies outside the circle — how little room remains right around the actual code is explained under QR Shape.

Switch the automatic off and you enter the margin by hand. If it drops below four modules, a warning appears under the preview with a Use N px button that turns the automatic back on. Why the margin matters so much is explained in the Tips & Tricks.

QR Shape

QR Shape picks the overall shape: Square (the default) or Circle. With Circle nothing is cropped: the library shrinks the complete code into the circle's inscribed square (usable edge length ÷ √2) and fills the ring between square and circle edge with decorative modules whose pattern is copied from the code. These decorative modules start just one module away from the actual code — so in circle mode only one module stays clear around the data, even with the Quiet zone of 4 modules toggle on.

Error Correction

QR codes carry redundancy so they stay readable when dirty or partly obscured. Error Correction offers four levels:

Higher levels cost capacity: the same content needs a denser code in H than in L. The byte maxima apply to byte mode; how much your content uses is shown in the capacity line below the preview. 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 (no transparency) and offers eight 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% in steps of 5) are available; the slider rounds the outer corners of the background. With a transparent background, the contrast check measures against white and reminds you to place the code on a light, plain surface.

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 adapts automatically to code size, margin, shape, logo size and the image's aspect ratio so the image never becomes negatively sized; a value that's too large gets pulled back.
• Hide dots behind image (recommended) — clears the modules behind the logo so it stays crisp (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. Because level H holds at most 1273 bytes, very long content may no longer fit once a logo is added; the "Too much content" message then points out that the logo forces level H. The trash-icon button (top right of the card) removes the logo again and restores your previous error-correction level. The logo, too, is processed purely locally and never uploaded.

Preview and export

Status area: scan test, capacity, warnings

Right below the preview, the tool reports three kinds of feedback after every render.

Scan test

The tool rasterizes the finished code at several typical sizes (240, 320, 200 and 400 px, with a white border) and decodes it again with the jsQR (opens in a new tab) library. The result is compared byte by byte with your content:

With a logo, the test runs once the image has been drawn in. It doesn't replace a test with a real camera — see Tips & Tricks.

Capacity

The capacity line shows the bytes used (UTF-8), the maximum for the current error-correction level, the QR version with its module count, and the level, for example:

20 / 2,331 bytes · version 2 (25×25 modules) · error correction M

If the content no longer fits into a QR code (version 40), no code is created. Instead the tool reports "Too much content" with the byte count and the maximum, and, where it applies, points to the larger capacity of level L or to the fact that a logo forces level H.

Warnings

The tool checks the chosen colors using the WCAG formula for relative luminance. It compares the worst pair of dot and (custom) corner colors — every stop, in the case of gradients — against the background:

• Low contrast (red) — below 3:1. Scanners need at least 3:1; 7:1 or more is safe.
• Contrast … is borderline (yellow) — between 3:1 and 4.5:1; poor light and some scanners will struggle.
• Light code on a dark background (inverted) (red) — the code is, on average, lighter than its background. Many scanners only read dark codes on a light background.
• Transparent background (note) — place the code on a light, plain surface.
• Quiet zone smaller than 4 modules (yellow) — only with a manual margin; comes with a Use N px button.

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. Transparent areas — a transparent background or the free corners with Corner Roundness above 0% — turn black; with dark dots the code then becomes unreadable. For transparent codes, use PNG, WebP or SVG.

All raster formats are produced at the pixel size chosen under Size. The file name combines the content type with a short version of the content (at most 40 characters, lowercase, accents removed), e.g. qr-url-www-jpkc-com.svg, qr-wifi-cafe-bar-1.png or qr-event-team-meeting.webp. Without content, the tool reports "Nothing to download — add some content first".

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.

The Reference tab also contains practical tips (quiet zone, scan distance, contrast, error correction) and further reading. 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, no account and no storage.
• Local scan test: the browser fetches the jsQR decoding library from the same server on the first test; the check itself also runs only in the browser.
• UTF-8: non-ASCII content is encoded as UTF-8 bytes.
• Vector first: every code is an SVG internally; raster formats are produced from it.
• Live preview: text input, colors, number fields and sliders are applied after a delay of about 400 ms to keep typing smooth; most dropdowns and toggles take effect immediately (exceptions: Security and Hidden network in the WiFi form, the Gradient dropdown).
• Automatic quiet zone: at least four modules of margin by default, calculated to match the module count.
• 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.