Free, open-source, client-side QR code generator. No ads. No tracking pixels. No redirects. Everything happens in your browser.
Search phrases this project intentionally supports: free QR code generator, WiFi QR code, vCard QR code, SMS QR code, custom QR code with logo, gradient QR code, QR code without tracking.
- Multiple content types: URL, WiFi network (WPA/WEP/open + hidden), vCard contact, SMS (number + optional message)
- Advanced styling: dot/module shapes, corner styles, solid or linear/radial gradient foregrounds
- Real-time scan quality assessment (contrast, logo risk, quiet zone) with one-click Auto-Fix
- Logo upload + crop (processed locally, never uploaded) with keyboard accessible cropper
- Debounced & reliable exports (flush logic ensures latest QR when you download)
- PNG & SVG export (crisp vector for print; raster for quick sharing)
- Dark / light mode (auto system detection) + accessible color controls
- Fully client-side (no server, no analytics); ideal for privacy-centric environments
- Responsive & keyboard accessible UI
- MIT licensed and easy to fork / self-host (Cloudflare Pages ready)
- Pick a content type (URL, WiFi, vCard, SMS) and fill in the fields.
- (Optional) Upload a logo, crop it, and adjust size.
- Tune styling (colors, shapes, gradient, error correction, margin).
- Watch the scan quality panel; use Auto-Fix if recommendations appear.
- Export as PNG (general sharing) or SVG (print / design tools).
Security & privacy. Your WiFi password, contact details, phone numbers, and logos never leave the browser context. Open DevTools Network tab—you'll see no data posts.
The app evaluates:
- Contrast ratio between foreground/background
- Logo risk (size vs error correction level)
- Quiet zone (margin) sufficiency
If issues are detected, Auto-Fix can:
- Force high contrast (black on white)
- Shrink an oversized logo
- Raise error correction (up to H)
- Ensure a minimal margin
- Higher error correction (Q/H) tolerates bigger logos but increases density.
- Maintain strong contrast (dark foreground on light background) for best reliability.
- Excessive gradients or very light colors can reduce scan speed—test with multiple devices.
- Fancy dot shapes are cosmetic; readability still depends on contrast and quiet zone.
| Use Case | Recommended |
|---|---|
| Print, design tools, size scaling | SVG |
| Quick share, chat apps, previews | PNG |
SVG exports are text (XML) and infinitely scalable. PNG exports are raster; choose a larger size if you expect downscaling.
- React + TypeScript + Vite
- Material UI (MUI) for theming
qr-code-stylingfor QR generation & advanced styling/gradientszodfor lightweight validation- Vitest + React Testing Library for a growing test suite (29 tests covering builders, styling, debounce flush, auto‑fix)
npm install
npm run dev
Visit http://localhost:5173
npm run build
Outputs to dist/.
Cloudflare Pages settings:
- Build command:
npm run build - Output directory:
dist - (Optional) Set security headers via _headers file / Pages config.
- Keyboard navigable logo cropper (arrow keys move/resize)
- Sufficient color contrast guidance
- ARIA labels and semantic structure for assistive tech
- No outbound API calls for QR generation
- No analytics, tracking, or cookies
- All image processing & QR rendering performed in-browser
- Open source—inspect or fork freely
Shipped from earlier roadmap: WiFi, vCard, SMS content types, gradient styling, auto-fix, accessibility improvements.
Potential next steps:
- Shareable config via URL hash
- Local recent history / favorites
- PWA (offline support + installable)
- Drag-and-drop SVG logo recoloring
- Bulk generation (CSV import) – maybe separate tool
- Configurable gradient stops beyond two colors
Issues and PRs welcome. Please add or update tests for user‑visible changes.
MIT License – see LICENSE.
If this project helps you, consider giving it a ⭐ so others can find a privacy-first QR code generator.