Predict a knockout tournament round by round, follow the winner's path to the trophy, and export a polished poster from the browser.
Live: https://octopusgarage.github.io/bracket-guess/
Most bracket tools are either backend-heavy prediction systems or spreadsheet-like pickers. Bracket Guess is a small product experiment: fast, local, multilingual, and focused on the moment people actually share - the final bracket image.
- Pick to the title - choose winners round by round until the champion is crowned.
- Poster-first layout - the same bracket you play becomes the exportable image.
- No backend - picks live in
localStorage; no account, tracking, or server state. - Four languages - Chinese, English, Spanish, and Japanese team names and UI.
- Mobile sharing - phones open the native share sheet; desktop downloads PNG.
- Data-driven tournaments - add 8, 16, or 32-team brackets by registering JSON.
npm install
npm run devOpen http://localhost:5173/bracket-guess/.
Production checks:
npm run build
npm test
npx tsc --noEmit| Area | File | Responsibility |
|---|---|---|
| Bracket math | src/lib/bracketMath.ts |
Derives rounds, matches, valid picks, pruning, champion state, and layout data. |
| Tournament data | src/data/tournaments/ |
Stores team names, flags, seeding, locale fields, and bracket size. |
| UI state | src/views/PredictView.tsx |
Connects picks, language, poster export, and share behavior. |
| Export | html2canvas + qrcode |
Renders the bracket into a full-resolution PNG with a link back to the app. |
- Copy
src/data/tournaments/worldcup-2026.json. - Set
sizeto8,16, or32. - List teams in seeded order. Adjacent entries become first-round fixtures.
- Register the file in
src/data/index.ts.
The bracket engine is size-generic; adding a tournament should be data work, not layout work.
- OctopusGarage - small tools for AI agents, local automation, and browser-native products.
- MBTI Lab - another client-side product lab from the same organization.
See this repository's license terms.