One Screenshot Is Sometimes Better Than a Screen Recording

Updated October 2026: ClickTrek now records workflows across several pages. I've updated the details below to match the current version.

I kept running into the same small workflow problem.

Whenever I needed to explain a browser process, report a UI bug, or document a quick internal step-by-step flow, the routine was usually the same: take a screenshot, open an image editor, draw arrows, add step numbers, export the image, and then send it.

None of that is especially difficult, but it adds friction when the goal is just to explain something quickly.

So I built a small Chrome extension called ClickTrek.

ClickTrek records the clicks you make after starting it, then turns them into annotated screenshots with a numbered marker and a highlight box for each click.

The Problem I Wanted to Solve

There are already many good tools for documentation, screenshots, and screen recording. Loom, Scribe, Tango, Snagit, CleanShot, and similar tools are useful for full walkthroughs, polished docs, or more detailed editing.

But I wanted something narrower.

Sometimes a video or hosted walkthrough is more than I need. I just want one image that clearly shows:

1. Click here.
2. Then click here.
3. Then click here.

That specific use case is what ClickTrek is focused on.

How It Works

ClickTrek is designed for quick browser workflow documentation.

It currently handles:

• recording clicks on one page or across several pages
• adding numbered step markers
• drawing a highlight box around each clicked item
• undoing accidental clicks
• showing a preview before export
• downloading one PNG per screen, or a ZIP when there are several

The output is one image per screen, ready to drop into a bug report, GitHub issue, Slack message, internal wiki, tutorial, or handoff note.

Why I Kept It Simple And Local

The first version is intentionally small. I wanted the flow to be easy to understand: open it, start recording, click through the workflow, preview, and export.

There is no account setup, no cloud upload, and no hosted workspace.

ClickTrek runs locally in the browser. It captures the page in the browser to generate the images, and the export is saved through the browser download flow.

One important note: anything visible on the page can appear in the exported image, so the preview step matters. You should review the image before sharing it.

ClickTrek is not trying to replace full documentation platforms or screen recording tools. It is meant for the smaller moments where a quick annotated image is enough.

What Changed Since This Post

Multi-page capture is here. Recording now continues when a link opens the next page, and the step numbers keep running. The limits today: it records one tab at a time, and Chrome's own pages and the Chrome Web Store can't be recorded.

Redaction, PDF export and marker colors have shipped too, in the optional Pro version. Markdown export and copy-to-clipboard aren't part of ClickTrek today.

If there's something you'd like it to do next, tell me in the comments.

Try It

ClickTrek is free on the Chrome Web Store (free exports carry a small watermark):

Get ClickTrek on the Chrome Web Store

Guides and examples: clicktrek.pages.dev

I would be interested to hear how people currently document quick browser workflows for bug reports, tutorials, internal docs, or handoff notes.

Comments

[Ryan Sadowski]

Nice work! seems a lot easier than a screen recording for a quick tutorial.

[pBinder]

Thank you, I appreciate it! That was the goal: make quick tutorials easier without recording a video or manually annotating screenshots.