The Guidebook
A field manual — replace this subtitle with one short, evocative line.
- 01Layout reference16 steps · This first chapter is a showcase of every supported step layout. Use it to choos…p. 02
- 02Working through the process4 steps · The middle chapter. Use it to expand on the technique introduced in chapter one …p. 19
- 03Finishing well2 steps · The closing chapter. Tie everything together and leave the reader with a clear s…p. 24
01
Layout reference
This first chapter is a showcase of every supported step layout. Use it to choose the right combination of image type and callouts for your guide.
Single — plain
One phone-shaped screen, centered, with the instruction beneath. Use this for the majority of mobile screenshots.
Single — with callouts
Same phone-shaped screen, with a column of callouts to the right pointing out elements on the screen.
Describe the labelled area at the top of the screen.
Explain the primary control the user interacts with here.
Flag a precondition or required field before the user can continue.
Double — plain
Two phone screens side-by-side. Use for before/after, comparison of two options, or the result of an action on the previous screen.
Double — with callouts
Two screens side-by-side with a callouts column. Use when both screens need annotation but you don't want to imply a flow direction between them.
Identify a key element on the first screen.
Identify a key element on the second screen.
A softer side-remark on the difference between the two states.
Double — arrow + callouts
Two screens with an arrow tracking the user's path, plus callouts on the right pointing out specific elements.
Inventory is auto-populated from your last session.
Tap to increase or decrease the amount.
Take a photo before tapping Continue, otherwise the form will not submit.
Single-wide — plain
One wide screen spanning the full double-layout width — use for landscape captures, tablet UI, or wider composite screens.
Single-wide — with callouts
Single-wide image with a callouts column to the right. The wide slot shrinks to make room for the callouts while keeping the same aspect ratio.
Identify the controls along the top of the wide layout.
A softer side-remark for less critical info.
Single — callouts below
Same single screen, but with callouts laid out below in a 2-column grid. Use when you have several short annotations and want to give the screen its full width on the page.
The labelled area at the top of the screen.
Persistent status indicator — usually visible across screens.
Must be filled before the user can submit.
The primary control the user taps to continue.
Shown until the user has at least one saved item.
Secondary navigation lives at the bottom.
Double — callouts below
Two screens stacked side-by-side with an arrow, callouts below in a grid. Best when each numbered callout corresponds to a labelled spot across both screens.
Opens the navigation drawer.
Defaults to most-recent first.
Choose any list to view its contents.
A list must contain at least one item before sharing.
Single-wide — callouts below (3 cols)
Wide layout with a 3-column grid of callouts beneath. Set `calloutCols: 3` for denser annotation when callout bodies are short.
Searches across all open documents.
Hold ⌥ to multi-select rows.
Stack filters to narrow results.
Double-click a header to auto-fit.
Sort by date, name or size.
Selection is cleared on filter change.
Single — custom height
Override `imageHeight` when a screenshot is longer than a standard phone screen (e.g. a scrolling capture). Width is unaffected; the slot just grows taller.
Double — per-slot sizing
Use `imageSizes` to set width and/or height for each slot independently — for example, a phone screen next to a slightly taller wider screenshot.
Single — full-width callouts below
Set `calloutCols: 1` to give each callout the full page width below the screen. Best when callout bodies are long sentences or paragraphs.
Walks the user through the most important decision they'll make in the whole flow. Give it the spotlight it deserves.
The CTA at the bottom advances to the next step. Notice that it stays disabled until every required field above it is filled in correctly.
If the user backs out at this point, the partial entry is discarded — there is no draft saved on the device or server.
Multi-row — stack layouts on one page
Use an `images` array instead of a single `image`. Each entry is its own row — any mix of single, double or single-wide — stacked down the page. If the combined stack would overflow, every image scales down (aspect preserved) until it fits.
Multi-row — callouts per row
Each row carries its own `callouts` and `calloutLayout`. Keep callout counts modest so the whole stack still fits the page.
Annotate an element on the top screen.
Flag the must-do action here.
Opens the next screen.
Shows the updated state.
Per-image border — framed vs. borderless
Every image is framed with a 6px border by default. Set `border: false` to drop the frame — handy for screenshots that already include their own chrome or a full-bleed graphic.
02
Working through the process
The middle chapter. Use it to expand on the technique introduced in chapter one and to demonstrate variations.
Step 01
Begin with a brief re-orientation — remind the reader where they left off.
Step 02
Introduce the core technique of this chapter. The pair of screens shows the tap and the resulting state.
Step 03
Show a common variation, with the image highlighting the difference.
Step 04
End with a checkpoint — the left screen is what the reader should see; the right is the next view they'll move into.
03
Finishing well
The closing chapter. Tie everything together and leave the reader with a clear sense of completion.
Step 01
Inspect the work. The two screens compare the expected and the actual result.
Step 02
Make final adjustments — small changes only at this stage.