ANNOTATE.  IMPROVE.  Share.

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.

Try it now! No browser extension needed.

1. Drag this bookmarklet to your bookmark bar  👉

drag bookmarklet to your browser toolbar
Create website SNAPSHOT

2. Visit any website you like, or try one of these (1, 2, 3)

3. Click the bookmarklet to create your first responsive screenshot!

Troubleshooting: Make sure that the browsers Favorites Bar or Bookmarks Toolbar is enabled and showing. Older browsers don't support the drag&drop creation of bookmarklets. If this is the case, right-click the green button and select "Add to Favorites".

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!

Curious? Stay connected.

We won't spam you, we promise! ❤︎

Thank you! We'll keep you updated about SnapX.
Oops! Something went wrong.

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.