Skip to main content
Atomix QRGen is a web application that runs entirely in your browser. No installation needed - just visit the app and start generating QR codes instantly.
All QR code generation happens client-side in your browser. Your data never leaves your device, ensuring complete privacy.

Generate your first QR code

1

Choose a QR code type

When you open Atomix QRGen, you’ll see six QR code type options:Currently Available:
  • URL - Link to a website
  • Text - Plain text content
  • WiFi - Network credentials
  • vCard - Contact information
Coming Soon:
  • Event - Calendar events (disabled)
  • Payment - Payment requests (disabled)
Click on any available type to get started. For this example, we’ll create a URL QR code.
2

Enter your data

After selecting URL, a form will appear asking for the website URL.Enter any URL (e.g., https://github.com/Ephistopheles/atomix-qrgen). The app automatically adds https:// if you omit it.
The form validates your input in real-time. If there’s an error, you’ll see a message explaining what needs to be fixed.
3

View your QR code

As soon as you enter valid data, the QR code appears instantly in the preview panel on the right.The QR code is generated immediately using the qr-code-styling library - no server roundtrip required!
4

Download or print

Once you’re happy with your QR code, you have two options:
  • Download as PNG - Click the download button to save a 280x280px PNG image
  • Download as SVG - Get a scalable vector version for print or large displays
  • Print - Click the printer icon to print directly
Files are named with a timestamp (e.g., qr-code-1709500000000.png) to avoid overwriting previous downloads.

How it works

Under the hood, Atomix QRGen uses a simple data flow:
// src/components/qr-code-app/app/qr-gen-app.tsx
export default function QrGenApp() {
  const [type, setType] = useState<QrTypeKey | null>(null);
  const [data, setData] = useState<QrDataUnion | null>(null);

  return (
    <>
      <CardQrType selected={type} onSelect={setType} />
      <CardContentInput selectedType={type} onChange={setData} />
      <CardQrPreview type={type} data={data} />
    </>
  );
}
When you select a type and enter data:
  1. Type selection triggers setType(), updating the selected QR type
  2. Form input triggers onChange(), passing validated data to setData()
  3. QR preview receives the type and data, then:
    • Encodes the data using format-specific encoders (e.g., WIFI:T:WPA;S:MyNetwork;P:password;;)
    • Generates the QR code using QRCodeStyling
    • Renders the result on a canvas element
All of this happens instantly in your browser with zero network requests.

More examples

WiFi QR code

Create a QR code for your WiFi network:
  1. Select WiFi type
  2. Enter your network name (SSID): MyHomeWiFi
  3. Choose security type: WPA
  4. Enter password: secretpassword123
  5. The QR code encodes: WIFI:T:WPA;S:MyHomeWiFi;P:secretpassword123;;
Anyone scanning this QR code can connect to your WiFi instantly (on supported devices).

vCard QR code

Share your contact information:
  1. Select vCard type
  2. Enter your first and last name (required)
  3. Optionally add: phone, email, organization, website, address
  4. The QR code generates a vCard 3.0 format:
BEGIN:VCARD
VERSION:3.0
FN:Johan Amed
N:Amed;Johan;;;
TEL;TYPE=CELL:+1234567890
EMAIL:[email protected]
URL:https://github.com/Ephistopheles
END:VCARD
For maximum compatibility, keep vCard data concise. Long addresses or notes can make QR codes harder to scan.

Privacy guarantee

Atomix QRGen’s client-side architecture means:
  • ✅ No data sent to servers
  • ✅ No analytics or tracking
  • ✅ No cookies or local storage of sensitive data
  • ✅ Works offline after initial page load
  • ✅ Open source - verify the code yourself
Read more about Privacy & Security.

Next steps

Installation

Want to run Atomix QRGen locally or contribute? Follow the installation guide

QR types

Learn about all supported QR formats and their data structures

Build docs developers (and LLMs) love