DevTools Logo

QR Code Generator

QR Code Generator

Create custom QR codes for Links, WiFi, Emails, and more.

1. QR Content

Choose content type and enter data

This text will be included in the downloaded image.

Examples

Encode a website URL

Input
Type: URL
Value: https://devtools.tools
Output
https://devtools.tools

URL and plain-text payloads are passed directly to the QR canvas without a wrapper.

Create an email QR payload

Input
Type: Email
Email: dev@example.com
Subject: Build ready
Message: See staging & logs
Output
mailto:dev@example.com?subject=Build%20ready&body=See%20staging%20%26%20logs

The subject and body are URI-encoded while the email address remains in the mailto payload.

Create a WPA WiFi QR payload

Input
Type: WiFi
SSID: Studio WiFi
Encryption: WPA
Password: s3cret
Output
WIFI:S:Studio WiFi;T:WPA;P:s3cret;;

The generator uses the standard compact WiFi payload shape with WPA encryption and a terminating double semicolon.

About this tool

The QR Code Generator creates a QRCodeCanvas preview for six common payload types: URL, plain text, email, WiFi, phone and SMS. The default URL is https://devtools.tools, and the preview uses a high error-correction level with an included margin so the code has a clear quiet zone around it.

Composite types are converted into the payload strings that QR readers expect: mailto links encode the subject and body, WiFi uses the WIFI:S:...;T:...;P:...;; form, phone values use a tel: prefix, and SMS values use SMSTO:phone:message. You can set foreground and background colors and add an optional label of up to 40 characters to the preview and downloaded PNG.

The tool renders a 200px QR preview in the current component and exposes a PNG download action. The content is generated in the browser, so the value is not sent to a QR service; remember that a QR code is readable by anyone who can scan the resulting image.

How to use

  1. Choose a content type

    Select URL, Text, Email, WiFi, Phone or SMS from the QR Content tabs.

  2. Enter the payload

    Fill in the type-specific field. Email, WiFi and SMS use their dedicated forms, while URL, Text and Phone accept a direct value.

  3. Customize the appearance

    Set foreground and background colors, then enter optional label text. Labels are limited to 40 characters and are included in the PNG download.

  4. Preview and download

    Check the live QR preview and click Download PNG. The download composites the QR image and label on a background-colored canvas when a label is present.

Use cases

Sharing a staging or documentation URL

Generate a URL QR code for a sign, slide, printed runbook or conference handout so a phone can open the page without typing it.

Posting guest WiFi details

Use the WiFi form to turn a network name, encryption type and password into a scanable onboarding code.

Creating a contact action

Use the email, phone or SMS tabs to place a ready-to-start communication action on a device or printed card.

Adding labeled codes to physical materials

Choose colors and add a short label such as Guest WiFi or Scan for docs, then download the composed PNG for a poster or label.

Common mistakes

Mistake:Putting secrets or long-lived credentials into a QR code without considering who can scan it.

Fix:Treat the QR image as public once it is printed or shared. Use short-lived links or a controlled onboarding flow instead of embedding sensitive material.

Mistake:Expecting punctuation in a WiFi SSID or password to be escaped.

Fix:The component writes SSID and password directly into the WIFI:S:...;T:...;P:...;; payload. Test delimiter characters with your target scanner or use values that do not contain the payload separators.

Mistake:Assuming the Size field changes the current preview dimensions.

Fix:The current component keeps QRCodeCanvas at 200px even though the form exposes a size input, so verify the downloaded image and preview behavior before relying on that control.

Mistake:Adding a label longer than the image can comfortably display.

Fix:Keep the label under the component's 40-character limit and use a short instruction or identifier; the downloaded PNG adds extra height for the label.

Frequently asked questions

References & standards