Skip to main content

Client-Side Architecture

Atomix QRGen is built with privacy as a core principle. All QR code generation happens entirely in your browser - no servers, no databases, no data transmission.

100% Client-Side

All processing happens in your browser using JavaScript

No Backend

No servers receive or store your data

No Tracking

No analytics, cookies, or user tracking

No Storage

Data is never saved to disk or cloud

How It Works

1

Static Site Delivery

When you visit Atomix QRGen, you download a static HTML/CSS/JavaScript bundle built with Astro. This is the only network request made to load the application.
2

Local Processing

All form data you enter is processed locally in your browser using Preact components. The data never leaves your device.
// State is managed locally in the browser
const [type, setType] = useState<QrTypeKey | null>(null);
const [data, setData] = useState<QrDataUnion | null>(null);
Reference: src/components/qr-code-app/app/qr-gen-app.tsx:8-9
3

Client-Side Encoding

Your data is encoded into QR format using local encoding functions. For example, WiFi credentials are formatted client-side:
const encodeWifi = (data: WifiQrData) => {
  const password = data.security === "nopass" ? "" : data.password.trim();
  return `WIFI:T:${data.security};S:${data.ssid.trim()};P:${password};;`;
};
Reference: src/domain/encoders/encoders.ts:25-28
4

Local QR Generation

The qr-code-styling library generates the QR code image directly in your browser:
qr.current = new QRCodeStyling({
  width: 280,
  height: 280,
  data: "",
  dotsOptions: { type: "rounded", color: "#000" },
  backgroundOptions: { color: "#ffffff" },
});
Reference: src/components/qr-code-app/cards/qr-preview/card-qr-preview.tsx:27-33
5

Client-Side Download

Downloads are triggered using the browser’s native download API. The file is created and saved directly from browser memory:
await qr.current.download({
  name: fileName,
  extension: format,
});
Reference: src/components/qr-code-app/cards/qr-preview/card-qr-preview.tsx:98-101
The entire application runs on your device. Even your browser’s Developer Tools Network tab will show zero network requests after the initial page load.

Privacy Features

No Data Transmission

Unlike many online QR generators that send your data to a server for processing, Atomix QRGen processes everything locally:
export const encodeQrData = (
  type: QrTypeKey,
  data:
    | TextQrData
    | UrlQrData
    | WifiQrData
    | VCardQrData
    | PaymentQrData
    | EventQrData,
) => {
  switch (type) {
    case QrTypeKey.PlainText:
      return encodeText(data as TextQrData);
    case QrTypeKey.Url:
      return encodeUrl(data as UrlQrData);
    case QrTypeKey.Wifi:
      return encodeWifi(data as WifiQrData);
    case QrTypeKey.VCard:
      return encodeVCard(data as VCardQrData);
    case QrTypeKey.Payment:
      return encodePayment(data as PaymentQrData);
    case QrTypeKey.Event:
      return encodeEvent(data as EventQrData);
    default:
      return "";
  }
};
Reference: src/domain/encoders/encoders.ts:99-125 All encoding logic is pure TypeScript functions that run in your browser.

No Analytics or Tracking

The application includes:
  • No Google Analytics
  • No Facebook Pixel
  • No third-party tracking scripts
  • No cookies (except essential browser session cookies)
  • No fingerprinting
  • No usage telemetry
While Atomix QRGen itself doesn’t track you, the hosting provider (if using a hosted version) may have basic server logs. For maximum privacy, consider self-hosting or running the application locally.

No Local Storage

The application does not store any data in:
  • localStorage
  • sessionStorage
  • IndexedDB
  • Browser cookies
  • Service workers
When you refresh the page, all form data is cleared. This is intentional for privacy.

Validation Without Transmission

All form validation happens locally before QR generation:
export const validateWifiQr = (data: WifiQrData): ValidationResult => {
  const errors: Record<string, string> = {};

  if (!data.ssid || data.ssid.trim() === "") {
    errors.ssid = "El SSID es obligatorio";
  } else if (data.ssid.trim().length > 32) {
    errors.ssid = "El SSID no puede tener más de 32 caracteres";
  }

  if (data.security !== "nopass") {
    if (!data.password || data.password.trim() === "") {
      errors.password = "La contraseña es obligatoria para redes con seguridad";
    } else if (data.security === "WPA" && data.password.length < 8) {
      errors.password = "La contraseña WPA/WPA2 debe tener al menos 8 caracteres";
    }
  }

  return {
    isValid: Object.keys(errors).length === 0,
    errors,
  };
};
Reference: src/domain/validation/validators.ts:71-96 Validation ensures data quality without ever sending it to a server.

Security Benefits

Protection of Sensitive Information

Atomix QRGen is perfect for generating QR codes containing sensitive data:

WiFi Passwords

Generate WiFi QR codes without exposing your password to third parties

Payment Details

Create payment QR codes without sharing account numbers with servers

Contact Information

Generate vCard QR codes without uploading your contact details

Private URLs

Create QR codes for internal/private URLs without logging them
Since all processing is client-side, you can safely use Atomix QRGen for:
  • Corporate WiFi credentials
  • Banking payment information
  • Personal contact details
  • Private event invitations
  • Confidential URLs

No Server Vulnerabilities

Because there’s no backend:
  • No database to be breached
  • No server logs containing your data
  • No API endpoints to be exploited
  • No risk of data retention policies
  • No third-party data processors

Open Source Transparency

The entire source code is available on GitHub, allowing you to:
  • Verify there are no hidden data collection
  • Audit the privacy claims
  • Self-host for complete control
  • Modify and customize as needed

Technology Stack

The privacy-focused architecture is enabled by these technologies:
{
  "dependencies": {
    "@astrojs/preact": "^4.1.3",
    "astro": "^5.17.1",
    "preact": "^10.28.3",
    "qr-code-styling": "^1.9.2",
    "tailwindcss": "^4.1.18"
  }
}
Reference: package.json:31-37
  • Astro: Static site generator that pre-renders everything at build time
  • Preact: Lightweight React alternative for interactive UI (runs in browser)
  • qr-code-styling: Pure JavaScript QR generation library
  • Tailwind CSS: CSS framework with no runtime JavaScript
All dependencies are client-side libraries. There are zero server-side dependencies or runtime requirements.

Self-Hosting for Maximum Privacy

For ultimate privacy control, you can self-host Atomix QRGen:
1

Clone the Repository

git clone https://github.com/Ephistopheles/atomix-qrgen.git
cd atomix-qrgen
2

Install Dependencies

npm install
3

Build for Production

npm run build
This creates a dist/ folder with static files.
4

Host Locally or Deploy

You can:
  • Serve locally: npm run preview
  • Deploy to any static host (Netlify, Vercel, GitHub Pages)
  • Run from file:// - no server needed!
  • Host on your internal network
Since Atomix QRGen is entirely static, you can even open dist/index.html directly in your browser without any web server. Perfect for offline use!

Offline Usage

Once loaded, Atomix QRGen works completely offline:
  1. Visit the site once while online to cache the assets
  2. Disconnect from the internet
  3. Continue generating QR codes
This is possible because:
  • All code is delivered on first load
  • No API calls are made during usage
  • No external resources are fetched
  • All libraries are bundled
Offline usage requires the page to remain open. Refreshing will require internet to reload the assets (unless you’ve self-hosted or created a PWA version).

Comparison with Server-Based Generators

FeatureAtomix QRGenTypical Server-Based
Data TransmissionNoneAll data sent to server
Server LogsNo logsData may be logged
Data StorageNever storedOften stored temporarily or permanently
Privacy PolicyNot neededRequired (GDPR, etc.)
Third PartiesNoneMay use analytics, CDNs, etc.
Offline WorkYes (after first load)No
Self-HostingEasy (static files)Complex (requires backend)
Audit TransparencyFull (open source)Limited

Privacy FAQ

No. There is no mechanism for data to be transmitted to anyone. All processing happens exclusively in your browser.
No. The application does not use localStorage, sessionStorage, cookies, or any form of persistent storage. When you refresh the page, all data is gone.
Yes! Once the initial page is loaded, you can disconnect from the internet and continue generating QR codes. All the necessary code is already in your browser.
Absolutely. The source code is open source and available at github.com/Ephistopheles/atomix-qrgen. You can:
  • Review the code yourself
  • Check your browser’s Network tab (no requests after page load)
  • Inspect localStorage/cookies (nothing stored)
  • Build and host it yourself
If using a hosted version, the hosting provider may have basic server logs (IP address, user agent, timestamp) from the initial page load. For zero logging, self-host the application or run it locally.
No. All dependencies are bundled during the build process. There are no external CDNs, fonts, or scripts loaded from third-party servers.

Best Practices for Privacy

1

Use HTTPS

Always access Atomix QRGen over HTTPS to prevent man-in-the-middle attacks during the initial page load.
2

Verify the Domain

Make sure you’re on the official domain or your own self-hosted instance. Check the URL carefully.
3

Self-Host for Sensitive Data

For highly sensitive data, consider self-hosting on your own infrastructure or running locally.
4

Check Browser Extensions

Some browser extensions may capture form data. Use a clean browser profile for maximum privacy.
5

Clear Downloads

Remember to securely delete downloaded QR codes if they contain sensitive information you no longer need.

Build docs developers (and LLMs) love