how long until the thing.
a countdown is arithmetic and a big number. it is also, consistently, one of the most-shared small pages people make.
the sites that host them wrap it in advertising and sometimes go away entirely, taking your link with them.
building your own takes a message, costs nothing, and gives you a url you can put in a group chat that will still work in a year.
the one recipe with no data at all.
01 / what it isa countdown stores nothing and fetches nothing. the date is part of the html, the current time comes from whoever is looking at it, and the arithmetic happens in their browser. that makes it the simplest thing here and also the most shareable — it works identically for everyone you send it to.
it is also the recipe where the design matters most, because the page is one number and the rest is atmosphere. that is the part worth spending your second message on.
- the number of days, large enough to be the whole page
- hours and minutes underneath, if the date is close enough to care
- what happens when it reaches zero, decided by you
- a design that suits the occasion rather than a stock template
- a social preview, so the link looks right when you paste it
- what is on it
- a target date, a countdown, and whatever occasion copy you asked for
- what it stores
- nothing at all
- time zones
- either the visitor’s local clock or one fixed zone — decide which, because they differ
- at zero
- whatever you specified: a message, a count-up, or a redirect you chose
see one in action.
02 / examplea countdown to a single date, with days large and a smaller line for hours
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 countdown page as a single web page.
Ask me first:
- What the date is, and the time of day if it matters.
- What I am counting down to, and how it should be described on the page.
- Whether the countdown should use the visitor's local time zone or one fixed zone.
- What should happen when it reaches zero.
- The mood: celebratory, calm, stark, playful — and any colours or imagery I want.
Do not invent the date, the occasion, or details about it.
WHAT IT DOES
- Shows the number of days remaining as the dominant element on the page. If the date is within a few days, also show hours and minutes, updating live.
- Computes from the visitor's clock, in the time zone I specified. If I chose a fixed zone, say which one on the page so a visitor elsewhere is not confused.
- Handles the moment it hits zero exactly as I described, and keeps working sensibly afterwards rather than showing a negative number or NaN.
- Handles being opened months early and minutes late equally well.
DESIGN
- The number is the page. Everything else supports it.
- Build the design around the occasion I described rather than a generic dark-with-neon countdown.
- Readable on a phone in a message thread, which is where most people will open it.
- Include Open Graph and Twitter card tags with a title and description that make sense when the link is pasted into a chat.
BE HONEST ON THE PAGE
- Do not claim reminders, notifications or email alerts. The page cannot send anything.
- If the page stores nothing, there is nothing to disclose — do not add a storage notice that is not true.
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="countdown">
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 countdown is made to be sent, which makes the url the product. claim the page, choose a slug that reads well in a message, and ask for og tags so the link previews properly.
the countdown has to outlast the wait.
05 / keeping it aroundfine only if the date is tomorrow. a page published anonymously stops serving after 24 hours with a 7-day recovery window behind it, which is comfortably shorter than most things worth counting down to.
claim it and the link you send survives until the date and past it. for a page whose entire purpose is elapsed time, this is not a subtle argument.
- keep it around
- an anonymous page expires in 24 hours, which for a countdown to anything further out is a contradiction.
- custom url
- this link gets pasted into group chats. a readable slug beats a random id every time.
- stable updates
- dates move. you want to change the page rather than send everyone a new link.
questions.
06 / questionsdoes it work for people in other countries?
yes, and you should decide how. left to the visitor’s clock, everyone sees their own local countdown; pinned to one zone, everyone sees the same number and the page should say which zone that is.
can it email me when the date arrives?
no. a published page has no way to send anything. what it can do is change what it shows when the moment passes, which is what the prompt asks you to specify.
what does it look like when i paste the link?
whatever the og tags say, which is why the prompt asks for them. without them a chat app shows the bare url; with them it shows your title and description.
does it keep working after the date?
yes, however you asked it to — a message, a count-up since, or something you chose. the prompt makes this explicit because "negative 4 days" is the classic failure of a hand-built countdown.