City staff occasionally need QR codes for printed materials, signage, and communications. Everyone rolls their own using whatever free tool they find online — the result is inconsistency in size, error correction level, and branding.
This is a single-page tool that generates standardized QR code PNGs with the official City seal centered in the code. It lives at one URL and takes about ten seconds to use: paste a destination URL, pick a size, download a PNG.
- Single HTML file, no backend. No database, no authentication, no server-side code. Static file that can be hosted anywhere.
- Client-side only. QR generation happens entirely in the browser using canvas. Nothing is sent to a server.
- External dependencies (loaded from CDN):
- Tailwind CSS — styling via CDN with custom config for SF.gov design tokens
- qrcode.js v1.5.1 — QR code generation to canvas
- Google Fonts (Roboto Flex, Roboto Slab)
- City seal is embedded in the file as a base64-encoded PNG (~45KB). Source:
media.api.sf.gov. This avoids CORS issues when hosted cross-origin. - Error correction is locked to High (H). QR codes at this level remain scannable with up to ~30% of the center obscured. The seal overlay covers ~22% of the code area. This setting is not user-configurable to prevent generating unscannable codes.
- URL validation requires
https://orhttp://protocol. - Output sizes: 256px (digital), 512px (print), 1024px (signage).
Drop index.html on any static host. No build step.
First deployment target is AWS Amplify.