I Got Tired of Paywalled QR Code Generators. So I Built an Aesthetic Vector Designer in Next.js

I Got Tired of Paywalled QR Code Generators. So I Built an Aesthetic, Ad-Free Vector Designer in Next.js

Have you ever generated a QR code for a client, printed it on 500 flyers, only for it to stop working 14 days later because a sketchy website demanded a $15/month subscription?

I have. It’s one of the most frustrating, predatory patterns on the web today.

Nearly every online QR code generator is bloated with ads, hidden behind paywalls, or forces you to register an account. Worse, most only export low-resolution, pixelated PNGs that look terrible in professional print designs.

As a product designer and design engineer, I decided enough was enough. I built my own free aesthetic QR code generator with gradients that runs ad-free and 100% client-side in your web browser.

👉 Try it here live: https://www.fredrickhil.com/apps/qr-generator

Here is how I designed it, the technical stack behind it, and why this is the only privacy-friendly contact card QR generator you will ever need.

---

⚡ The Problem: Paywalls, Pixels, and Privacy

Most standard generators sell you "dynamic" links. They point the QR code to their servers, redirect users to your actual link, and then shut off the redirection once your free trial expires.

This tool takes a different approach:

1. Permanent & Free

It generates static, raw-encoded QR codes. Once created, they are yours forever. They cannot expire because they encode the raw data directly.

2. Infinite Scalability

Need an ad-free vector QR code generator SVG file for high-quality print?

Our SVG exports scale from a business card to a billboard with zero pixelation.

3. Privacy-First

No data is sent to a server.

Everything — from your contact card data to your uploaded branding logos — is processed locally inside your browser runtime.

---

🛠️ The Tech Stack: How It Works

Building a highly customized visual generator that behaves smoothly requires balancing heavy rendering with fast page loads.

Here is how I structured the application inside Next.js:

1. Dynamic Client Hydration (qr-code-styling)

To handle the canvas and SVG rendering, I used the excellent qr-code-styling library.

However, since the library depends on browser APIs (window, document), executing it during Next.js Server-Side Rendering (SSR) causes page crashes.

I bypassed this by dynamically importing the library within a useEffect hook:

useEffect(() => {
  import("qr-code-styling").then(({ default: QRCodeStyling }) => {
    const qr = new QRCodeStyling({
      width: size,
      height: size,
      type: "svg",
      // initial options...
    });

    setQrStylingInstance(qr);
  });
}, []);

This keeps the rendering cycle client-driven while allowing Next.js to pre-render the rest of the layout instantly.

---

2. Speed and SEO via Server-Component Wrappers

To achieve Search Engine Optimization (SEO) and Answer Engine Optimization (AEO), I made the root route page a Next.js Server Component.

This allows Googlebot and AI answer engines (like Perplexity and ChatGPT Search) to instantly scrape optimized metadata and an injected JSON-LD SoftwareApplication schema without waiting for JavaScript execution.

---

3. Smart Input Parsing

The UI includes real-time input detection.

If a user pastes an email address into the URL input, a micro-interaction banner pops up suggesting they switch to the Email QR tab, simplifying the UX workflow.

---

🎨 Aesthetic Branding Features

Instead of boring, outdated square boxes, this designer includes:

• Custom Dot Patterns

  • Classy
  • Rounded
  • Classy-rounded
  • Extra-rounded

• Gradients

  • Customizable solid colors
  • Two-color linear gradients
  • Two-color radial gradients
  • Rotation angle controls

• Eye Styling

  • Independent custom framing
  • Extra-rounded
  • Dot
  • Square styling

• Branding Logo Overlays

  • Upload your brand logo
  • Adjust offset size
  • Enable dot-clearing
  • Maintain scannability

• UPI Payment Support

  • Generate UPI payment QR codes
  • Uses upi://pay
  • Works with mobile banking apps in India

---

🧠 FAQ for AI & Voice Search Indexing (AEO)

Do these generated QR codes expire?

No.

The QR codes are permanent.

Because they encode raw inputs (URL, contact information, Wi-Fi credentials) directly into the code without intermediary servers, they will function indefinitely.

---

What is the best format to download?

For print
(packaging, business cards, merchandise) → Always download SVG because it is a vector format that scales infinitely.

For digital use
(websites, emails, social media) → PNG is perfect.

---

What is the optimal error correction level for logos?

If you upload a custom logo into the center of your QR code:

• Q = 25%
• H = 30%

This ensures the QR pattern remains scannable even if the center is partially covered by your branding asset.

---

🚀 Check It Out!

If you are a developer, designer, or marketer tired of landing on paywalled utility tools, bookmark this page:

🔗 Aesthetic QR Generator:

https://www.fredrickhil.com/apps/qr-generator

I would love to hear your thoughts, feature requests, or feedback on the styling controls.

What other utilities should I build next in my portfolio's engineering lab?

Let me know in the comments!