Documentation
Screenshot Snapshot
Every hot reload automatically captures a device screenshot and records the associated code diff. Browse your changes as a visual snapshot gallery, travel back to any snapshot, and export the entire history as a visual report to share with your design team.
Overview
The Screenshot Snapshot captures a device screenshot after every successful hot reload and pairs it with the git diff that triggered the reload. The result is a chronological strip of thumbnails in the IDE's tool window, giving you an instant visual history of your UI changes.
Getting Started
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 connected device.
By default, screenshots are saved to the project's .hotswan/screenshots directory. You can change this location in Settings → Tools → Compose HotSwan.
Gallery View
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 metadata (timestamp, build duration) and the git diff that produced the change. This lets you see exactly what code change led to each visual state.
Double-click any thumbnail or the detail image to open a full-screen viewer for pixel-level inspection.
Code Time Traveling
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 applies the inverse diff to your working files, restoring them to that snapshot's 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.
Design Bridge
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.
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.
Configuration
All Snapshot settings are available in Settings → Tools → Compose HotSwan.
| Setting | Default | Description |
|---|---|---|
| Screenshot format | PNG | PNG for lossless quality, JPEG for smaller file sizes |
| Max snapshots | 50 | Maximum number of snapshots to keep. Oldest snapshots are removed first. |
| Capture delay | 500 ms | Delay after a successful reload before capturing the screenshot. Increase if animations need time to settle. |
| Save directory | .hotswan/screenshots | Directory where screenshots and metadata are stored |