reshoot

Demos that stay current.

Script a task in your app once. reshoot records it as a captioned MP4 and a README GIF, checks that the result really appeared, and keeps the script beside your code. When the UI changes, run it again: the same story, freshly recorded.

Before and after a UI change, from one storyboard. Watch the 21-second social cut.

• Re-record, don't redo. The demo is a storyboard.toml of clicks, typing, captions and the result that should appear. Run it after every UI change.
• Checked, not just captured. Each run confirms that the result you named appeared, stops on the step whose control no longer matches, and scans the frames for email addresses, keys and faces before you share anything.
• Your agent can drive it. Skills for Claude Code and Codex write the story from your app, and a GitHub workflow records it again when the app changes and opens a pull request with the new video.

Make a demo of your app

Open Claude Code or Codex in your app's repository, or in an empty folder if you only have a running app, and paste:

Make a short demo with reshoot.
Read https://github.com/mumit/reshoot/blob/main/guide/agent-quickstart.md
and follow its setup and creation workflow.

Target: the app in this repository.
Choose one useful task with a clear visible result. Use synthetic demo data.
Produce a short captioned MP4 and a README GIF. Keep the recording source in
demo/ so it can be updated later.

Inspect a preview, then record a fresh final and open both exports for review.
Ask only for permissions or missing details needed to proceed.

Change Target: to a URL, or to a macOS app and its window, if there's no source, and add a task if you have one. The agent installs reshoot, reads your app, writes the story and the checks that prove it worked, and fixes it until it records cleanly. In trials on new apps that took 2 to 5 minutes in Claude Code and 5 to 9 in Codex. It opens the MP4 and GIF; reply "accept" or ask for changes. Nothing is published. reshoot itself calls no model and needs no API key: see what your agent needs.

Or see it on a made-up app first

uv tool install 'reshoot[browser]'
reshoot create        # make the notes demo and open it in the studio

It makes a made-up notes app and a story for it, records a preview in about 15 seconds, and opens it in the studio. reshoot runs on macOS or Linux; installation covers each.

Then shape it in the studio

The studio is a page on your computer for a demo that has a recording: change captions, timing, the look and the cut by pointing, then make the final and accept it. reshoot studio demo opens it. The tutorial walks through it on the notes app: change the demo, break the app, watch the story stop on the step that broke, repair it, and compare.

Show the task yourself

For a simple web app, you can record the task by hand instead of asking an agent. Start the app on your computer as you do when developing it, such as with npm run dev, using a demo account and made-up data. Then give reshoot the address it prints:

reshoot create http://127.0.0.1:3000/ --directory demo

A browser opens there. Show one task, add a caption and check the result with its toolbar, and choose Done. Record your own web app has the details.

The story is a file

[[beat]]
id = "search"
caption = "Find the matching note"
hold = 2.0
[[beat.action]]
type = "type"
target = {css = "#q"}
text = "bike"
[[beat.expect]]
type = "text"
target = {css = "#list li"}
contains = "Pick up the bikes"

reshoot types into the real page with a visible cursor, shows the caption, and holds on the result. When the app renames #q, the run stops on that beat: type target {css = '#q'} matched 0 elements. Fix the target, or pick the new one in the studio, and run again.

Keep it current

Accept a final once; that writes demo/accepted/, a small record to commit. After the app changes, record again, compare and accept the update:

reshoot run demo/reshoot.toml
reshoot compare demo/accepted demo/latest --out demo/comparison.json
reshoot accept demo/latest --export docs/demo

Or let CI do it: the GitHub workflow records the demo when the app changes on main and opens a pull request with the new video, GIF and a beat-by-beat comparison. A broken story fails on its beat and opens nothing.

How it differs

What it records

Platforms lists what runs where.

Skills for Claude Code and Codex

Skills are instructions for a coding agent, so they need one and its model; the CLI on its own needs neither. The first-demo prompt installs them, and the agent quickstart shows other ways. The skill catalog describes all ten.

Where next

Why reshoot exists

I made the launch video for photosearch this way, and pulled the tools and what I learned into reshoot. Keeping a demo's story beside the app makes the work of making it pay off again every time the product changes.

The original notes recording and its source files are still here.

Contributing

New pitfalls, skills and fixes are welcome. See CONTRIBUTING.md for how to work on it and ROADMAP.md for what's planned.

License

MIT. See LICENSE.