Lens is coming soon. Ask for early access →

Step-by-step Guides

Click through a flow once. Lens writes the walkthrough.

A guide is a walkthrough of a flow: a screenshot per step with the control you used ringed and numbered, and a sentence under each. You click through the task once and Lens assembles the document, rather than asking you to screenshot each step and paste them together afterwards. A finished guide can also be played back against the live page, with each step's control highlighted on it — see Guide Mode below.

No AI is involved in building a guide. Step sentences come from the accessible name of each control — the name a screen reader would announce. A connected model can rewrite those sentences afterwards; it never writes them in the first place.

1. Two ways to capture one

Record steps (⌘⇧E, Alt+Shift+E) is the light one: no region to drag, no video, and no time limit — nothing accumulates between clicks, so a walkthrough can take as long as the work does.

  1. Press Record steps in the popup or use the shortcut. A small widget appears in the corner of the page.
  2. Click through your flow as you normally would every click on a real control becomes a step, and a page load becomes a step of its own so the guide does not read as though everything happened on one screen.
  3. Type into fields as you normally would a field is captured once you stop typing, not when you click into it, so the picture shows a filled box rather than an empty one. The step quotes what you entered — Type "ACME-1024" into "Order number".
  4. Choose from dropdowns as you normally would the step is the option that came out, not the click that opened it — Select "Germany" from "Country".
  5. Scroll as you normally would scrolling far enough to reach something becomes a step, named for the heading you land on. A nudge to bring something into view does not.
  6. Press Record clip for anything a still cannot carry a drag, a hover menu, an animation. Drag a region, do the thing, press Stop clip, and it is dropped in as one animated step in the place you recorded it.
  7. Press Finish the review panel opens. There is no file to name, because the guide is the whole result.

A flow that opens a new tab — a payment provider, a consent screen, a document — carries on being recorded. Any tab the flow itself opens joins the walkthrough; a tab you open for something else does not. Closing the tab you started in does not end the walkthrough if the flow has moved on, and Finish is available in whichever tab you are standing in.

Record GIF (⌘⇧R) produces a guide as well as the recording, as long as Build a guide from each recording is on — it is by default. The review panel appears under the file name on the save screen.

Only Record steps follows the flow into a new tab. A GIF recording is a capture stream bound to one tab, so it stays on the tab it started in.

The region you drag limits the recording, not the steps. Each step screenshot is a fresh capture of the whole tab, with the control you used ringed on it — so steps stay readable even when the recorded region was small.

A step is the whole screen on purpose. A picture cropped tight around one button leaves out the part of the page a reader needs in order to know where they are, and a crop cannot be undone once it is saved. Lens works out where a tighter crop would go and offers it instead: open a step's crop tool in the editor and that box is already drawn, ready to accept or drag.

The walkthrough widget in the corner of a page, showing a step count, a clip count, and the Record clip, Finish and discard buttons
The walkthrough widget in the corner of a page, showing a step count, a clip count, and the Record clip, Finish and discard buttons

2. What does not become a step

  • Clicks on Lens's own controls. Pressing Finish does not appear in the guide it finishes.
  • Clicks on nothing — empty space, a page background.
  • A repeated click on the same control within a second, which is counted once.
  • A drag or a text selection, which is not a click at all.
  • Clicking into a field and leaving it empty — the step arrives when you type something, not before.
  • Clicking a dropdown open. The step is the option you choose from it. On most platforms the open list is drawn by the operating system and would not appear in a screenshot of the page anyway.
  • A short scroll, or the jump a page makes in response to a click that was already recorded.

3. Reviewing before anything is written

Nothing reaches your folder until you approve it. The review panel lists every step with its screenshot, and you can:

  • Edit the guide title, and the text of any step.
  • Untick steps you do not want. They are dropped, and the rest renumber.
  • Untick the guide entirely and keep just the recording.
  • Rewrite with AI — only if you have a model connected. It refuses any answer that changes the number of steps, so it can improve the words but cannot invent or lose a step.
The review panel on the save screen listing numbered steps with their screenshots, each with a checkbox and an editable caption
The review panel on the save screen listing numbered steps with their screenshots, each with a checkbox and an editable caption

4. Where guides live afterwards

Dashboard > Guides. One card per guide, newest first, each showing the site's own logo — or its favicon where there is no logo, or a coloured initial where there is neither — with the title, the site, the step count, the project and the day it was captured.

ActionWhat it does
PlayRuns the guide against the live page. See Guide Mode below
Open editorOpens the guide as a document in its own tab
ExportSelf-contained HTML, Markdown, or the clipboard
DeleteRemoves the guide's folder on disk and the entry pointing at it. Asks first

Guides recorded while no folder was linked are held in the browser and listed below the others as pending. They are not lost — link a folder, make that project active, and write them from there.

The dashboard Guides tab with guide cards, each showing the site's logo, title, step count and the folder path it was written to
The dashboard Guides tab with guide cards, each showing the site's logo, title, step count and the folder path it was written to

5. Guide Mode: playing a guide back

An exported guide is something you read next to the work. Guide Mode puts it on the work: a small panel floats over the real page with the current step and its screenshot, and a ring is drawn around the control that step is about, on the page itself.

Start it from Dashboard > Guides > Play, or from Guide Mode in the editor's toolbar.

ControlWhat it does
Drag the headerMoves the panel. It remembers where you left it
Drag the bottom cornerResizes it, both directions. The step text scrolls inside
MinimiseCollapses to a pill in the same place, so the walkthrough does not jump to another corner
The step numberOpens the list of every step, to jump straight to one
Auto-advanceOn by default. Moves to the next step when you actually use the ringed control
Expand the pictureOpens the step's screenshot full size

The walkthrough follows you across pages: navigating mid-guide takes the panel with it and carries on at the right step. When a click takes you to a new page, the page-load step you have just performed is skipped, so you land on the step that is actually about the page in front of you.

Guide Mode running on a live page: the companion panel with a step and its screenshot, and a blue ring drawn around the button that step refers to
Guide Mode running on a live page: the companion panel with a step and its screenshot, and a blue ring drawn around the button that step refers to

6. When the control cannot be found

Beside the step number the panel says which it is — Ringed on the page, or Not on this page. A step with no control to point at, such as a page load or a scroll, says nothing there and shows no ring; press Next when you have done it.

Lens looks for the control by the selector recorded at the time, then its id, then a test id, label or field name, then its position in the page, and finally by the words on it. A guide recorded before Guide Mode existed, or one recorded in Plain mode, still names the control each step is about — and that name alone is often enough to find it.

It also keeps looking. A page that fetches its content draws its controls after the page has loaded, and a control behind a menu does not exist until you open that menu; the ring goes on the moment the control appears, however long that takes.

Guide Mode needs an ordinary website tab. Started from the dashboard or the editor — both extension pages, which Chrome does not allow any script into — it opens the page the guide starts on in a new tab.

7. The guide editor

The editor opens in its own tab and reads as a document: the sheet is the width of the exported page, and the steps run down it in order.

Step text is Markdown, and the toolbar offers exactly what Markdown can carry — bold, italic, strikethrough, code, highlight, links, bullet and numbered lists, task lists, tables, code blocks, rules, callouts and headings. Nothing else is offered on purpose: a font size or a colour would be something one of the two exports could not represent, and the same text is written to guide.md and rendered into guide.html.

KeyWhat it does
⌘B / ⌘IBold, italic
⌘KLink
⌘SSave
⌘clickOpen a link — a plain click inside editable text places the caret instead, as it does everywhere
The guide editor showing the dark chrome around a white document sheet, with numbered steps, their screenshots and the formatting toolbar
The guide editor showing the dark chrome around a white document sheet, with numbered steps, their screenshots and the formatting toolbar

8. Working on a step

Hover a step. On the step itself:

ControlWhat it does
Move up / Move downReorder. Numbers are rewritten, but file names never change — anything already exported still points at the right picture
Add step above / belowAn empty step to write by hand
DuplicateA copy, for when two steps differ by a word
Split into individual clicksBreaks an animated step back apart. Lossless — each click kept its own still
Copy stepText and picture together, ready to paste
DeleteThe step goes, and its picture is removed from the folder when you save

On the screenshot itself you get the same image tools as a still capture — crop, annotate, blur, colour and rotation — plus Replace image, which swaps in a different file while keeping its name. The crop tool opens with the crop the recording suggested already drawn, to accept or drag.

Nothing is written until you press Save. Closing with unsaved changes asks first, and undo covers everything, including a rewrite the assistant applied.

9. Exporting

FormatWhat you get
Self-contained HTMLguide.html with every picture inlined and no scripts. One file you can email, and ⌘P > Save as PDF is the PDF route
Markdownguide.md beside its screenshots, relative paths, ready for a repo or a docs site
Copy to clipboardRich text for pasting into Confluence, Notion or a document

Animated steps print their poster frame. When pasting into a document, check the pictures survived — editors disagree about pasted images and some drop them.

10. The assistant

The editor has a chat panel, and it stays shut until you have configured a model and a test has actually reached it. See AI features for setting one up.

  • Step and Guide attach material to this message. A question with nothing attached sends only the question.
  • Media additionally sends the screenshots of what you attached. Off by default — the files are not even read unless it is on.
  • The model switcher picks which of your configured models answers, per message.
  • Auto applies a proposed rewrite as it arrives rather than waiting for a click. Off by default, and undo reverses it.

If a request fails, the panel says so and stops. It has no offline imitation of a model — inventing documentation for software it cannot see is the one thing a documentation tool must never do.