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 on the current page after starting it, then turns them into a single annotated PNG with numbered markers and arrows.
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:
- Click here.
- Then click here.
- 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 the current page
- adding numbered step markers
- drawing arrows between steps
- undoing accidental clicks
- showing a preview before export
- downloading the final result as a PNG
The output is a single image you can 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 visible page to generate the PNG, and the final 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.
Current Limitations And What Might Come Next
The main limitation right now is that ClickTrek only supports single-page workflows.
If you navigate away to another page, the current capture ends. Since many real workflows span multiple pages, this is one of the biggest things I am thinking about for future versions.
Other features I am considering:
- multi-page workflow capture
- blur or redaction tools for sensitive data
- PDF and Markdown export
- copy-to-clipboard export
- custom marker colors and styles
I am still figuring out which of these would add the most value without making the tool feel heavy.
Try It
ClickTrek is available on the Chrome Web Store:
Get ClickTrek on the Chrome Web Store
I would be interested to hear how people currently document quick browser workflows for bug reports, tutorials, internal docs, or handoff notes.
Top comments (2)
Nice work! seems a lot easier than a screen recording for a quick tutorial.
Thank you, I appreciate it! That was the goal: make quick tutorials easier without recording a video or manually annotating screenshots.