dotcraft
Styled QR code editor in the browser, usable without an account.
- Goal
- Create polished QR codes and keep them without signing up: the library lives in the browser (localStorage and IndexedDB), and an optional free account syncs it across your devices.
- Result
- Live at dotcraft.fr, usable without an account, with optional sync across devices.
- Tech stack
- ReactTypeScriptViteDjangoDRFPostgreSQL
dotcraft is a React / TypeScript web app that generates QR codes right in the browser. Without an account, the library is saved locally (localStorage and IndexedDB) and can be exported to a file; with a free account, it is backed up and synced across your devices through a Django / DRF API. QR code rendering stays fully client-side.
The context
It started with a simple need: a clean QR code with my logo in the center. The online generators I found were covered in ads, asked for an account before you could download or keep your codes, and often produced a raw QR code with no styling options. For a tool that can do everything in the browser, that left a lot of uncertainty about what happens to your data.
What I built
You start from a URL or some text, then shape the result. Modules can be square, rounded, circles or dots; the three corner markers can be square, rounded, circular or droplet-shaped, with one corner pointing toward the center of the code. You pick the colors and the margin, and can add a logo (PNG, JPG or SVG) with its own background, padding and rounded corners. When a logo is present, error correction switches to the highest level so the code stays scannable.
Export goes to PNG (512, 1024 or 2048 pixels) or self-contained SVG. QR codes are organized into projects and subfolders and saved locally, in the browser’s localStorage and IndexedDB. So you’re not tied to one browser, the library can be exported to a file and imported somewhere else. An account stays optional: with a free account, the library is backed up and synced across your devices automatically, and a forgotten password can be reset by email.
The stack and why
The very first version was a Python command-line script, my reflex as a backend developer. It worked, but a QR code is a visual object: changing a color or a shape by re-running a command was far too slow. So I moved to the web with Vite, React and TypeScript, and Claude Code helped me turn the script into a real editor in a single afternoon.
The QR code is generated from its raw matrix and then drawn as SVG right in the page. That custom rendering gives full control over the corner markers, including the droplet, and a clean export. Account sync relies on a Django / Django REST Framework API and a PostgreSQL database; on Vercel, a single project serves the editor at the root and the API under /api.
Where it stands
The tool is live at dotcraft.fr and hosted on Vercel. The code is open source on GitHub, with a README that explains the architecture: anyone can check what the tool does, draw on it or contribute.