QR Code Generator

$10

QR Code Generator

Custom QR codes generated right inside Framer

Details

Category

Last update

Suggest improvement or report a bug

Documentation

What it does

It builds a QR code from what you type, styles it to match your brand, and lets visitors download it.

The code is generated in the browser. Nothing is sent anywhere, and there's no service that can stop working and break every code you've published.

Controls

42 controls, 33 of which only appear when they are relevant.

Control

Type

Default

Notes

Type

Enum

URL / Text / Wi-Fi / Email / Phone / SMS / Location / vCard — default url

—

URL

String

https://framer.com

conditional

Text

String

Hello from Framer

conditional

Network

String

MyNetwork

conditional

Password

String

—

conditional

Security

Enum

WPA/WPA2 / WEP / None — default WPA

conditional

Hidden

Boolean

false

conditional

To

String

hello@example.com

conditional

Subject

String

—

conditional

Body

String

—

conditional

Number

String

+1234567890

conditional

Number

String

+1234567890

conditional

Message

String

—

conditional

Latitude

Number

37.7749

conditional

Longitude

Number

-122.4194

conditional

First Name

String

Jane

conditional

Last Name

String

Doe

conditional

Company

String

—

conditional

Job Title

String

—

conditional

Phone

String

—

conditional

Email

String

—

conditional

Website

String

—

conditional

Address

String

—

conditional

Color

Color

#111111

—

Gradient

Boolean

false

—

Color 2

Color

#6C47FF

conditional

Angle

Number

45

0–360° · conditional

Background

Color

#FFFFFF

conditional

Transparent

Boolean

false

—

Module Style

Enum

Square / Rounded / Dots — default square

—

Roundness

Number

.35

0–.5 · conditional

Error Correction

Enum

7% / 15% / 25% / 30% — default M

—

Quiet Zone

Number

2

0–10

Logo

ResponsiveImage

—

—

Logo Size

Number

22

8–35% · conditional

Logo Padding

Number

1.5

0–6 · conditional

Logo BG

Color

#FFFFFF

conditional

Logo Radius

Number

2

0–12 · conditional

Download Button

Boolean

true

—

Format

Enum

PNG / SVG — default png

conditional

PNG Size

Number

8

4–16 · conditional

Button Label

String

Download

conditional

Working through the panel

Type is a mode switch

Forty-two controls, but Type hides most of them. Pick one of the eight and only its fields appear.

URL and Text are what you'd expect. But the others encode structured data that phones understand natively.

Wi-Fi takes a network name, a password and a security type — scanning it joins the network, no typing. Email takes a recipient, subject and body. Phone and SMS dial or open a message. Location takes coordinates and opens a map.

And vCard is the whole contact card: name, company, job title, phone, email, website and address. Scanning it offers to save you as a contact.

That's the reason to use this rather than pasting a link — most people only ever make URL codes and miss the rest.

Styling the code

Color is the code itself, and Gradient adds a second colour with an angle. Background can be set or made Transparent, which is how you place a code over a photograph.

Module Style is square, rounded or dots — the shape of each cell. Rounded reveals a Roundness control.

Now the one that matters. Error Correction has four levels, from seven percent up to thirty. It's how much of the code can be obscured while still scanning.

Raise it before you add a logo. That's what makes the middle of a code coverable — the redundancy is doing the work, not luck.

And Quiet Zone is the empty margin. Don't reduce it to nothing. Scanners need that border to find the code at all.

Logo and download

Logo places your mark in the centre, with size, padding, a background and a radius behind it.

Keep the size modest and raise the error correction to match. A large logo on a low correction level produces a code that scans in your test and fails on someone else's phone in bad light.

Download Button lets visitors save it, with a Format — PNG or SVG — a PNG size, and a button label.

Offer SVG when the code is for print. A QR code is pure geometry, and a vector version scales to a poster without softening.

Good to know

No setup or coding required. Responsive across desktop, tablet, and mobile.

Refund policy — due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: hi@alicorak.com

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.