Stepshots for Chrome

Record a product demo right in your browser.

The Stepshots browser extension turns a real walkthrough into a polished, step-by-step demo. Hit record, click through your product, and every interaction becomes a captured step with a screenshot — ready to edit and share.

Included with every Stepshots account
Chrome 114+, Manifest V3 — now on the Chrome Web Store
https://app.acme.com/onboarding
Recording

Onboarding walkthrough

  • 1Click "Get started"
  • 2Type workspace name
  • 3Navigate to dashboard
  • 4Capturing…
PauseStop
Capture the real product

Everything you do on the page becomes a step.

No scripting, no mockups. Open the side panel, start recording, and walk through your product. The extension watches the page and turns each interaction into a clean, screenshot-backed step.

One-panel recording

Open the Stepshots side panel, name your demo, and hit record. Controls stay docked next to the page so you never lose your place mid-flow.

Captures every interaction

Clicks, typing, navigation, scrolling, keyboard shortcuts, and dropdown selections are each recorded as a separate, ordered step.

Automatic screenshots

A screenshot is captured in the background for every step, so the finished demo shows exactly what the viewer would see at each moment.

In-page recording HUD

Pause, resume, and stop from either the side panel or a floating in-page HUD — whichever is closer to what you're doing.

Review before you upload

When you stop, the captured steps appear in the panel. Reorder them, delete the ones you don't want, and make small edits before sending.

Direct upload

Paste your Stepshots URL and API key once. From the finalization screen, upload straight to your workspace and open the new demo in the editor.

Sensitive fields skipped

Password fields and other sensitive inputs are intentionally never recorded, so credentials never end up in a demo or a screenshot.

Manifest V3

Built on Chrome's modern extension platform with a service worker and the side_panel API. Works in Chrome 114+ and Chromium-based browsers.

Finish in the editor

After upload, polish the demo in Stepshots: add callouts and highlights, blur sensitive areas, then publish and copy the share link.

Record, review, ship

From live flow to shareable demo.

The extension covers the whole capture stage. Once you upload, the Stepshots editor takes it the rest of the way.

Record

Walk through it once.

Start from the exact page you want, hit record, and perform the flow naturally. Each click, keystroke, and navigation lands as its own step with a screenshot.

Review

Trim before you send.

Stop recording and the steps appear in the panel. Drop the accidental clicks, reorder anything out of sequence, and tidy up the flow before upload.

Ship

Upload and polish.

Upload directly to your workspace, then open the demo in the editor to add callouts, blur sensitive UI, and publish a viewer link for your team or customers.

Extension or CLI

Record by hand. Or script it. Same polished result.

The browser extension is the fastest way to capture a real walkthrough manually — ideal when the flow is exploratory, lives behind a login, or is easier to demonstrate than to describe in a config file.

The Stepshots CLI is the counterpart: define your steps in a config and re-run them whenever the product changes. Different entry points, but both end up as the same editable, shareable demo in your workspace.

No config to write

Just open the page and click through it. Perfect for one-off demos, flows that change often, or anything you'd rather show than spell out.

Captures the real UI

Screenshots come straight from the live product at record time, so the demo always reflects what users actually see — no mockups, no drift.

Works behind a login

Record inside authenticated apps, staging environments, and internal tools. If it loads in Chrome and isn't a chrome:// page, you can record it.

Lands in the same place

Uploads to the same workspace as CLI recordings and feeds the same editor and analytics. The extension is just one more way in.

Get started

Three steps to your first recorded demo.

01

Install the extension

Add Stepshots to Chrome from the Web Store in one click. It runs on Chrome 114+ and Chromium-based browsers like Edge, Brave, and Arc. Prefer to build from source? The installation guide covers that too.

02

Add your API key

Generate an API key in Stepshots Settings, then paste it and your Stepshots URL into the extension's settings so it can upload directly to your workspace.

03

Record and upload

Open the side panel on the page you want to capture, hit Start Recording, walk through the flow, review the steps, and upload to Stepshots.

FAQ

Common questions about the extension

Is the Stepshots browser extension free?

Yes. The extension is included with every Stepshots account at no extra cost. It records demos and uploads them to the same workspace you already use.

Is it on the Chrome Web Store yet?

Yes — Stepshots Recorder is live on the Chrome Web Store, so you can add it to Chrome in one click. Prefer to build it yourself? You can still load it from source as an unpacked extension; the installation guide covers both.

Which browsers does it support?

The extension targets Chrome 114 or later and runs on Manifest V3. It also works in Chromium-based browsers such as Edge, Brave, and Arc that support the side panel API.

What does the extension actually record?

Each interaction on the page becomes a separate step: clicks, typing, navigation, scrolling, keyboard shortcuts, and dropdown selections. A screenshot is captured in the background for every step.

Does it record passwords or sensitive fields?

No. Password fields and sensitive inputs are intentionally never recorded, so credentials never end up in a step or a screenshot.

Can it record any page?

It records any normal website that loads in Chrome, including apps behind a login, staging environments, and internal tools. It cannot record Chrome internal pages such as chrome:// URLs, extension pages, or other browser-managed screens.

How does upload work?

Add your Stepshots URL and an API key in the extension's settings once. After you finish a recording, the finalization screen uploads it directly to your workspace and links straight to the new demo in the editor. Direct upload requires a valid API key.

Should I use the extension or the CLI?

Use the extension when you want to record a real walkthrough by hand — exploratory flows, anything behind a login, or demos that are easier to show than to script. Use the CLI when you'd rather define steps in a config and re-run them as the product changes. Both produce the same editable demo.

Is there a Firefox or Safari version?

Not currently. The Manifest V3 build runs on Chrome and Chromium-based browsers today. Other browsers may follow once their side panel support matures.

Get the extension

Record your next demo in the browser.

Included with every Stepshots account. Built on Manifest V3 for Chrome and Chromium-based browsers.