Screenshots you can click.
Freeze a live web app at a point in time into one self-contained, offline, clickable .html —
a board of every captured screen, plus interactive modals wired by the site's own navigation.
No server, no build step to view, no dependencies. Just open the file.
An agent skill for coding agents (Claude / Codex / Grok) — and a plain CLI you can run yourself. You capture apps you have access to, on your own browser session; clickshot never touches your credentials.
Open a screen and it renders live in a modal; the spots that lead somewhere are marked in blue:
(Demo above is the synthetic examples/acme-console.html — open it to try clickshot in ten seconds.)
open examples/acme-console.html # macOS (or just double-click it)A real clickshot of a throwaway "Acme Console" fixture: 4 screens, a flow board, click-through modals — entirely offline, ~200 KB, no server.
git clone https://github.com/codingmydna/clickshot
cd clickshot
pnpm install # or: npm install
pnpm exec playwright install chromiumLogged-in apps (you log in yourself):
node capture-live.mjs https://app.example.com capture-mineA real browser opens. Log in (your browser's password manager works as usual), then browse
normally — each screen auto-captures on navigation; a floating button grabs states that don't
change the URL (modals, expanded panels). Press Enter in the terminal when done.
Your session persists locally in pw-profile/ (gitignored) so you only log in once — no password
is ever stored.
Public pages, scripted (no login, headless):
node capture.mjs https://example.com flow.json capture-mine
# flow.json = [{ "click": "a.pricing", "label": "Pricing", "wait": 500 }, …]node build.mjs capture-mine clickshot.htmlFonts, images and CSS are inlined and de-duplicated across screens; a metadata stamp (source URL + capture date) is added automatically.
Double-click clickshot.html. Start on the board (the whole product at a glance, arrows = real
transitions, ▶ start = entry points). Click any frame to open it; inside, blue markers show
what leads to another captured screen. Esc returns to the board.
| Tool | Interactive? | Single offline file? | Point-in-time? |
|---|---|---|---|
| SingleFile / monolith | ❌ (static, JS dead) | ✅ | ✅ |
| ArchiveWeb.page / rrweb | ✅ (needs a player) | ❌ | ✅ |
| Navattic / Storylane | ✅ | ❌ (cloud SaaS) | ❌ |
| clickshot | ✅ | ✅ | ✅ |
clickshot's combination is the gap: click-through interaction + one offline file with no viewer + a frozen point in time. It captures rendered screens and the clicks between them — it is not a source-code cloner, and it does not reproduce server behavior.
- No credentials, ever. Human capture = you log in on your own browser. clickshot keeps only a local browser session, never a password.
- Captures can contain real on-screen data. Capture dirs and built
*.htmlare gitignored by default. For anything you publish, capture with dummy accounts / test data. - Every output is stamped with source URL + capture date, so it can't be mistaken for the live site. Only capture apps you're authorized to use.
Capture uses rrweb-snapshot (not outerHTML), so shadow DOM,
adoptedStyleSheets, canvas and inline images survive. Each transition records the clicked element
by rrweb node id. build.mjs rebuilds every snapshot, tags the hotspots, injects a tiny navigation
shim (the captured app's JS is dead by design), serializes with declarative shadow DOM, inlines +
de-duplicates assets, and emits the board/modal shell. Outputs are verified by opening them in an
offline browser context and asserting zero console/network errors.
MIT © codingmydna