DEV Community

AI Maker
AI Maker

Posted on

Building QRify: a free artistic QR code generator that runs 100% in the browser

I kept hitting the same wall with QR tools: they either upload your data to a server, spit out an ugly black-and-white square, or hide the good features behind a paywall. So I built QRify — a free, fully client-side artistic QR code generator.

What it does

  • Custom foreground/background colors and linear gradients
  • Embed a center logo
  • Export to PNG or SVG (vector = crisp at any size)
  • 100% in-browser: your URLs never leave the device, no account, no tracking
  • Lightweight (90KB first load) so it is fast on mobile

How it works

It is a Next.js 14 (App Router) + TypeScript app. QR rendering uses qr-code-styling loaded dynamically with await import so it never breaks SSR. The whole thing is static — no backend — which makes it trivial to host on Vercel and monetize with AdSense.

A few things I learned the hard way:

  1. AdSense ownership verification fails if you inject the script with next/script (afterInteractive) because the crawler does not run JS. You must put the <script async src="...adsbygoogle.js?client=..."> plus <meta name="google-adsense-account"> directly in <head>.
  2. Low-value-content warnings from AdSense are real — a single-page tool with no text gets flagged. Adding ~1200 words of genuine how-to content fixed it.
  3. Structured data (WebApplication + FAQPage JSON-LD) plus a dynamic sitemap.ts gives richer search results.

Try it

👉 https://qrify-ebon.vercel.app

It is free, no signup. Feedback and feature requests welcome.

Top comments (0)