A QR code is just a URL or a short piece of text laid out as a grid of dark and light squares, so a browser can create one without any server at all. Generating, scanning and customising all happen locally if the page uses a drawing library or the browser's built-in barcode detector. UsefulCrate does not currently ship a QR tool, so this guide explains how the format works, how to do each job in a tab, and which of the surrounding steps — cleaning a URL, encoding it, keeping the text tidy — you can do here today.
What is actually inside a QR code
A QR symbol encodes a byte sequence, not a link. When a phone scans a code containing https://example.com/menu?utm_source=poster, the camera finds the three large finder squares in the corners, works out the grid's orientation and size, reads the modules, applies error correction, and hands the resulting string to the operating system. The phone then decides whether that string is a URL, a Wi-Fi credential, a contact card or plain text.
| Part | What it does | Why you care |
|---|---|---|
| Finder patterns | Three corner squares for orientation | Keep a clear quiet zone around them |
| Data modules | The encoded bytes | Longer content means a denser grid |
| Error correction | Redundant blocks | Allows a logo or slight damage |
| Quiet zone | Empty margin around the symbol | Without it, scanners often fail |
The practical consequence: the shorter the content, the larger and cleaner the squares, and the more reliably the code scans from a distance. A 20-character URL produces a forgiving symbol. A 600-character tracking link produces a dense one that fails on a crumpled flyer or a low-resolution print.
Generate one locally
Creating a QR code is deterministic: the same text and the same error-correction level always produce the same grid. A small JavaScript library can compute it and draw on a canvas in milliseconds, with no account and no upload. If you are building this into your own page, the steps are:
- Normalise the payload. Trim whitespace, decide on a canonical URL, and percent-encode any characters that are not safe in a query string. The URL Encoder can encode either a single component or a whole URL while keeping its separators intact.
- Pick an error-correction level. Level M is the everyday default; Q or H adds redundancy, which lets you place a small logo in the centre or survive a scratched print, at the cost of a denser grid.
- Draw at a sensible size. Render to a canvas at a multiple of the module count so squares stay crisp, then export as PNG or SVG. SVG is better for print because it scales without blurring.
- Keep a quiet zone. Leave at least four modules of empty space on every side. This is the single most common reason a printed code will not scan.
If a value has to be carried through a system that only accepts ASCII, the Base64 Encoder is useful — but note that Base64 makes the string roughly a third longer, so it is a poor choice for a QR payload unless you have no alternative. A short URL is nearly always better.
Scan one locally
Modern browsers increasingly expose a BarcodeDetector API that can read a QR code from an image or a camera stream directly on the device. Where it is available, a page can decode a symbol without uploading the picture. Where it is not, a WebAssembly barcode library running in the tab does the same job with a slightly larger download.
The privacy difference is easy to check. Open developer tools, go to the Network panel, and decode a test image. A local scanner shows no POST containing the image. A service that uploads the photo to recognise it will show one. For a code printed on a document containing personal details, that distinction is worth thirty seconds of verification.
Customise without breaking it
Colour, rounded modules and a centred logo are all popular, and all of them reduce the margin a scanner has to work with. Three rules keep a customised code reliable:
- Keep high contrast. Dark modules on a light background. A pale grey on white may look elegant on screen and fail completely under office lighting.
- Never invert the whole symbol. Light modules on a dark background are outside what many scanners expect, especially older ones.
- Keep a logo small. A central image covering more than roughly a tenth of the area eats into the error-correction budget. Raise the correction level before adding one, then test with several phones.
Always test the final artwork at the size it will be printed, on the actual paper, with at least two different phones. A code that scans perfectly as a 600-pixel PNG on a monitor can fail as a 20-millimetre square in a newsletter.
Shorten the payload first
Tracking parameters are the usual culprit behind a dense, fragile code. A link carrying utm_source, utm_medium, utm_campaign, a session identifier and a redirect target can be several hundred characters long. Before generating the symbol, use the URL Parser to see every query parameter in decoded form, keep the ones you actually need for measurement, and drop the rest. A short redirect on your own domain is even better: it keeps the printed code small and lets you change the destination later without reprinting.
For lists of links printed on a set of labels or posters, the Text Cleaner removes duplicates, blank lines and stray whitespace before anything is encoded, so you do not discover a trailing space after the batch has been printed.
Static versus dynamic codes
A static code encodes the final destination directly. It works forever with no service behind it, but it cannot be changed once printed. A dynamic code encodes a short redirect that you control, so the destination can be edited, and scans can be counted. The trade-off is that a dynamic code depends on a server staying online, and the redirect service sees every scan.
For a Wi-Fi password on a fridge note or a contact card on a badge, static is the clear choice. For a campaign poster where you need to fix a typo after 5,000 copies have shipped, dynamic earns its dependency. Whichever you choose, keep a plain-text record of the exact payload so the code can be regenerated.
Security: a code is not a guarantee
A QR code is an opaque instruction. A scan can open a phishing page, prompt a payment, join a network or add a contact, and the printed symbol gives you no way to tell which. Phones usually show the decoded URL before opening it, so check that preview. On printed material, add a readable human destination next to the code — people who can see where it goes are far less likely to be tricked, and it gives a fallback when a camera will not focus.
Common questions
Does UsefulCrate have a QR generator?
Not at the moment. The tools here cover the steps around it: preparing and encoding a URL, decoding a value, and cleaning a list of links. The grid itself needs a QR library in the page, and we would rather say so than offer a button that quietly sends your text to a server.
Can I read a QR code without installing an app?
Usually yes. Most phone cameras recognise QR codes natively, and browsers with BarcodeDetector support can read one from an image in the tab. If a website asks you to upload a photo to decode it, check the Network panel before trusting it with a document.
Why will my printed code not scan?
The four usual causes, in order: no quiet zone, low contrast, the symbol is printed too small for its data density, or the payload contains an unencoded special character. Shorten the URL, raise the error-correction level, print larger, and keep four modules of empty margin.
Tools on this site
URL Encoder prepares a value that is safe to put in a QR payload. URL Parser shows every tracking parameter so you can shorten the link. Text Cleaner tidies a batch of links before a print run.