See what your PR changed — before & after, in a clip
Record a journey through your app and PR Preview turns it into a before/after video for your pull request. Runs locally, ships in under a minute.
Get early access to PR Preview for Teams — hosting, reviews & sharing.
- Type email
- Type password
- Click “Log in”
- Open dashboard
Polished MP4 in under a minute
Quick start
Four commands. No setup, no flags.
Add the dev dependency, scaffold a config once, and run it on your PR branch — out come before.mp4 and after.mp4 in .pr-preview/output/.
- Works with any framework — it drives your real dev server.
- MP4 with
ffmpeg, high-quality GIF fallback without it. - Everything stays on your machine — nothing is uploaded.
npm i -D @qwertybit/pr-previewnpx playwright install chromiumnpx pr-preview initnpx pr-preview runHow it works
Record by demonstration. Ship a video.
A real recording harness — not a screenshot tool. You drive your app; PR Preview turns it into a reviewable clip.
- 01
Record your journey
Click through the flow in a controlled Chrome window; each action lands in the sidebar.
- 02
It captures your real run — live
The clip is your actual run, not a re-enactment — so it never drifts on stateful apps.
- 03
Before on base, after on your branch
PR Preview records the base branch too for a true side-by-side — or use --url for any running app.
- 04
Out come before.mp4 & after.mp4
Two captioned clips land in .pr-preview/output/, ready to drag into your PR.
- Click “Log in”
- Type email & password
- Open the dashboard
- Create a project
In your pull request
Built for the AI era of code review
AI writes more of the diff than ever, but generated code doesn't show how the UI behaves. Drop the clips into the PR body and GitHub embeds them inline — the change is obvious in seconds.
Redesign onboarding flow #214
Openaria-dev wants to merge 3 commits into main from feat/onboarding
Reworked the sign-in → dashboard flow. Here's the visual diff:
🎬 Recorded with PR Preview · before.mp4, after.mp4
Works with Claude Code
Kick it off from your AI agent
Settings live in pr-preview.config.js, so there are no flags to wire up. Ask Claude Code for a preview and it runs npx pr-preview run — a Chrome window opens, you click through the ~30-second journey, and Claude drops the finished clips into your PR.
- Config-driven — Claude runs it with zero flags.
- You demonstrate the journey once; the clip is your real run.
- Claude handles the rest — trigger, output, and the PR update.
Starting PR Preview — record the journey when Chrome opens.
◷ Chrome open · you click through the flow & hit Save…
✓ Got before.mp4 + after.mp4 — added them to the PR.
A home for your team's previews
The CLI gives you the clips; Teams gives your team a place to host, review, and share them. The CLI stays free forever.
Hosted clips
Permanent, fast links for every PR.
Synced review player
Before & after play in lock-step.
Reviewers & comments
Timestamped notes, right on the clip.
Share anywhere
Public or private links for anyone.
Visual changelog
Every merged PR’s clip, per repo.
Auto-post to the PR
A GitHub app posts it for you.
Love the new spacing here 👏
Can we keep the old CTA color?
Free CLI today. PR Preview for Teams next.
Open core: the command-line tool is MIT and free forever. The hosted layer is the paid add-on for teams.
Open Source CLI
- Record before/after clips locally
- Captioned MP4 / GIF with a pr-preview.com watermark
- Any framework, any dev server
- Runs offline — nothing uploaded
- Single-clip or full comparison
- Scriptable from Claude Code & CI
Teams
- Everything in the free CLI — watermark-free
- Host clips with permanent links
- Synced before/after review player
- Team reviewers & timestamped comments
- Private & public sharing
- Auto-post to the PR + visual changelog
Frequently asked questions
Is PR Preview really free?
Yes — the CLI is MIT-licensed and free forever, including commercial use. You run it locally and the clips are yours. PR Preview for Teams (hosted reviews + sharing) is a coming paid add-on; the CLI stays free.
Does my source code or app data leave my machine?
No. It runs entirely on your machine — opens your app locally, records, and writes the video to your project. Nothing is uploaded. The hosted service (opt-in, later) only handles clips you choose to share.
Which frameworks does it work with?
Any web app you can open in a browser — React, Vue, Svelte, Angular, plain HTML, server-rendered, SPA. It drives your real dev server (or an app you’re already running via --url), so there’s no framework-specific setup.
Do I need ffmpeg?
Only for MP4 output, which we recommend. If ffmpeg isn’t installed, PR Preview produces a high-quality GIF instead. On macOS: brew install ffmpeg.
How do the videos end up in a pull request?
It writes before.mp4 and after.mp4 to .pr-preview/output/ — drag them into your PR description and GitHub embeds them inline. PR Preview for Teams will post them automatically.
Can I run it from Claude Code / the Claude CLI?
Yes — it's config-driven, so there are no flags. Ask Claude for a preview and it runs npx pr-preview run; a Chrome window opens, you click through the ~30-second journey, and Claude adds the clips to your PR. (You do the recording — the clip is your real run, not something Claude fakes.)
Be first to PR Preview for Teams
The CLI is free today. Join the list to get hosted clips, team reviews, and sharing the moment they ship — and help shape what we build.
Just want the CLI? Install it free · Star on GitHub