Self-updating screenshots

Screenshots that update themselves — and the crowd’s losing it

TLDR: A developer made help pages that refresh their screenshots automatically during a rebuild using simple embedded notes. Commenters love the low-friction approach, while others argue for tying it into tests or visual diffs—splitting the crowd between “keep it simple” and “automate everything,” with big time-saving potential.

One dev quietly shipped a “self-updating screenshots” magic trick for their help center, and the crowd basically yelled, “Finally!” The tool reads hidden notes in the docs, opens the app in a test browser, clicks the right buttons, and snaps fresh pics every rebuild. Translation: no more stale help-page images haunting your soul.

The top cheer? Keep it simple. User immanuwell gushes that sneaking instructions into the page as comments is a “dead-simple solution” that will outlive fancy tools. But immediately, the power users arrive: efortis flexes with visual “spot the difference” screenshots and drops a repo link to their setup (GitHub). Then the debate heats up: should this live inside testing? taspeotis wants screenshots generated during end-to-end tests (that’s a full app run-through), so updating a feature means updating a test and a pic in one move. Meanwhile, indie devs like furyofantares chime in with “my game engine already runs headless with a screenshot command” energy, basically saying: the more automations, the merrier.

Of course, there’s humor. LeoDaVibeci calls it a meme-in-waiting: “the neatest thing I’ve built that nobody will notice.” Drama level? Low-key, but the fault lines are clear: Team Simple vs Team Integrate All The Things. Either way, everyone agrees: auto-fresh screenshots are the glow-up your dusty docs need.

Key Points

  • Documentation screenshots are auto-generated and updated during Jelly’s build process.
  • Screenshot instructions are embedded in Markdown as HTML comments, processed via Redcarpet and rendered with ERB in a Rails app.
  • A Rake task uses headless Chrome through Capybara/Cuprite to navigate, interact, and capture screenshots.
  • Capture modes include element, full_page (with optional cropping), and viewport, with options like click, wait, crop, torn, and hide.
  • Running 'rails manual:build' processes Markdown in public/manual/ into ERB views and updates all screenshots and help pages.

Hottest takes

"dead-simple solution that'll age way better than any fancy external tooling" — immanuwell
"this should be a meme: \"I think this might be the neatest thing I’ve built in X that nobody will ever notice.\"" — LeoDaVibeci
"doing screenshots from the e2e test run" — taspeotis
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.