I have had a very specific problem at work.
Whenever I need to walk someone through a process on a web app - onboarding a new team member, handing off a workflow, writing up a process doc - I end up doing one of two things: scheduling a screen share, or spending 20 minutes stitching together screenshots in a Google Doc while writing “click here, then click there” in a way that somehow still manages to be confusing.
Neither of those is a good use of anyone’s time.
A colleague pointed me to Scribe. It does exactly what I needed - record your steps, generate a guide. I used it a few times and it was great. Then I hit the paywall: you can create guides for free, but downloading them as a PDF costs money.
I respect the business model. I just didn’t want to pay for it.
So I built StepSnap.
StepSnap
What it does
StepSnap is a Chrome extension that records your actions on a webpage - clicks, scrolls, typing - and turns them into a step-by-step PDF guide with annotated screenshots. You hit record, do the thing you want to document, hit stop, give it a title, and download your PDF.
That’s it.
Each click triggers a screenshot with a visual ripple at the exact click position, so anyone reading the guide knows exactly where to look. The PDF is paginated, named after the recorded page, and ready to share.
It also handles multi-page flows. If you click a link and navigate to a new page mid-recording, StepSnap re-injects automatically and keeps going. You don’t have to restart.
What it doesn’t do
This is the part I’m most intentional about.
StepSnap has no backend. No account system. No analytics. No network requests whatsoever.
Everything - your screenshots, your steps, your data - lives in chrome.storage.local and gets discarded after you download the PDF. Your recordings never leave your browser. I didn’t build a sign-up flow because there’s nothing to sign up for.
I’ve used enough tools that quietly phone home or require an account just to save a file. StepSnap doesn’t do any of that. The extension is also open source, so you don’t have to take my word for it.
How I built it
I used Claude and Gemini as my co-pilots for this one. I had a clear picture of what I wanted - the tricky parts were the Chrome Extensions API, the client-side PDF generation, and getting the screenshot capture to work reliably across navigations. Having AI pair-programmers meant I could move fast without getting stuck in API docs rabbit holes.
The stack itself is pure vanilla JS. No Node.js, no webpack, no build step. You can load it unpacked directly in Chrome, or install it from the Chrome Web Store.
I kept it deliberately minimal - both because I wanted it to be easy for anyone to read and contribute to, and because I genuinely didn’t need anything more. The PDF generation runs client-side. There’s no complexity hiding under the hood.
Why I’m sharing this
Partly because I’m proud of it, and partly because I think a lot of us are stuck in the same loop - spending time describing processes instead of showing them.
If you write documentation, train teammates, or just need to capture how something works without a 10-step setup process, give StepSnap a try.
Install it from the Chrome Web Store - it’s free, and it takes about ten seconds to set up.
You can find the extension on the Chrome Web Store and the source code on GitHub.
./J