open this snapshot

What's a snapshot?

Think of it as a layer-based screenshot where you can still select and inspect one or more elements. 

– just as you do in Photoshop or Sketch.

Everyone is talking about responsive and adaptive websites nowadays (changing their layout depending on your device, e.g. Desktop - Tablet - Mobile)

But when it comes to screenshots we're still stuck in a pixel-based world: No layers, no breakpoints, no hover effects.

SnapX will capture fully responsive screenshots of your website or web app. We call it a Snapshot.

This is super helpful for everyone dealing with HTML + CSS, design teams and agencies who want to speed up their iterative workflow.

Responsive Annotations

Inspect DOM elements and create breakpoint-aware annotations.
Resize your snapshot and see how they stick to their element.

See Example Annotation

Live Sandbox

Test new ideas, fiddle around or fix bugs in real-time without access to the repository or project files.
Inject custom CSS and JS with ease.

View Snapshot Versioning

Showcase your ideas

Share a link with your (remote) team or client to gather feedback.
A full version history is included, so you can easily switch between different ideas.

SHow Multi-device preview

Let's rethink the iterative design process!

We had to sunset this project. 😥

Let's keep this page alive, for nostalgic reasons!

Upcoming features

CodePen Integration

Link your CodePen snippets and files to a snapshot. Edit HTML + CSS directly inside CodePen editor.
(Less, Sass, Stylus etc.)

Compare Mode

See different versions / ideas in an interactive overlay mode and visually track changes. No more pixel-based diffing!

Full Website Snapshots

Take a snapshot of your full web project and see how your edits will change multiple pages at once.

Easily spot broken user flows through multiple connected snapshots.