OpenQR Studio Documentation
Learn how to generate all 12 QR code types, customize module patterns and logos, export high-resolution PNG, JPEG, and standalone SVG files, and ensure reliable scanability across cameras and print media.
Getting Started
OpenQR Studio runs directly in your browser with no account creation or software installation required. Follow these six steps to create and download a custom QR code:
- Step 1 • Access the Studio
Open the QR Design Studio
Navigate to the Create QR workspace from the top navigation bar or homepage.
- Step 2 • Select Content Type
Choose a QR Code Type
Pick one of the 12 supported QR content tabs (such as Website URL, Wi-Fi Network, vCard Contact, or Calendar Event).
- Step 3 • Enter Details
Fill in the Content Form
Enter your information into the guided fields. Inline validation checks required fields, phone numbers, URLs, and dates automatically.
- Step 4 • Inspect Live Preview
Preview & Check Scanability
As soon as your input is valid, the live QR preview updates instantly alongside an advisory Scanability badge and contrast ratio readout.
- Step 5 • Customize Appearance
Style Patterns, Colours & Logo
Use the Design Studio tabs (Presets, Shape, Colours, Logo, and Setup) to customize module patterns, gradients, finder corners, and logos.
- Step 6 • Export or Copy
Download PNG, JPEG, or SVG
In the Export Studio panel, choose PNG, JPEG, or SVG, select your target pixel dimensions or quality setting, and download or copy to your clipboard.
Choosing a QR Code Type
OpenQR Studio supports 12 static QR code types. Each generator formats your input into the appropriate URI, vCard, Wi-Fi, iCalendar, or text payload format:
1. Website URL
Open URL FormWhat It Does
Opens a web page or online resource in the user's default mobile browser when scanned.
When to Use It
Landing pages, digital restaurant menus, product pages, portfolios, and online documentation.
Required Information
Website URL (e.g., https://example.com).
Optional Fields
None.
Validation & Formatting: Must use http:// or https:// with a valid domain or host. If you enter a bare domain such as example.com, the form offers a one-click helper to prepend https://. Unsafe schemes (such as javascript: or data:) are rejected.
Generated Payload Format: Direct HTTP/HTTPS URI string.
2. Plain Text
Open TEXT FormWhat It Does
Displays unformatted multiline text directly on the scanning device without requiring an internet connection.
When to Use It
Serial numbers, inventory codes, short instructions, classroom prompts, or multilingual notes.
Required Information
Plain Text content (UTF-8).
Optional Fields
None.
Validation & Formatting: Cannot be empty or whitespace-only, and must remain within the byte capacity of the selected error correction level.
Generated Payload Format: Raw UTF-8 text string (supports Latin, Sinhala, Tamil, Japanese, Arabic, Emoji, and other Unicode scripts).
3. vCard Contact
Open VCARD FormWhat It Does
Prompts the scanning device to save a structured contact card directly into its address book.
When to Use It
Printed business cards, conference badges, email signatures, and office reception signage.
Required Information
First Name and/or Last Name (at least one name field is required).
Optional Fields
Organization, Job Title, Phone Number, Email Address, Website, Street Address, City, State / Province, Postal Code, and Country.
Validation & Formatting: Phone numbers (if provided) must contain 5–15 digits with valid formatting. Email (if provided) must be a valid email address. Website (if provided) must begin with http:// or https://.
Generated Payload Format: RFC 2426 vCard 3.0 block delimited by BEGIN:VCARD and END:VCARD with CRLF line endings and escaped special characters.
4. Wi-Fi Network
Open WIFI FormWhat It Does
Allows smartphones and tablets to join a wireless network automatically without typing the network name or password.
When to Use It
Home guest networks, cafes, hotels, coworking spaces, and conference venues.
Required Information
Network Name (SSID) and Password (when security is set to WPA/WPA2/WPA3 or WEP).
Optional Fields
Security Type (WPA/WPA2/WPA3, WEP, or None/Open) and Hidden Network toggle.
Validation & Formatting: SSID is required (up to 32 UTF-8 bytes per IEEE 802.11). WPA/WPA2/WPA3 passphrases must be 8–63 characters (or 64 hex digits). WEP keys must be 5 or 13 ASCII characters (or 10 or 26 hex digits). Switching encryption to None (Open) automatically clears the password field so credentials are not inadvertently encoded.
Generated Payload Format: Common WIFI: credential string (ZXing / Android / iOS convention) with escaped special characters (\, ;, ,, :, ").
5. Email
Open EMAIL FormWhat It Does
Opens the device's default email app with the recipient address, subject line, and message body pre-populated.
When to Use It
Customer support contact codes, RSVP replies, feedback cards, and helpdesk stickers.
Required Information
Recipient Email Address.
Optional Fields
Subject line and Message Body.
Validation & Formatting: Recipient email must follow valid user@domain.tld syntax.
Generated Payload Format: URI-encoded mailto: link with optional subject and body query parameters.
6. Phone Call
Open PHONE FormWhat It Does
Opens the phone dialer on mobile devices with the telephone number ready to call.
When to Use It
Emergency contact signs, service hotlines, storefront windows, and business directories.
Required Information
Phone Number.
Optional Fields
None.
Validation & Formatting: Must contain between 5 and 15 digits. Accepts international E.164 format (leading + followed by a non-zero country code digit 1–9) or local digits with balanced spaces, hyphens, or parentheses.
Generated Payload Format: Normalized tel: URI with formatting characters removed.
7. SMS Message
Open SMS FormWhat It Does
Opens the device's default text messaging app addressed to a phone number with an optional pre-filled message.
When to Use It
SMS opt-in campaigns, appointment confirmations, and quick text-back support.
Required Information
Recipient Phone Number.
Optional Fields
SMS Message Text.
Validation & Formatting: Phone number must contain 5–15 digits and pass international/local telephone validation.
Generated Payload Format: Normalized sms: URI with optional URI-encoded ?body= parameter.
8. Location
Open LOCATION FormWhat It Does
Opens a map application at exact geographic coordinates or a Google Maps pin.
When to Use It
Event venues, trailheads, delivery entrances, tourist landmarks, and physical store directions.
Required Information
Latitude (-90 to 90) and Longitude (-180 to 180).
Optional Fields
Location Label and Map Link Format (Standard RFC 5870 geo: or Google Maps Pin URL).
Validation & Formatting: Latitude must be a valid decimal number between -90 and 90. Longitude must be a valid decimal number between -180 and 180.
Generated Payload Format: Either an RFC 5870 geo:lat,lng URI (with optional ?q= label query) or a Google Maps search URL.
9. WhatsApp
Open WHATSAPP FormWhat It Does
Starts a direct WhatsApp chat with the specified phone number and optional pre-written greeting.
When to Use It
Customer service chat links, order inquiries, booking requests, and small-business packaging.
Required Information
Phone Number (with Country Code or full international digits).
Optional Fields
Country Code prefix and Pre-filled Message.
Validation & Formatting: Combined country code and subscriber number must total 7–15 digits with a valid non-zero country code. Formatting symbols and leading domestic trunk zeros (0) after a country code are stripped automatically.
Generated Payload Format: Official WhatsApp Universal Link (https://wa.me/<digits>) with optional ?text= query.
11. Calendar Event
Open CALENDAR FormWhat It Does
Prompts the user's device to add an appointment or event to their calendar application.
When to Use It
Conferences, webinars, workshops, concerts, and community meetups.
Required Information
Event Title, Start Date (and Start Time if not all-day), and End Date (and End Time if not all-day).
Optional Fields
All-Day Event toggle, Location, and Event Description.
Validation & Formatting: Calendar dates are checked against real calendar month lengths and leap years. The end date/time cannot be earlier than the start date/time.
Generated Payload Format: RFC 5545 iCalendar (VCALENDAR / VEVENT) payload. Timed events use UTC timestamps (YYYYMMDDTHHMMSSZ). For all-day events, the form accepts an inclusive end date and automatically advances DTEND;VALUE=DATE by 1 calendar day to satisfy RFC 5545 exclusive end-date semantics.
12. Custom Payload
Open CUSTOM FormWhat It Does
Encodes any raw string, custom URI scheme, or unformatted payload exactly as entered.
When to Use It
Mobile app deep links (myapp://...), IoT provisioning strings, internal warehouse barcodes, or specialized protocols.
Required Information
Raw Payload Data string.
Optional Fields
None.
Validation & Formatting: Must contain at least 1 character (cannot be empty) and fit within QR byte capacity.
Generated Payload Format: Unmodified UTF-8 byte stream of the entered string.
QR Design Customization
The QR Design Studio is organized into five tabs (Presets, Shape, Colours, Logo, and Setup) so you can customize visual styling while maintaining structural scanability:
Design Presets & Reset
Choose from 10 curated presets: Classic Black, Midnight, Ocean Blue, Emerald, Royal Purple, Sunset, Minimal White, Soft Rose, Premium Gold, and Modern Gradient. Clicking Reset Design in the studio header immediately restores the default Classic Black configuration (square #171717 modules on #FFFFFF, 4-module quiet zone, error correction level M, and 1024×1024 px dimensions) and removes any uploaded logo.
Module Pattern Styles
Under the Shape tab, select from 6 data module styles: Square, Dots, Rounded, Classy, Classy Rounded, and Extra Rounded. Classic Square and Rounded patterns offer the highest optical definition at small print sizes.
Colours & Gradients
Under the Colours tab, configure solid #RRGGBB hex colours or enable 2-stop Linear (0°–360° rotation angle) or Radial gradients for both foreground modules and the background surface. You can also enable Transparent background for PNG and SVG exports.
Finder Frames & Inner Dots
Customize the three corner alignment markers independently: choose outer frame styles (Square, Dot, Extra Rounded) and inner eye dot styles (Square, Dot), and assign custom hex colours to both outer frames and inner dots.
Quiet-Zone Margin Settings
Under the Setup tab, the quiet-zone slider adjusts the perimeter margin from 0 to 12 QR modules in 1-module steps (default 4 modules; programmatic design state clamps values to 0–24 modules). The value is stored in QR modules and converted proportionally into pixel margins during live preview (320 px) and export (128–4096 px) based on the QR version's module grid width (round(dimensionPx × marginModules / (modulesPerSide + 2 × marginModules))). Setting the quiet zone below 4 modules triggers an advisory scanability warning per ISO/IEC 18004.
Error Correction Levels (L, M, Q, H)
Select Reed-Solomon error correction under Setup: L (~7%) for compact codes on clean screens, M (~15%, default) for general everyday use, Q (~25%) for printed packaging, and H (~30%) when embedding a center logo.
Logo Guidelines
The Logo tab lets you embed a custom brand mark or icon in the center of your QR code. Review these verified technical limits and best practices:
Accepted Formats & File Size
- • Supported Formats:
PNG(image/png),JPEG(image/jpeg),WebP(image/webp), andSVG(image/svg+xml). - • Maximum Upload Size:
2.0 MB(2,097,152 bytes). - • SVG Security Sanitization: Uploaded SVG logos are parsed and sanitized in the browser. SVGs with
<script>,<foreignObject>, event handlers (onload), or external network URLs are rejected.
Logo Scale, Clearance Padding & Backing Plates
- • Logo Scale (Logo Size Ratio): Adjustable via the studio slider from
10%to30%in1%steps (default22%/0.22; engine clamps8%–30%). This ratio determines the size of the central module-clearance zone relative to the QR grid and active error correction level. Keeping scale at or below24%is recommended. - • Clearance Padding (Outer Margin): Adjustable from
0 pxto16 pxin1 pxsteps (default4 px; engine clamps0–32 px). Clearance padding adds an outer pixel gap between the surrounding QR data modules and the outer edge of the logo container/backing plate (boxSize - 2 × margin). - • Container Shapes & Solid Backing Plate: Choose a
Square,Rounded(18.75% corner radius), orCircle(50% radius) container. Enabling the optional Solid Logo Backing Plate (default#FFFFFF) fills the clipped container box and automatically insets the inner logo image by9.375%(24 / 256on each side, leaving an81.25%inner artwork box) so the logo graphic has internal padding within the coloured plate.
Exporting QR Codes
The Export Studio panel beneath the live preview lets you download your customized QR code in three formats. Every exported file is verified client-side before download and named openqr-<type>.<ext>:
PNG Export
- Preset Dimensions:
256 px,512 px,1024 px(default), and2048 px. - Custom Dimensions: Any square pixel size from
128×128 pxto4096×4096 px. - Transparency Behaviour: Supports true 32-bit RGBA alpha transparency when the transparent background switch is enabled.
JPEG Export
- Available Dimensions: Presets (
256–2048 px) and custom sizes (128–4096 px). - Quality Settings: Choose
Standard (80%),High (92%, default), orMaximum (100%). - Background Compositing: Because JPEG does not support transparency, transparent designs are automatically composited onto a solid white (
#FFFFFF) background.
SVG Vector Export
- Vector Format: Standalone XML 1.0 document with explicit
xmlns,width,height, andviewBoxattributes. - Logo Embedding: Uploaded logos and backing plates are embedded inside the SVG as self-contained
data:URIs. - Best Use Cases: Commercial printing, signage, packaging, and editing in Illustrator, Figma, or Inkscape.
Clipboard Features
Copy QR Image & PNG Fallback
Clicking Copy QR Image renders a PNG at your currently selected export resolution and writes it to your system clipboard using the browser ClipboardItem API so you can paste directly into slides, documents, or design tools.
Automatic Fallback: If your browser does not support binary image clipboard writing, OpenQR Studio automatically downloads the PNG file (openqr-<type>.png) and displays an informational notice.
Copy Payload & Browser Permissions
Clicking Copy Payload copies the exact formatted QR data string (such as the full BEGIN:VCARD...END:VCARD block or WIFI:T:... string, preserving all UTF-8 characters and line breaks) via navigator.clipboard.writeText.
Permission Handling: Both clipboard actions wait for browser confirmation before reporting success. If clipboard permission is denied by your browser settings, an explicit error message is shown.
QR Code Scanability
Real-world QR scanning depends on optical and physical conditions. Keep these seven factors in mind when styling and printing your QR codes:
4.5:1 (ratios below 3.0:1 or inverted light-on-dark palettes frequently fail to scan).24% and enable the solid backing plate for clear optical separation.4-module quiet zone around the perimeter so cameras can distinguish the QR symbol from surrounding text or borders.M (~15%) for standard codes, and increase to Q (~25%) or H (~30%) when adding a logo or printing on surfaces subject to wear.Advisory Notice: The in-app scanability indicator (Good Scanability, Scanability Caution, or High Scanability Risk) is an automated heuristic evaluation and cannot guarantee universal scanability across all cameras, lighting conditions, or print materials. Always test exported QR codes on multiple physical devices before mass printing.
Troubleshooting
Solutions for common QR scanning, validation, export, and browser issues:
QR code is not scanning on mobile cameras
Check the Scanability status badge below the preview. Ensure the quiet-zone margin is at least 4 modules, foreground modules are darker than the background (avoid inverted light-on-dark schemes), and the contrast ratio is at least 4.5:1.
QR code looks too dense or has tiny modules
Long payloads (such as detailed vCards or long URLs with tracking parameters) require higher QR versions with more modules. Shorten optional text fields, remove unnecessary URL query parameters, or lower Error Correction from H to M if you are not using a center logo.
Embedded logo prevents the QR code from scanning
Reduce the Logo Size slider to 22% or lower, enable the solid Backing Plate so underlying modules do not bleed through transparent parts of your logo, and set Error Correction Level to H (~30%) or Q (~25%).
Low contrast or inverted colour warning
Hardware and smartphone scanners expect dark modules and dark corner finder patterns against a lighter surface. Darken your foreground or gradient stops, lighten the background colour, and verify that all three corner finder frames and inner dots also maintain high contrast.
Form shows an invalid input error
Each QR type validates its required syntax before rendering. For URLs, ensure the address begins with https:// or http:// (or click the prefix helper). For Phone, SMS, and WhatsApp, ensure the number contains 5–15 digits without unbalanced parentheses. For Calendar events, ensure the end date/time is not before the start date/time.
Export download fails or times out
If you are exporting a very large raster dimension (such as 4096×4096 px) on a memory-constrained mobile device, try exporting at 1024×1024 px or 2048×2048 px, or export as a vector SVG file which requires minimal memory and scales infinitely.
Copy QR Image or Copy Payload reports a permission error
Modern browsers require clipboard write permission. If you previously blocked clipboard access for the site, click the site permissions icon in your browser's address bar to allow Clipboard access, or use the Download PNG / SVG button directly.
Browser does not support copying images to the clipboard
Some browsers restrict the ClipboardItem API for binary PNG images. When image clipboard writing is unavailable, clicking Copy QR Image automatically falls back to downloading the PNG file (openqr-<type>.png) to your device.
Exported SVG displays differently in external software
OpenQR Studio exports standalone XML 1.0 SVG files with explicit width, height, viewBox, and embedded base64 logos. If a legacy CAD or vinyl cutter tool does not support SVG <linearGradient> or <image> tags, disable gradients and logos or use a vector editor (such as Inkscape or Illustrator) to flatten shapes before cutting.
Privacy and Security
All QR payloads (including Wi-Fi passwords, vCard contacts, and URLs) and uploaded logo files are processed locally in your browser memory. OpenQR Studio does not send your QR content to an application server or store it in localStorage, sessionStorage, or IndexedDB. Uploaded SVG logos undergo strict client-side XML and DOMPurify sanitization before rendering.
Technical Information
- • Execution Model: Client-side payload generation, SVG DOM rendering, and HTML5 Canvas rasterization in modern web browsers.
- • Character Encoding: Full UTF-8 Byte-mode encoding supporting international scripts and emoji across Plain Text, vCard, Wi-Fi, Calendar, and Custom payloads.
- • Export Formats: PNG (
image/png, 32-bit RGBA), JPEG (image/jpeg, 80% / 92% / 100% quality composited on#FFFFFF), and standalone XML 1.0 SVG (image/svg+xml). - • Open-Source License: MIT License. Source code is publicly available at https://github.com/milindajay/OPEN_QR.