Free, open, browser-based generator for fiducial markers. Pick a family, choose a tag ID range and a physical size, and the tool packs as many tags as fit per page — quiet zones, cut margins, and printable boundaries computed correctly. Print-ready PDFs, PNGs, and SVGs are produced in the browser; nothing is uploaded. Currently, AprilTags, ArUco, and CCTags are supported.
Live site: https://hayyazul.github.io/apriltag-generator/
- Multiple families across various markers.
- Recursive / nested tags — embed a smaller tag inside another tag’s center region for multi-scale detection.
- Hexagonal close-packing for circle families (~15% more tags per page than a square grid).
- Per-tag captions, optional back-side labels, optional in-quiet-zone labels, and a calibration sheet.
Requires Node 20 (an .nvmrc is provided; if you use nvm, run
nvm use from the project root).
npm install # one-time, after a fresh clone
npm test # run unit tests once
npm run lint # eslint
npm run build # type-check + production build into dist/npm run devThis starts a development server with hot reload. Open the URL it prints in your browser — by default that is:
http://localhost:5173/apriltag-generator/
The trailing /apriltag-generator/ matters: it matches the GitHub
Pages base path so local URLs behave the same as the deployed site.
Press Ctrl+C in the terminal to stop the server. Edit any source file
and the page will refresh automatically.
To preview the production build (the exact files GitHub Pages will serve):
npm run build
npm run previewPushing to main triggers .github/workflows/deploy.yml, which lints,
tests, builds, and publishes dist/ to GitHub Pages. Enable Pages in the
repository settings with the source set to “GitHub Actions”.
The Vite base defaults to /apriltag-generator/ (matches the repo
name). Override with the VITE_BASE env var if the repo is renamed or
served from a custom domain root.
Built by Ayyaz Hassan, CS at UIUC and member of SIGRobotics@UIUC. GitHub: github.com/hayyazul.