PR Preview — before/after video clips for your pull requests
Free npm CLI · MIT licensed · @qwertybit/pr-previewSee what your PR changed — before & after, in a clip<br>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.<br>Get early access to PR Preview for Teams — hosting, reviews & sharing.<br>Work emailGet early access<br>We'll email your invitation when early access opens — no spam.
or start now with the free CLI<br>$npm i -D @qwertybit/pr-previewCopy<br>Star it on GitHub →
1Record<br>Recording your journey<br>BEFORE mainAFTER feat/onboarding
demo@acme.io<br>Log in
Steps<br>Type email<br>Type password<br>Click “Log in”<br>Open dashboard
2Render in
before.mp4 · after.mp4
Encoding clips…0:47
Polished MP4 in under a minute
3Ship to the PR<br>OpenRedesign onboarding flow#214<br>What changed<br>Before<br>After
2 approvals
Quick start<br>Four commands. No setup, no flags.<br>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/.<br>Works with any framework — it drives your real dev server.<br>MP4 with ffmpeg, high-quality GIF fallback without it.<br>Everything stays on your machine — nothing is uploaded.<br>Read the docs on GitHub→<br>~/your-app — zshCopy
$npm i -D @qwertybit/pr-preview<br># add the dev dependency
$npx playwright install chromium<br># one-time browser download
$npx pr-preview init<br># scaffold pr-preview.config.js
$npx pr-preview run<br># record → before.mp4 + after.mp4
recording harness opens in Chrome…
How it works<br>Record by demonstration. Ship a video.<br>A real recording harness — not a screenshot tool. You drive your app; PR Preview turns it into a reviewable clip.
01Record your journey<br>Click through the flow in a controlled Chrome window; each action lands in the sidebar.
02It captures your real run — live<br>The clip is your actual run, not a re-enactment — so it never drifts on stateful apps.
03Before on base, after on your branch<br>PR Preview records the base branch too for a true side-by-side — or use --url for any running app.
04Out come before.mp4 & after.mp4<br>Two captioned clips land in .pr-preview/output/, ready to drag into your PR.
PR PreviewFree & Open SourceRecording your journey<br>BEFORE mainAFTER feat/onboarding
Log in
Step 3 of 5<br>Click “Log in”<br>Type email & password<br>Open the dashboard<br>Create a project<br>Stop recording
In your pull request<br>Built for the AI era of code review<br>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<br>Open<br>aria-dev wants to merge 3 commits into main from feat/onboarding
ConversationCommits 3ChecksFiles changed 12<br>aria-dev commented · just now<br>Reworked the sign-in → dashboard flow. Here's the visual diff:<br>Before — main
0:14<br>After — feat/onboarding
0:14
🎬 Recorded with PR Preview · before.mp4, after.mp4
Works with Claude Code<br>Kick it off from your AI agent<br>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.<br>Config-driven — Claude runs it with zero flags.<br>You demonstrate the journey once; the clip is your real run.<br>Claude handles the rest — trigger, output, and the PR update.
claude<br>❯ You<br>Record a before/after preview for this PR and add it to the description.
Claude<br>Starting PR Preview — record the journey when Chrome opens.<br>$ npx pr-preview run<br>◷ Chrome open · you click through the flow & hit Save…<br>✓ Got before.mp4 + after.mp4 — added them to the PR.
PR Preview for Teams · Coming soonA home for your team's previews<br>The CLI gives you the clips; Teams gives your team a place to host, review, and share them. The CLI stays free forever.<br>Work emailGet early access<br>We'll email your invitation when early access opens — no spam.
Hosted clips<br>Permanent, fast links for every PR.
Synced review player<br>Before & after play in lock-step.
Reviewers & comments<br>Timestamped notes, right on the clip.
Share anywhere<br>Public or private links for anyone.
Visual changelog<br>Every merged PR’s clip, per repo.
Auto-post to the PR<br>A GitHub app posts it for you.
Onboarding redesign · reviewShare<br>Before
After
0:06 / 0:14<br>sam @0:04Love the new spacing here 👏
lee @0:09Can we keep the old CTA color?
Free CLI today. PR Preview for Teams next.<br>Open core: the command-line tool is MIT and free forever. The hosted layer is the paid add-on for teams.
Open Source CLI<br>Free· MIT, forever<br>Record before/after clips locally<br>Captioned MP4 / GIF with a pr-preview.com watermark<br>Any framework, any dev server<br>Runs offline — nothing uploaded<br>Single-clip or full comparison<br>Scriptable from Claude Code & CI<br>Get the open source CLI<br>Coming soonTeams<br>Early access<br>Everything in the free CLI — watermark-free<br>Host clips with...