Guide · deploy previews

Deploy previews give reviewers a URL. Give them the change instead.

Vercel and Netlify put a live preview URL on every pull request. It's genuinely useful — and reviewers still mostly don't click it. Point PR Preview at that same URL and you get a captioned clip of the actual change, embedded in the PR where it can't be missed.

$npm i -D @qwertybit/pr-preview

The gap

A preview URL is an invitation. A clip is the answer.

Preview deployments solved the hard half of the problem: there is now a running version of every branch. The half that's left is human. Opening a URL, waiting for it to boot, and hunting for the thing that changed is work — so reviewers skim the diff and approve. That is exactly the review a UI change most needs and least often gets.

A deploy preview link

  • A URL in a bot comment, below the diff
  • Reviewer has to click, wait for a cold start, then find the changed screen
  • They have to already know what the change was supposed to look like
  • Nothing is left behind in the PR once the preview expires

A clip in the PR body

  • Plays inline, above the fold, with no click
  • Lands you on the exact screen that changed
  • Shows the interaction, not just the end state
  • Stays in the PR history after the preview is torn down

These aren't competing tools. PR Preview needs a running app to record, and a deploy preview is the most convenient running app your branch will ever have.

How it works

From a preview URL to a clip, in four steps

No dev server to configure and no config file required — PR Preview drives whatever is already running at the URL you hand it.

  1. 01

    Copy the deploy preview URL

    Vercel and Netlify comment it on the pull request — something like my-app-git-feature-team.vercel.app. Any reachable URL works, including a staging box or an app you're already running.

  2. 02

    Point PR Preview at it

    No config file needed and no dev server is started — PR Preview drives the app that's already running at that URL.

    $npx pr-preview run --url https://my-app-git-feature.vercel.app --single
  3. 03

    Record the journey

    A Chrome window opens with the recording harness. Click through the flow you want reviewers to see, then confirm — or let Claude Code drive it for you through the MCP server.

  4. 04

    Drop the clip into the PR

    You get a captioned MP4 in .pr-preview/output/. Drag it into the pull request description and GitHub embeds it inline, right above the deploy preview link.

Want a true before/after? Use the local flow.

Recording against a preview URL gives you one clip of the new behaviour. It can't give you an automatic before/after, because your production URL and your preview URL are two different hosts — and in --url mode PR Preview records both passes against the same address, pausing so you can restart that app on the other branch in between.

When you want both sides captured for you, run it locally instead. PR Preview checks your pull request's base branch out into an isolated git worktree, records the same journey on both, and writes before.mp4 and after.mp4.

$npx pr-preview run

More on that in the pull request video guide and recording with Claude Code.

Want the clips hosted and posted for you?

The CLI is free forever. PR Preview for Teams adds hosted clips, a synced before/after review player, and auto-posting to the pull request.

We'll email your invitation when early access opens — no spam.

Deploy previews & PR video — questions

Does this replace my deploy previews?

No — it needs them. A deploy preview is what gives you a running version of the branch to point at. PR Preview just turns that URL into something a reviewer will actually watch, so the two work together.

Can it record a before/after across production and the preview URL?

Not today. In --url mode PR Preview records both passes against the same URL and asks you to restart that app on the other branch in between, so two different hostnames aren't supported. For a true automatic before/after, use the local flow — `npx pr-preview run` checks your PR's base branch out into an isolated git worktree and records both sides for you.

Do I need a config file?

No. With --url there's no dev server to manage, so pr-preview.config.js is optional. If you do keep one, set externalUrl and you can just run `npx pr-preview run --single`.

Does it work with Netlify, Cloudflare Pages, Render or a staging server?

Yes. PR Preview doesn't know or care who deployed the app — it drives whatever is reachable at the URL you give it in a real Chrome window.

Is anything uploaded?

No. The browser runs on your machine and the video is written into your project. Nothing is sent anywhere. In agent mode, only the page's accessibility labels go to Claude so it can pick the next action.

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.

We'll email your invitation when early access opens — no spam.

Just want the CLI? Install it free · Star on GitHub