✨ Why QRGen?

Say goodbye to cluttered, ad-ridden QR code generators. QRGen is built with one mission: to provide a free, simple, and elegant solution for creating QR codes—without distractions.

✅

100% Free — No hidden fees, no premium tiers

🚫

Zero Ads — Clean, distraction-free experience

⚡

Instant Generation — Real-time QR code preview

🎨

Fully Customizable — Colors, styles, and logo embedding

📱

Mobile-First — Perfect experience on any device

🔒

Privacy-Focused — No data stored, no tracking

🎯 Features

Core Functionality

• 🔗 URL QR Codes — Convert any URL into a scannable QR code instantly
• 📥 High-Quality Downloads — Export as PNG with no watermarks
• 👁️ Live Preview — See changes in real-time as you type

Customization Options

• 🎨 Color Schemes — Customize QR code colors to match your brand
• 📐 Corner Styles — Choose from square, rounded, or extra-rounded corners
• ✨ Dot Patterns — Multiple dot style options (square, rounded, dots, etc.)
• 🖼️ Logo Embedding — Add your logo or image to the center of the QR code
• 😊 Emoji Support — Embed emojis in your QR codes
• 📱 Social Icons — Pre-built social media brand icons

User Experience

• 🌙 Dark Mode — Elegant dark theme that's easy on the eyes
• 💨 Glassmorphism — Modern frosted glass visual effects
• 📱 Responsive Design — Seamless experience from mobile to desktop
• ⚡ Blazing Fast — Built with Vite for optimal performance

🛠️ Tech Stack

Vue 3 UI Framework

Vite Build Tool

TypeScript Type Safety

Tailwind Styling

DaisyUI Components

Key Dependencies

• qr-code-styling — Advanced QR code generation with styling options
• vue-advanced-cropper — Image cropping for logo uploads
• lucide-vue-next — Beautiful open-source icons
• @vueuse/core — Essential Vue composition utilities

📁 Project Structure

qrgen/ ├── 📂 public/ │ ├── 📂 branding/ # Logo and branding assets │ ├── 📂 icons/ # App icons for PWA │ ├── 📄 manifest.json # PWA manifest │ └── 📄 robots.txt # SEO configuration ├── 📂 src/ │ ├── 📂 assets/ # Static assets │ ├── 📂 components/ │ │ ├── 📂 common/ # Reusable UI components │ │ ├── 📂 icons/ # Icon components │ │ └── 📂 qr/ # QR-specific components │ ├── 📂 composables/ # Vue composables │ ├── 📂 types/ # TypeScript type definitions │ ├── 📄 App.vue # Root component │ ├── 📄 main.ts # Application entry point │ └── 📄 style.css # Global styles ├── 📂 docs/ # Documentation ├── 📄 index.html # HTML entry point ├── 📄 package.json # Dependencies and scripts ├── 📄 vite.config.ts # Vite configuration └── 📄 vercel.json # Vercel deployment config

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

How to Contribute

1. Fork the Project

git fork https://github.com/Korak-997/qrgen.git

1. Create your Feature Branch

git checkout -b feature/AmazingFeature

1. Commit your Changes

git commit -m 'Add some AmazingFeature'

1. Push to the Branch

git push origin feature/AmazingFeature

1. Open a Pull Request