How to Create Step-by-Step Guides with Screenshots for Free (Scribe Alternative)

#productivity #webdev #documentation #chrome

If you've ever written a "how to do X" doc — a bug repro, an onboarding SOP, a code walkthrough — you know the tedious part isn't the words. It's the screenshots. Take a shot, crop it, draw an arrow, paste it, repeat for step 7, realize you missed a click, redo half of it.

Tools like Scribe automate this, but the popular ones send your captures to their servers and gate the basics behind an account. Here's how to make illustrated step-by-step guides that stay in your browser — the manual way, and a faster free option.

The manual way (screenshots + a doc)

You can do this with zero tools:

Press your OS screenshot shortcut on each step
Crop each image
Drop them into a doc, in order
Annotate the important spot (arrow or box) in an image editor
Write the caption for each step

It works for a 3-step guide. Past that it falls apart: renumbering when you insert a step, re-shooting when the UI changes, and keeping 15 loose PNGs in sync with 15 captions. I gave up on this for anything longer than a quick Slack message.

The faster way: Procshot

Procshot is a free Chrome extension that records what you do in the browser and builds the guide for you.

Click the toolbar icon and hit record
Do the task normally — click, type, navigate
Stop recording

Procshot auto-captures each click, form input, and navigation, and turns it into an illustrated step-by-step guide — screenshot plus a written step for every action, no manual capturing.

Then you can:

Annotate screenshots with arrows, boxes, blur (for hiding secrets), and text labels
Export to PDF (4 templates), Markdown (drops straight into Notion / Confluence / GitHub Wiki), or a self-contained HTML file
Keep it local — your guides are stored in your browser (IndexedDB); no Procshot account required

Where it earns its place

Bug reports — record the repro once, export a numbered guide with exact steps
Onboarding SOPs — "how to set up the dev environment" without re-shooting every quarter
Code walkthroughs and handoffs — a Markdown export that lives next to the code
Support docs — a clean PDF you can hand a customer

One honest scope note: Procshot makes screenshot-based guides, not video. If you specifically need a screen recording, it's the wrong tool. For written docs that people actually skim, screenshots-with-steps beat a 4-minute video most of the time — and this is the part I use it for the most.

The blur tool is the underrated one. I annotate a guide with real data on screen, blur the account name, and export — no separate editor.

Pricing

Free: 5 guides per month, all export formats, all annotation tools
Pro ($4.99/month): unlimited guides, custom branding, PDF templates, priority support