Documentation

How Recap works.

The detail behind the one script tag — why it exists, how to run a test, what it captures, and how to hand a session to Claude.

Why it exists

You can build a working prototype in Claude or v0 in ten minutes. You can share it with a tester in another ten. But the moment you want to know what they actually did — where they hesitated, what they clicked, where they got stuck — you hit a wall. Maze and Lookback assume you have a "real" website on a "real" domain with engineering support. Hotjar wants you to install a backend. None of them care about the throwaway prototype you spun up to test a single hypothesis on a Tuesday afternoon.

Recap fits the gap. One script tag, no build step, no server. It records what your testers do directly in their browser and gives you the data back as a heatmap, a session timeline, or a structured JSON file you can paste straight into Claude for analysis.

How you use it

Add the script tag to your prototype (one line, no config required)
Share the prototype link with your testers
Testers click around — Recap silently records everything in their browser
Open the prototype yourself, press Alt+Shift+R, and review the heatmap
Export the session as JSON and paste it into Claude for instant UX analysis

For remote unmoderated testing, switch to participant mode — testers get a "finish test" pill and a download button, then email you the session file.

What it captures

Click positions with auto-generated CSS selectors and semantic element labels
Scroll depth per page, both milestone and continuous
Navigation flow — which pages they visited, in what order, for how long
Interaction patterns — hesitation, rapid clicks, backtracking, ignored regions
Page region heatmaps showing the parts of your UI that get attention and the parts that don't

It does not capture: cookies, IP addresses, form values, text content, screenshots, or anything else that could identify your tester. There's no way to make it capture those things. The privacy is structural, not configurable.

Talk to your sessions

Recap exports each session as a structured JSON summary designed for AI analysis. It's not raw coordinates — it's a human-readable timeline of what the participant did, where they hesitated, where they got frustrated, and where they backtracked.

Click "Export for AI" in the researcher panel, paste the result into Claude, and you get a UX review back in seconds. The export includes a ready-to-use prompt template.

{
  "timeline": [
    {
      "timestamp": 7.8,
      "action": "Clicked 'View Reports' after 7.8s of hesitation",
      "context": "First click on page — possible confusion"
    },
    {
      "timestamp": 12.4,
      "action": "Clicked unlabelled element 4 times in 1.8s",
      "context": "Rapid clicks — potential frustration"
    }
  ]
}

Two modes

Recap runs in one of two modes, switched with a single attribute.

Researcher mode is the default. You — the designer — open your own prototype and press Alt+Shift+R to see heatmaps. Use this when you're iterating locally or running in-person tests.

Participant mode is for remote unmoderated testing. Testers see a small "finish test" pill in the corner of the prototype throughout the session. When they're done — or when they get stuck and want to bail out — they download a session file and email it back. You import the file into your researcher panel and review it like any other session.

<!-- For your own use -->
<script src="https://cdn.jsdelivr.net/npm/recap-ux@1/dist/recap.min.js"></script>

<!-- For remote testing -->
<script
  src="https://cdn.jsdelivr.net/npm/recap-ux@1/dist/recap.min.js"
  data-mode="participant"
  data-end-message="Please email the file to research@example.com"
></script>

Privacy

Recap collects no personal data. None. Not because we promise we won't, but because there's nowhere for it to go — Recap has no backend. Every byte of session data lives in the participant's browser until they explicitly download it.

That means no cookies, no IP logging, no fingerprinting, no consent banners, no data processing agreements, no GDPR controller obligations. Recap operates on the same legal footing as a pencil and paper. We built it this way because the alternative — collecting data, storing it somewhere, hoping nothing leaks — is the wrong shape for a tool used to test prototypes with real people.

Best practices

Add data-ut-label="Submit assessment" to ambiguous elements so they appear meaningfully in the heatmap and AI export, instead of as "unlabelled DIV"
Use data-ut-no-track on sensitive inputs to exclude them entirely
Run the same test on at least three participants before drawing conclusions — heatmaps tell stories more clearly with multiple sessions
For remote testing, write a short, clear data-end-message that tells the participant exactly what to do with the downloaded file
Pair Recap with a moderated session whenever possible — the heatmap shows you what they did, but a conversation tells you why

Licensing

Recap is MIT licensed and free for any use — personal projects, commercial work, internal tools, client work. You can fork it, modify it, embed it in other tools, or ship it as part of a product you sell. There are no restrictions, no plans, and no paid tier. If it breaks, file an issue. If you like it, tell someone.

← Back to Recap