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.

Try it in a minute

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 its story, records a preview in about 15 seconds, and opens the studio: a page on your computer where you change captions, timing, the look and the cut by pointing, then make the final and accept it.

For your own app, start its demo server and run:

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

Show one task in the browser that opens. Its toolbar adds a caption, checks a result, and finishes with Done. Use a demo account and made-up data.

reshoot runs on macOS or Linux; installation covers each. The tutorial goes further: change the demo, break the app, watch the story stop on the step that broke, repair it, and compare.

Or let your agent make it

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.

What to expect, from trials on four new apps: 2 to 3 minutes in Claude Code, 5 to 9 in Codex. The agent writes demo/ and its skills, may ask to install reshoot and ffmpeg, then 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.

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

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.