GuideShot docs

Describe the artifact, not the implementation.

You will be able to place each concern in the right recipe field and define device-specific artifacts without distorting the captured scene.

Recipe anatomy

page

Where the browser navigates. Paths remain relative to the allowed server origin.

prepare

Typed clicks, fills, key presses, and waits that create the visible state.

ready

Assertions that prove the state is stable before capture begins.

capture.frame

The viewport, page, target, region, or padded target group to publish.

annotations

Callouts, arrows, spotlights, outlines, markers, labels, and redactions.

accessibility

Localized alt text for every declared output variant.

output

Formats, width, height, pixel ratio, and publication behavior.

Publish the right shape for each device

The profile controls the browser viewport. capture.frame.aspectRatio controls the artifact. Supplying one output dimension derives the other without stretching.

{
  "id": "workspace.desktop",
  "profile": "guide.desktop",
  "capture": {
    "frame": { "target": "workspace", "aspectRatio": "16:9" }
  },
  "output": { "width": 1920, "formats": ["webp"] }
}

{
  "id": "workspace.tablet",
  "profile": "guide.tablet",
  "capture": {
    "frame": { "target": "workspace", "aspectRatio": "4:3" }
  },
  "output": { "width": 1600, "formats": ["webp"] }
}

{
  "id": "workspace.mobile",
  "profile": "guide.mobile",
  "capture": {
    "frame": { "target": "workspace", "aspectRatio": "9:16" }
  },
  "output": { "width": 1080, "formats": ["webp"] }
}
  • Desktop: 1920×1080
  • Tablet: 1600×1200
  • Mobile: 1080×1920