James Adam, a developer behind the Jelly help‑center, unveiled a lightweight system that auto‑updates screenshots whenever the UI changes. By embedding special HTML comments in Markdown, the tool instructs a headless Chrome runner to capture elements, full pages, or viewports and embed the images directly into the generated help pages. The result is a friction‑free workflow that keeps documentation current.

The process starts with a Rake task that logs into each demo team once, navigates to the target URL, and takes screenshots using Capybara and Cuprite. Developers can specify options—click a button, wait, crop, hide elements, or add a torn‑paper CSS clip‑path—so screenshots capture interactive states without manual intervention.

Markdown files live in public/manual/, organized by section, and the build step transforms them into ERB views in app/views/help/. The entire pipeline runs with a single command that first captures all images and then rebuilds the help site, eliminating stale images and the need for manual cropping or re‑taking screenshots after every UI tweak.

By keeping documentation and code in the same PR, developers can update features and help content together, reducing drift and ensuring that support articles always reflect the live product. This approach saves time, removes visual inconsistencies, and streamlines the release cycle for teams building web applications.