Overview
Retake records your prototype while you use it. Drag the timeline back and the app is at that moment, rebuilt by its own code. Press + to try something else from there.
It runs in front of your dev server: a Vite app, Next.js, React Router, Remix, Astro, SvelteKit, Nuxt, or anything else that serves HTML. The timeline docks at the bottom of the page. Nothing ships in a production build, and your files aren't touched unless you give each timeline its own code.
30-second start
From your app's folder:
npx retake-dev .- Open the URL it prints,
http://localhost:3014by default. It's recording from page load. - Use the app for a few seconds, then press Space to pause. Paused, the app is view-only: you can scroll, not click.
- Drag the playhead back. The moment shows at once as a preview; let go and it's rebuilt for real.
- Press +. A new timeline starts at that moment, paused. Press play and do something different.
- Hold ⌘ and click an element to leave a note. Copy for agent copies it as a prompt, or your agent reads it over MCP.
Use the full name retake-dev with npx. The short retake command exists once it's installed in the project; an unrelated npm package is called retake.
What rewinds
The browser side of your app:
- Timers,
requestAnimationFrame,Date,performance.nowand idle callbacks run on a virtual clock. - CSS transitions, keyframe animations, Web Animations and SVG's own animations follow that clock.
Math.randomandcryptoare seeded, so a replay draws the same numbers.- Server replies are answered from the recording:
fetch(streams chunk by chunk), XHR,EventSourceand WebSockets. So are observer callbacks and worker messages. - Web storage, cookies and IndexedDB go back to how they were when the recording began.
Your server doesn't rewind. Database writes and server sessions stay as they are; replays never call the server again. See what isn't rewound.
How going back works
Retake doesn't snapshot the DOM. It records every input (pointer, keys, typing, scrolling, back and forward) and runs time on a virtual clock. Going back loads the page again in a hidden frame and replays those inputs at full speed up to the moment you picked, so your app's own code builds the screen. While that frame builds, a preview of the moment is on show, and the real one swaps in when it's ready. You only wait if you press play or + before then.