Every responsive bug I've shipped got through the same way.
I'd build a page on desktop. Then I'd drag the browser narrow, click through the flow, drag it to tablet width, click through again, open DevTools device mode, pick an iPhone, click through again... and somewhere around the fourth pass I'd get lazy and skip a step. That's always the step where the table overflows or the CTA is a 20px tap target.
So I built Samestate: a Chrome extension that shows your site on many devices side by side and keeps them all in the same state.
👉 https://github.com/shouvik12/samestate
📈 The first demo hit 3.5K views in under 10 hours on Reddit, with a ~90% upvote ratio. Clearly I'm not the only one stuck in the resize loop.
Samestate
Test your site on every screen size at once, and see what breaks.
Click once on any device. Every phone, tablet and desktop follows to the same state, even when the layouts are completely different.
· Watch the 36s video · Install the Chrome extension · How it works · Release notes
Why Samestate
Responsive testing usually means resizing one window, or clicking through the same flow again on every device Samestate puts every screen size side by side and keeps them in the same logical state. A desktop Products click opens the phone's hamburger menu first, then Products. Then it measures every device against the desktop and tells you what broke: sideways scroll, tables wider than the screen, tap targets that are too small, text that disappears.
One interaction, every device. Then a report of what's different.
Highlights
| 🔁 Logical sync | Clicks, links, scrolls, dialogs and toggles |
The core idea: one click, every screen
Most multi-device previewers just show your URL in several iframes. That's useful for about five seconds. As soon as you interact, the screens drift apart: you open a modal on one, and the others are still on the homepage.
Samestate syncs logical state rather than raw clicks. That matters because your layouts aren't the same:
- Open the desktop nav → the phones open their hamburger menu
- Expand an accordion on tablet → it expands on every device
- Navigate to a page → every screen follows
You click through your flow once and watch every breakpoint react at the same time.
It tells you what broke
Looking at ten screens at once is great until you have to spot what's wrong. So Samestate compares each device against desktop and flags common responsive breakages:
- 👆 Small tap targets: buttons and links too small to hit on touch
- ↔️ Overflowing tables and content that causes horizontal scroll
- ✂️ Cut-off text that's clipped or hidden
- 🖼️ Stretched images with broken aspect ratios
- …and more
There's also side-by-side page comparison, themes, notes, and exportable reports, so you can hand a list of issues to whoever's fixing them (including future you).
What it doesn't do (yet)
Right now Samestate reports issues; it doesn't fix them. Auto-fixing is the plan for v2.
It's also not on the Chrome Web Store yet, so for now you install it from GitHub:
- Clone or download the repo:
git clone https://github.com/shouvik12/samestate - Go to
chrome://extensions - Turn on Developer mode (top right)
- Click Load unpacked and select the folder
There's a guided demo built in, so you can see the sync and breakage detection working before pointing it at your own site.
Why "Samestate"?
Because that's the whole point. Every device, in the same state, at the same time. Responsive testing shouldn't be a loop you repeat per screen size.
I'd love your feedback
It's free, and I'm actively building it. The most useful thing you can send me:
What responsive breakages do you hit that it doesn't catch yet?
Drop them in the comments or open an issue on GitHub. They go straight onto the detection list.
⭐ If it saves you a resize loop, a star on the repo helps a lot: https://github.com/shouvik12/samestate
