Stepshots logoStepshots

Quickstart

Go from zero to a published demo in 5 minutes

Quickstart

This guide walks you through recording your first demo, uploading it, and sharing it.

Prerequisites

  • Rust toolchain installed
  • Google Chrome or Chromium installed
  • A Stepshots account

Steps

1

Install the CLI

bash
cargo install stepshots-cli

Verify the installation:

bash
stepshots --version
2

Initialize a config

In your project directory, run:

bash
stepshots init

This creates a stepshots.config.json with a sample tutorial. Edit it to point at your app:

json
{
      "baseUrl": "https://your-app.com",
      "viewport": { "width": 1280, "height": 800 },
      "defaultDelay": 500,
      "tutorials": {
        "onboarding": {
          "url": "/",
          "title": "Onboarding Flow",
          "steps": [
            { "action": "click", "selector": "button.get-started" },
            { "action": "type", "selector": "input[name='email']", "text": "user@example.com" },
            { "action": "click", "selector": "button[type='submit']" }
          ]
        }
      }
    }
3

Record the demo

bash
stepshots record

The CLI launches headless Chrome, runs the configured flow, and saves screenshots into a .stepshot bundle in the output/ directory. This works best for stable, predictable steps.

4

Upload to Stepshots

bash
stepshots upload output/onboarding.stepshot --token YOUR_API_KEY

Or set STEPSHOTS_TOKEN as an environment variable and omit the --token flag. See API Keys to generate one.

5

Edit and share

Open the Stepshots dashboard, find your demo, and use the overlay editor to add highlights, callouts, or blur regions.

When you're ready, toggle visibility to **Public** and copy the viewer link to share it.

What's Next

Navigation