brackets that survive the first round.
brackets are easy with sixteen entrants and a nuisance with thirteen. byes have to go somewhere sensible, seeds have to not meet in round one, and the thing has to be redrawable when two people drop out on the morning.
the free bracket sites handle the tidy case and make you sign up for the rest.
a page built for your tournament does the awkward arithmetic once, shows the whole draw on one screen, and advances a winner with a tap.
the awkward arithmetic, done once.
01 / what it isa bracket is trivial at a power of two and fiddly at every other number, which is every real tournament. the work is placing byes so that the top seeds get them, keeping seeds apart until they should meet, and keeping the shape readable when the rounds are uneven.
having an agent do that once and hand you a page is faster than doing it on paper and considerably faster than signing up for a bracket site to run a works table tennis competition.
- a draw for however many entrants you have
- byes placed by seed, not at random
- winners advancing with one tap
- the whole bracket visible on one screen
- scores against each match, if you want them
- a third-place playoff, or not, as you prefer
- what it holds
- entrants, seeds, the draw, and results as they are entered
- where that goes
- localStorage in the browser running it
- byes
- placed by seed, so the top entrants get them — the rule people expect
- formats
- single elimination by default; double or a consolation round if you ask
see one in action.
02 / examplea thirteen-entrant knockout with three byes placed by seed, and a third-place playoff
the live example is still being built — the prompt below is the one it was made with.
copy this, then make it yours.
03 / starting prompta starting point, not a template — the point of an agent is that the result is yours. change the sections to match what you want, and remove anything you don’t need.
Build me a tournament bracket as a single web page.
Ask me first:
- The entrants, and whether they are seeded. If seeded, in what order.
- Single elimination, double elimination, or something else.
- Whether there is a third-place playoff.
- Whether matches have scores recorded, or just a winner.
- What the tournament is called.
Handle whatever number of entrants I give you. Do not invent entrants and do not silently pad the list to a power of two.
WHAT IT DOES
- Draws the bracket for exactly the number of entrants I have. If that is not a power of two, place byes in the first round and give them to the top seeds — do not distribute them randomly or bunch them together.
- Seed so that the top seeds cannot meet before the latest possible round.
- Advancing a winner is one tap on their name, and it fills their name into the next round automatically.
- Let me undo an advance and change a result. Early rounds get corrected.
- If I asked for scores, record them against each match and show them in the bracket.
- Show the whole bracket on one screen where the size allows, and remain readable on a phone by letting me focus one round at a time.
- Handle a walkover or a withdrawal without breaking the draw.
DESIGN
- The bracket is the page. Lines between rounds should make the progression obvious at a glance.
- Works projected onto a screen, printed on paper, and on a phone.
- Legible without colour, since it will be photographed and photocopied.
BE HONEST ON THE PAGE
- Say results are stored in the browser running the tournament, so anyone else opening the url sees the draw rather than the current state.
- Do not claim live updating for spectators.
STORING THE DATA
- Save everything to localStorage in the browser, automatically, as I go. No
accounts, no login, no server call.
- On the page, say plainly that data lives in this browser only and does not
sync to other devices. Do not bury it.
- Give me an "export" button that copies or downloads everything as JSON, and an
"import" that reads the same JSON back. That is the only way my data can move
between devices, so it is not optional.
- Never lose what I have already entered. If the stored data is from an older
version of the page, read what you can rather than throwing it away.
DELIVERY
- Produce one self-contained HTML file. Inline the CSS and JavaScript.
- No build step, no server, no framework, no package install, no external
requests at runtime.
- Mobile-first and responsive; it has to be usable one-handed on a phone and
still look right on a laptop.
- Accessible: semantic HTML, real contrast, visible keyboard focus, labelled
controls, touch targets big enough to hit, and respect reduced-motion.
- Use placeholders where information is missing. Do not invent facts, numbers,
names, dates, prices, or results I have not given you.
- Before you call it finished, use it yourself: enter real-looking data, reload
the page, and confirm nothing is lost or mangled.
PUBLISHING
Publish the finished page to HTMLShare and give me the link.
Use exactly one of the two paths below, preferring the first. Make the call
directly. Do not route it through a code sandbox, container, or computer-use
session — that is where the request gets blocked, and it is never necessary.
1. An HTMLShare integration or connector, if you have one configured.
The page is permanent and owned by my account. Report the url and the
siteId. There is no claimUrl or manageToken on this path — do not go
looking for one, and do not switch paths in order to produce one.
2. Otherwise, publish anonymously over REST. No account, key, or signup is
needed:
POST https://api.htmlshare.net/v1/publish
content-type: application/json
{"html": "<!doctype html> ... "}
The reference is https://htmlshare.net/docs and, for the full schema,
https://api.htmlshare.net/openapi.json
Report these from the response, in your reply and never inside the page:
url the public page
claimUrl a private link that is mine alone. opening it is how I keep
the page past its 24-hour expiry, or set an email reminder
before it goes. it carries the manage token, so it must
never appear in the published HTML or anywhere a visitor
could see it.
manageToken the only thing that can edit or delete this page later. it is
returned once and never again, so tell me what it is.
Tell me which of the two you used. If the path you reach for first is
unavailable in your environment, say so and tell me what you are switching to
before you publish — a permanent page on my account and a 24-hour anonymous
page are different things, and which one I get is my decision, not a detail.
If I ask for a change afterwards, update the existing page instead of
publishing again, so the URL I have already shared keeps working — through the
same integration on path 1, or with the manage token as an X-Manage-Token
header on path 2.
RECIPE MARKER
Include this tag in the <head>, exactly as written:
<meta name="htmlshare-recipe" content="tournament-bracket">
It tells htmlshare which recipe the page came from, so the library can count
that this one was actually made. It carries nothing else.give it a url.
04 / publishing ithow you publish depends on how you’re working.
- with an integration
- if your assistant already has htmlshare connected — mcp or another supported integration — just ask it to publish the finished page and hand back the url. the page belongs to your account and is permanent. when you want a change, ask for an update to that same page rather than a new one.
- with no integration
- the prompt tells the assistant to post the html to the rest api instead, which needs no account and no key. it comes back with a live url you can open immediately, a private claim link, and a manage token. the claim link is how the page stops being temporary — keep it.
- by hand
- nothing stops you doing it yourself: have the assistant give you the html file and drop it on the htmlshare home page. same url, same page, one more step.
- what matters here
- a bracket is a display as much as a tool — people want to see the draw. claim it so the link you sent round still resolves when the semi-finals are played.
a tournament can outlast a day.
05 / keeping it aroundfine for a one-afternoon competition: publish in the morning, done by evening. it stops serving 24 hours later with a 7-day recovery window.
claim it for anything running over a weekend or a season, and for reusing the same setup next year.
- keep it around
- anything running longer than a day needs a page that does.
- custom url
- a link with the tournament name in it is one you can put on a poster.
- stable updates
- results come in over hours or weeks; the page updates and the link does not move.
questions.
06 / questionscan spectators follow along live?
no. results are in the browser running the bracket, so anyone opening the url sees the draw and not the current state. a photograph of the screen in the group chat is the honest version of live updates here.
does it handle an odd number of entrants?
yes, and that is most of why it is worth building. byes go to the top seeds in the first round, which is the rule people expect and the one generic templates usually get wrong.
can i do double elimination?
ask for it in the first message. it is a different and considerably larger bracket, so it is much easier to build that way than to convert later.
what if someone drops out after the draw?
record it as a walkover — the prompt asks for that case explicitly, since it is the most common thing that happens to a bracket between drawing it and playing it.