Share fully responsive website screenshots!
Say goodbye to pixel-based screenshots.*
Inspect HTML + CSS, modify it on the fly and present new ideas to your team.
*Don't worry, we keep a PNG image of every snapshot to remember the good ol' days.
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.
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.
.png)
Inspect DOM elements and create breakpoint-aware annotations.
Resize your snapshot and see how they stick to their element.
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.
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.
We won't spam you, we promise! ❤︎
Link your CodePen snippets and files to a snapshot. Edit HTML + CSS directly inside CodePen editor.
(Less, Sass, Stylus etc.)
See different versions / ideas in an interactive overlay mode and visually track changes. No more pixel-based diffing!
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.
.png)
