# 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. Source: https://www.jpkc.com/db/en/tools/qr/manual/ Back to overview: [QR](https://www.jpkc.com/db/en/tools/qr/) · Open the live tool: [www.jpkc.com/tools/qr/](https://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:;T:;P:;H:;; ``` 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:`. ### Email 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::`. ## 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](https://www.jpkc.com/db/en/tools/qr/tips/#dont-forget-the-margin-the-quiet-zone). ### 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](#center-image-logo)). ## 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](#colors-single-or-gradient)), 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.`. ### 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](https://www.jpkc.com/db/en/tools/qr/). Concrete walk-throughs are in the [examples](https://www.jpkc.com/db/en/tools/qr/examples/), strategy and pitfalls in the [tips & tricks](https://www.jpkc.com/db/en/tools/qr/tips/). You can try it all in the [tool](https://www.jpkc.com/tools/qr/).