A powerful, customizable JavaScript QR code generator built with HTML, CSS, and vanilla JavaScript. Create stunning QR codes with custom styles, colors, and embedded images. Features a bookmark system to save and manage your QR codes. Perfect for developers, marketers, and anyone needing beautiful, shareable QR codes.
- Customizable QR Codes : Choose from 6 different dot styles (Square, Rounded, Classy, Pointillism, and more)
- Color Customization : Personalize dot colors to match your brand or preferences
- Image Embedding : Add logos or images to the center of your QR codes
- Flexible Sizing : Adjust width and height for any use case
- Multiple Export Formats : Download as PNG, JPG, SVG, or WEBP
- Bookmark System : Save and manage your favorite QR codes locally
- Responsive Design : Works seamlessly across desktops, tablets, and mobile devices
- Lightweight & Fast : Built with vanilla JavaScript for optimal performance
- Open Source : Fork, contribute, or customize to suit your needs!
Try the live app here 🚀
- Clone the repository:
git clone https://github.com/NickFrost2/JSPlayz.git
- Navigate to the project directory:
cd JSPlayz/advanced/QR_Code - Open
index.htmlin a browser to run the app locally, or serve it using a local server (e.g., with VS Code's Live Server extension).
- Enter Text : Type or paste the text/URL you want to encode in the text area
- Add Image (Optional): Upload a logo or image to embed in the QR code center
- Customize Style :
- Choose from 6 dot styles in the "Dots Options" section
- Select a custom dot color using the color picker
- Adjust Size : Set custom width and height dimensions
- Download : Click "Download" and select your preferred format (PNG, JPG, SVG, or WEBP)
- Click the bookmark folder icon to open the sidebar
- Save frequently used QR codes for quick access
- Browse and reuse saved QR code configurations
QR_Code/
├── index.html # Main HTML file for the QR generator
├── style.css # Styling for the app, including responsive design
├── script.js # JavaScript logic for QR generation and bookmarks
├── README.md # Project documentation (this file)
The generator offers 6 unique dot styles:
- Square - Classic, clean QR code appearance
- Rounded - Smooth rounded corners for a modern look
- Classy - Elegant style with refined edges
- Pointillism - Artistic dots-based rendering
- Classy & Rounded - Combination of elegance and smooth curves
- Extra Rounded - Maximum roundness for a soft, friendly appearance
- Vanilla JavaScript (ES6+) - Core functionality and DOM manipulation
- HTML5 - Semantic markup and structure
- CSS3 - Modern styling with flexbox and responsive design
- QR Code Styling Library - Powerful QR code generation engine
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a new branch (
git checkout -b feature/your-feature) - Make your changes and commit (
git commit -m "Add your feature") - Push to your branch (
git push origin feature/your-feature) - Open a pull request
See CONTRIBUTING.md for more details.
This project is licensed under the MIT License. See the LICENSE file for details.
- Built with ❤️ as part of the JSPlayz project
- Powered by qr-code-styling by Denys Kozak
- Inspired by the need for beautiful, customizable QR codes for modern web applications
- Marketing : Create branded QR codes for campaigns and promotions
- Business Cards : Add professional QR codes with your logo
- Events : Generate event tickets and registration codes
- Product Packaging : Link to product information and reviews
- Restaurants : Digital menus and contactless ordering
- Education : Share resources and assignment links
Have questions or suggestions? Reach out to Nick Frost or open an issue!
Keywords : QR code generator, JavaScript QR code, customizable QR codes, QR code with logo, web app, responsive design, vanilla JS, HTML5, CSS3, open source, frontend development, bookmark system, multiple formats
Part of the JSPlayz Collection - Check out more JavaScript projects at JSPlayz