Reshotdocs

Capture Types

Reshot supports multiple capture formats. Looping GIFs are the recommended default for interactive documentation, with screenshots for static content.

Visuals grid by step
Each scenario produces a grid of captures — one per step or variant — that you can inspect together in the visuals workspace.

The primary capture format for documenting user flows. GIFs loop infinitely and work everywhere—no video player required.

Basic GIF Capture

JSON
{
  "action": "gif",
  "key": "login-flow",
  "duration": 5000
}
OptionDescription
durationRecording length in milliseconds (max 10 seconds)
loopLoop infinitely (default: true)
fpsFrames per second (default: 15)

Why GIFs?

  • No player required — Works in Markdown, email, Slack
  • Always looping — Users don't need to click play
  • Universal support — Every browser, every device
  • Harder to replicate — Unlike static screenshots, clean looping GIFs require orchestration

Screenshots (PNG)

Full Page Screenshot

Captures the entire visible viewport:

JSON
{
  "action": "screenshot",
  "key": "homepage-hero"
}

Element Screenshot

Captures a specific element:

JSON
{
  "action": "screenshot",
  "key": "navigation-menu",
  "selector": "[data-testid='main-nav']"
}

With Custom Clip Region

Define a specific region of the page:

JSON
{
  "action": "screenshot",
  "key": "sidebar-partial",
  "clip": {
    "x": 0,
    "y": 100,
    "width": 300,
    "height": 400
  }
}

Video Clips (MP4)

Record a sequence of actions as a video. Perfect for documenting:

  • Drag-and-drop interactions
  • Menu animations
  • Form workflows
  • Loading states

Recording a Video

During interactive recording, press C and select Multi-Step Clip.

In config:

JSON
{
  "action": "video",
  "key": "dropdown-demo",
  "duration": 3000
}
OptionDescription
durationMaximum length in milliseconds
A real product workflow captured as a summary video and embedded directly in the docs

Interactive Capture (Press C)

During a recording session, pressing C opens the capture menu:

  1. Single-Step Screenshot
    • Full Page capture
    • Element selection mode
  2. Multi-Step Clip
    • Starts video recording
    • Press C again to stop

Capture Keys

Every capture needs a unique key identifier:

JSON
{ "action": "screenshot", "key": "login-form-filled" }

Best practices for keys:

  • Use descriptive, lowercase names
  • Separate words with hyphens
  • Include context: settings-dark-mode, modal-confirmation

The key becomes part of the asset URL and should remain stable across versions.