Hey everyone!
I’m excited to share a milestone we’ve been working toward for a while now: every screenshot of the CloudCannon app in our documentation is now automatically generated. No more manually capturing, cropping, and uploading PNGs. Every image of the CloudCannon interface you see in our docs is produced by an automated pipeline — and it stays up to date without anyone lifting a finger. 
The problem we were solving
If you’ve ever maintained product documentation, you know the pain of screenshots. The UI changes, the screenshots don’t, and suddenly your docs are showing buttons that no longer exist or layouts that look nothing like what users actually see. It erodes trust. Users start second-guessing whether the instructions are still accurate, and they’re right to.
We had hundreds of screenshots across our documentation, all manually captured at various points in time. Some were current, some were months old, and a few were… let’s just say they were from a different era. Keeping them updated was a constant, tedious chore that pulled time away from improving the content.
What we built
We built a system we call DocShots — automated screenshots driven by our end-to-end testing framework, Toolproof.
Here’s how it works:
-
Toolproof tests drive the real app — each test loads the CloudCannon interface, navigates to the right page, sets up the right state (open modals, populate data, trigger warnings), and takes a screenshot at exactly the right moment.
-
Screenshots are captured as
.webpfiles with consistent resolution and predictable names likeCloudCannon-Documentation-Site-Dashboard.webp. -
The docs reference these by key using a custom
<DocShot>component, rather than hardcoded image paths. In production, images are served from an imgix CDN. During local development, they’re symlinked directly from the test output. -
Whenever we release changes to the app, the tests re-run. New screenshots are captured, and the docs update automatically. No manual intervention required.
This wasn’t a small effort:
-
~700 unique screenshots are now generated automatically
-
207 articles and guides across our user and developer documentation use the
DocShotcomponent -
179 Toolproof test files contain screenshot steps
The only images still using our legacy DocsImage component are ones that should — diagrams, illustrations, and screenshots of third-party services (like Stripe invoice pages or Okta configuration screens) that we can’t automate from within our own app.
Why this matters for you
If you’re reading our docs, you can now trust that:
-
The screenshots match what you’ll actually see in the app -
When we ship a UI update, the docs imagery updates too
-
The screenshots are consistent in style, sizing, and quality
-
We’re spending less time on screenshot maintenance and more time writing content
As an added benefit, all this work strengthens the stability of our app. Each DocShot required a Toolproof test to generate it, so thats 
179 more integration tests that allow us to ship updates with confidence.
Thank you 
This was a team effort and I couldn’t have done it without a lot of help. Huge thanks to everyone on the engineering team who built and maintained the Toolproof infrastructure that makes this possible, to the folks who helped write and debug hundreds of e2e test scenarios, and to everyone who reviewed PRs, and patiently fixed flaky tests. 
Special thanks to everyone who has flagged outdated screenshots over the years, either in this community or through our support channels — your reports were a big part of what motivated this push.
What’s next
With the screenshot pipeline in place, we can now focus on enriching the docs themselves — better explanations, more guides, and deeper coverage of advanced features — without worrying about imagery falling behind. Every new feature we document from here on out gets automated screenshots from day one.
If you spot anything that looks off, please keep letting us know (Documentation Feedback). The system is robust, but your eyes are sharper than any test. 
Thanks for reading, and thanks for being part of the CloudCannon community!