Advanced QR Code Generator with Custom Logos, Shapes, and Styles
QR Code Generator is a modern, feature-rich web application built with Next.js that allows you to create customized QR codes with advanced styling options, custom logos, and multiple error correction levels. Perfect for marketing campaigns, product packaging, and digital content sharing.
Built by: Kawdhitha Nirmal | CodeXDeveloper
- ✨ Real-time QR Code Generation - Instant preview as you customize
- 🎨 Custom Styling - Choose from multiple dot shapes and corner styles
- 🖼️ Logo Support - Add custom logos to the center of QR codes
- 🎯 Error Correction Levels - Easy, Medium, and Hard (default: Easy)
- 📱 Responsive Design - Works seamlessly on desktop and mobile
- 🌐 Glassmorphism UI - Modern, elegant interface with liquid glass effects
- Dot Shapes: Square, Circle, Rounded, Diamond
- Corner Styles: Square, Rounded, Circle
- Color Control: Custom QR code and background colors
- Size Options: Adjustable QR code dimensions
- Logo Sizing: Control logo proportion in QR code
- 🚀 RESTful API - Generate QR codes programmatically
- 📊 Multiple Formats - Support for URLs, emails, phone numbers, WiFi
- 🔗 Shareable Links - Generate and share QR code configurations
- 📥 Logo Upload - Add logos via URL parameter
- 💾 Direct Image Output - Returns PNG images directly
- Enter Content: Type or paste your URL, email, phone number, or text
- Customize: Select dot shapes, corner styles, colors, and error level
- Add Logo (Optional): Upload a logo to display in the center
- Generate: Click "Generate QR Code"
- Download: Save the QR code as PNG
- Share: Copy the shareable link to recreate the same QR code
curl "https://qr.kawwa.site/api/generate-qr?data=Hello%20World"
curl "https://qr.kawwa.site/api/generate-qr?data=https://example.com"
curl "https://qr.kawwa.site/api/generate-qr?data=https://example.com&logo=https://example.com/logo.png"
curl "https://qr.kawwa.site/api/generate-qr?data=text&errorLevel=easy"
curl "https://qr.kawwa.site/api/generate-qr?data=text&errorLevel=medium"
curl "https://qr.kawwa.site/api/generate-qr?data=text&errorLevel=hard"
curl "https://qr.kawwa.site/api/generate-qr?data=text&dotShape=circle&cornerShape=rounded"
curl "https://qr.kawwa.site/api/generate-qr?data=https://example.com&logo=https://example.com/logo.png&errorLevel=medium&dotShape=circle&cornerShape=rounded"
GET /api/generate-qr
POST /api/generate-qr
| Parameter | Type | Default | Description |
|---|---|---|---|
data |
string | required | Content to encode (URL, email, phone, text) |
logo |
string | optional | URL to logo image to overlay on QR code |
errorLevel |
string | easy |
Error correction level: easy, medium, hard |
dotShape |
string | square |
QR dot shape: square, circle, rounded, diamond |
cornerShape |
string | square |
Corner marker shape: square, rounded, circle |
size |
number | 300 |
QR code size in pixels (100-1000) |
margin |
number | 10 |
Margin around QR code in pixels |
darkColor |
string | #000000 |
QR code color (hex format) |
lightColor |
string | #ffffff |
Background color (hex format) |
- Content-Type:
image/png - Body: PNG image of the generated QR code
| Level | Recovery | Use Case |
|---|---|---|
| Easy | ~7% | General use, clean environments |
| Medium | ~15% | Standard use, some potential damage |
| Hard | ~30% | Harsh environments, high durability needed |
#javascript // Generate QR code
const qrUrl = 'https://qr.kawwa.site/api/generate-qr?data=https://example.com&errorLevel=medium';
// Display in image tag const img = document.createElement('img'); img.src = qrUrl; document.body.appendChild(img);
// Download QR code const link = document.createElement('a'); link.href = qrUrl; link.download = 'qrcode.png'; link.click(); ```
curl "https://qr.kawwa.site/api/generate-qr?data=https://example.com" -o qrcode.png
curl "https://qr.kawwa.site/api/generate-qr?data=https://example.com&logo=https://example.com/logo.png" -o qrcode-with-logo.png
python
import requests
from PIL import Image
from io import BytesIO
# Generate QR code
url = 'https://qr.kawwa.site/api/generate-qr'
params = {
'data': 'https://example.com',
'errorLevel': 'medium',
'dotShape': 'circle'
}
response = requests.get(url, params=params)
img = Image.open(BytesIO(response.content))
img.save('qrcode.png')
After generating a QR code, you can share the configuration using the shareable link format:
https://qr.kawwa.site?data=https://example.com&errorLevel=medium&dotShape=circle
This link will recreate the exact same QR code when opened in the application.
- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS v4, Glassmorphism effects
- QR Generation: qrcode library
- Image Processing: Sharp
- UI Components: Radix UI, shadcn/ui
- Deployment: Vercel
qr-code-generator/
├── app/
│ ├── api/
│ │ └── generate-qr/
│ │ └── route.ts # QR generation API endpoint
│ ├── docs/
│ │ └── page.tsx # API documentation page
│ ├── layout.tsx # Root layout with meta tags
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/
│ ├── qr-generator.tsx # Main QR generator component
│ └── ui/ # shadcn/ui components
├── public/
│ ├── favicon.ico # Favicon
│ └── qr-dot-shapes/ # QR dot shape examples
├── lib/
│ └── utils.ts # Utility functions
├── package.json
├── tsconfig.json
└── README.md
Choose from 4 different dot shape styles:
- Square: Classic QR code appearance
- Circle: Modern, rounded dots
- Rounded: Slightly rounded square dots
- Diamond: Diamond-shaped dots for unique look
Customize the position markers (corners) of your QR code:
- Square: Traditional square corners
- Rounded: Rounded square corners
- Circle: Circular corner markers
QR codes can recover from damage:
- Easy (7%): Suitable for clean, protected environments
- Medium (15%): Standard choice for most applications
- Hard (30%): For outdoor or high-wear environments
This project is open source and available under the MIT License.
For support, questions, or feedback:
- WhatsApp Channel: Join our community
- GitHub Issues: Report bugs or request features
- Email: codexsldev@gmail.com
Kawdhitha Nirmal | CodeXDeveloper
QR Code Studio • Build with ❤️ by Kawdhitha Nirmal
