Screenshot Snapshot

To start using the Snapshot feature, navigate to View → Tool Windows → HotSwan and select the Snapshot tab. Click the Start button in the Snapshot toolbar to begin capturing. From this point on, every successful hot reload will automatically capture a screenshot from your Android device or emulator.

There is no default location — snapshot capture stays off until you choose a directory in Settings → Tools → Compose HotSwan. Pick one there before pressing play, or nothing will be written.

The Snapshot panel is split into two areas. The top section is a horizontally scrollable strip of screenshot thumbnails, ordered chronologically. Click any thumbnail to select it.

The bottom section is the detail panel. It shows the selected screenshot at full size alongside its metadata (timestamp, the number of classes applied, the files that changed) and the diff that produced the change. This lets you see exactly what code change led to each visual state.

The detail panel also has an image diff mode, which puts the before and after screenshots side by side with a computed delta between them, so a change that is easy to miss by eye shows up as pixels. The delta can be saved as its own PNG.

Double-click any thumbnail or the detail image to open a full-screen viewer for pixel-level inspection.

Each snapshot records the exact code state at that point in time. You can revert your source code to any previous snapshot and instantly see the UI update via hot reload.

Select a snapshot and click the Revert Code button. HotSwan restores the file contents recorded in that snapshot, so your working files go back to exactly that state. After reverting, HotSwan automatically triggers a hot reload so the device UI updates to match the reverted code. No manual save is required.

Code reverts are registered in the IDE's undo stack. Press Ctrl+Z (or Cmd+Z) to undo the revert and return to your latest code.

Bridge the gap between development and design. Export your snapshot history as a self-contained visual report that designers can review without any developer tools.

Click Export in the Snapshot toolbar. The generated HTML file embeds all screenshots and renders diffs with syntax highlighting. Share it directly with your design team for pixel-level review.

The report is not just a gallery. It has a Compare & Overlay view: pick any screenshot and compare it against the previous one, or drop in a design file and compare against that. A PNG, a JPG or a Figma export all work. Slider mode wipes between the two, overlay mode puts one on top of the other with an opacity control, which is how a spacing or color argument gets settled in one look instead of a thread.

The dropped design file never leaves the reviewer's machine. The report reads it in the browser, so nothing is uploaded anywhere.

Common use cases include sharing with designers for pixel-perfect UI feedback, attaching to code reviews to show the visual impact of changes, comparing implementation against design mockups, and archiving as development documentation.

Snapshots are reachable from an AI coding agent through the MCP server, which is what lets an agent check its own work instead of assuming an edit landed.

A reload returns the id of the snapshot it recorded. Passing that id to hotswan_screen_delta answers whether the screen actually changed, and by how much. hotswan_list_snapshots lists every recorded snapshot and says which ids can be compared at all, so an agent can reach a delta for an earlier reload rather than only the one it just ran.

One caution, for people and agents alike: selecting a variant is destructive. It keeps the snapshot you picked and deletes the others, including their image files. Export first if you want to keep the history.

All Snapshot settings are available in Settings → Tools → Compose HotSwan.