Record Your Website at Mobile, Tablet, and Desktop Sizes in One Command

To record your website at different screen sizes, you normally resize a browser window three times and stitch three clips together. The free Clipy CLI does it in one command: it loads your site in a headless browser at mobile, tablet, and desktop viewports in sequence and uploads a single video with a labeled chapter per size.

Disclosure: Clipy is our product. Every command below is copy-pasteable and works on the free tier.

Why record your website at different screen sizes at all

The workflow that made us build this: you tell Claude Code or Cursor "the pricing card overflows on mobile, fix it," the agent edits the CSS, and then... you squint at DevTools yourself to confirm the fix at three breakpoints. The verification step stayed manual.

Now the agent runs one command after the fix and attaches the result:

clipy record --url http://localhost:3000/pricing \
  --viewports mobile,tablet,desktop --for 8 \
  --title "Pricing card overflow fix" --type demo --wait

That produces one Clipy link. The video plays the pricing page at 390×844, then 768×1024, then 1440×900, eight seconds each. The transcript carries a chapter mark at the start of each pass ("mobile (390×844)", and so on), so you can see exactly where each size starts, and a reviewing agent can read which segment shows which breakpoint. The person who asked for the fix watches about twenty-five seconds of proof instead of re-testing by hand.

The named sizes are shorthands: mobile is 390×844, tablet is 768×1024, desktop is 1440×900. Pass exact dimensions when your breakpoints differ: --viewports 320x568,1024x768,1920x1080 works the same way.

Setup (two minutes)

The CLI is free and the recording commands need Playwright plus an upload-capable API key:

npm install -g @clipy/cli playwright
npx playwright install chromium
clipy login        # browser approval, no key copy-pasting

clipy login opens your browser to approve the device. If you prefer minting a key by hand, create one at clipy.online/settings/api-keys with the "Record & upload" permission. clipy doctor verifies the whole setup.

If your agent should run this itself, install the Clipy skill once and it learns all of this: npx @clipy/cli agents install claude (or codex / cursor). More on that whole loop in your AI agent can record its own screen.

Narrating the passes

Recordings made in a headless browser are silent, so Clipy turns your notes into the transcript. With multiple viewports, anchor notes to a pass rather than an absolute second, so they cannot drift if a slow page load shifts the pass boundaries:

clipy record --url http://localhost:3000/pricing \
  --viewports mobile,tablet,desktop --for 8 --wait \
  --note "pass1: cards stack in a single column now" \
  --note "pass2: two-column grid, no overflow" \
  --note "pass3: full three-column layout"

Each note lands at the real start of its pass. On the share page they read as a transcript; in the agent-readable context they are structured segments another agent can quote when reviewing the change. This is the honest version of a transcript for a silent recording: it is labeled as narration, not pretend speech.

Reviewing the result, human or agent

The share link serves both audiences:

• Humans get the video plus a summary and a transcript with a timestamped mark per pass, no account needed to watch.
• Agents read the same recording as text and frames. Paste the link into Cursor with the Clipy skill installed and ask "does the mobile pass still overflow?"; it reads the chapter segments and the keyframes rather than guessing. The receiving-side mechanics are covered in what an agent-readable screen recording is and pasting a video into Cursor.

For artifacts beyond the link: the MP4 downloads directly, and if you need a lightweight preview for a PR description, convert a segment to a GIF with the free tool.

Where this fits vs. real-device testing

One honest boundary: viewport recording tests your responsive CSS, not device behavior. It will not catch Safari-specific rendering, notch safe-areas, or touch quirks, because it is desktop Chromium at phone dimensions. BrowserStack-style device farms still own that layer (and screenshot tools like Percy own pixel-diff regression). This tool owns a different, previously empty niche: fast, watchable, narrated proof that a layout change works across breakpoints, produced by the same agent that made the change, shareable as one link. Recording an already-deployed site works the same way; point --url at production.

If what you actually need is to change an existing video's aspect ratio rather than re-record, that is the resize video tool.

FAQ

How do I record my website at different screen sizes?

Run clipy record --url <your-site> --viewports mobile,tablet,desktop with the free Clipy CLI. It records the site at each viewport in sequence, headlessly, and uploads one video with a chapter per size and a share link.

Can I use custom breakpoints instead of mobile/tablet/desktop?

Yes. Pass exact dimensions: --viewports 320x568,1024x768,1920x1080. The named sizes are only shorthands for 390×844, 768×1024, and 1440×900.

Does it work in CI or on a server with no display?

Yes. The capture is headless Chromium via Playwright, so it runs on displayless Linux boxes, CI runners, and cloud sandboxes.

Is the video split into three files?

No, it is one continuous video. Each viewport pass gets a labeled chapter mark in the transcript, so viewers and agents can jump to a specific size.

Does this replace responsive screenshot testing?

No. Screenshot tools catch pixel regressions automatically per commit; this produces a watchable, narrated recording for humans and agents reviewing a specific change. Teams use both.