DevSnapKitSTUDIO

BEFORE & AFTER SCREENSHOTS

Make a before and after screenshot

Two screenshots next to each other explain a change faster than a paragraph. DevSnapKit’s Duo mode lays them out on one canvas with matching frames.

Compare two screenshots

Free · No watermark · Nothing uploaded

Two browser screenshots side by side, a light theme and a dark theme of the same page, on a dark gradient
Real export at 1200×630: Duo mode, Side by Side layout, Safari frames, Midnight Neon gradient.

How to build one

  1. Open the studio in Duo mode with the button above.
  2. Import the “before” screenshot, then add the “after” screenshot as the second image.
  3. Choose a layout: Side by Side for equal weight, Hero Split to emphasise the new version, Overlap Stack for a layered look, or Stacked Vertical for tall formats.
  4. Apply the same frame to both so the comparison is fair, then export.

Make the change obvious

Capture both states at the same size and zoom, from the same scroll position. Add short “Before” and “After” labels with the text tool, and keep the background neutral so the eye goes to the difference. For changelogs and release notes, 16:9 or Twitter/OG sizes work well; for a carousel slide, try 1:1.

Want a ready-made design? The template library includes a designed “Before & After” template with Pro. The Duo layouts above are free.

Good uses for a comparison

  • Redesigns — old and new UI at the same size.
  • Bug fixes — the broken state next to the fixed one in a release note.
  • Light vs dark mode — the example above shows one page in both themes.
  • Performance — two dashboards or reports with the key number visible.

Questions

Is the before-and-after layout free?

Yes. Duo mode and its four layouts are free. The designed Before & After template is part of Pro.

Can I mix a phone and a desktop screenshot?

Yes. Each image can have its own size; the layout places both on one canvas.

Can I add an arrow between them?

There is no arrow tool, but you can add text such as “→” or labels with the text tool.

FREE · IN YOUR BROWSER

Open the studio and try it with your own screenshot.

Compare two screenshots
Product Hunt gallery size1270×760 specs and a quick export.iPhone mockup generatoriPhone 17 Pro frame for app screenshots.X (Twitter) image sizeSizes for posts and link cards.CleanShot X alternativeBackgrounds and frames on any platform.