Stepshots logoStepshots

Recording with the CLI

Record, preview, and upload screenshot demos with the Stepshots CLI for stable, scripted flows.

Prerequisites

Before you start, make sure you have:

  • Rust installed (for building the CLI)
  • Chrome or Chromium browser
  • A Stepshots account

Installation

Install the CLI from the crates directory:

bash
cargo install --path crates/cli

Initialize Your Project

Create a configuration file in your project directory:

bash
stepshots init

This generates a stepshots.config.json file where you can configure the target URL, viewport size, and other settings.

Recording a Demo

Start a recording session:

bash
stepshots record

The CLI captures screenshots at each step and bundles them into a .stepshot file.

Preview Locally

Before uploading, preview your demo:

bash
stepshots preview

This opens a local server where you can click through the recorded steps and verify everything looks right.

Upload to Stepshots

Once you're happy with the recording, upload it:

bash
stepshots upload

The CLI uploads the .stepshot bundle to your Stepshots account. You'll get a link to view and share your demo.

Claude Code Skill

If you use Claude Code, you can generate stepshots.config.json files from natural language instructions. Install the skill from the repo:

bash
cp -r skills/stepshots-cli-record ~/.claude/skills/

Then describe the flow you want to capture and Claude will generate the config with steps, selectors, and annotations for you.

Tips for Great Demos

  1. Keep the flow stable — Prefer selectors and states that are unlikely to change often
  2. Keep it focused — 5-10 steps is the sweet spot for engagement
  3. Use annotations — Add highlights and callouts in the web editor after uploading
  4. Test before automating — Preview locally before relying on CI or scripts
  5. Test on mobile — Preview your demo at different viewport sizes
Navigation