Samestate: one interaction, every device 📱💻

😩 The problem: one site, nine screens, one tab at a time

You ship a responsive layout. Then the ritual starts. Open DevTools, pick iPhone, tap the menu. Switch to iPad, tap the menu again. Switch to desktop, find the menu (it's a nav bar now), click it. Fill a form on mobile, then fill it again on tablet because the state didn't come with you.

Seeing one layout at a time isn't really the pain. The pain is that every interaction has to be repeated on every screen, and the bugs hide in the gaps between them.

So I built ✨ Samestate: you do something once, and every device does the same thing.

📱💻 What Samestate does

Paste a URL and Samestate opens it on nine devices at once, side by side on one canvas: iPhone 11 Pro, Pixel 3XL, a small 320px phone, Nexus 7, iPad Pro 11", MacBook Air, a 1080p desktop and a 1440p large display.

Then you just use the site. Samestate carries what you do to every frame:

Clicks and menus: open the hamburger on mobile and the desktop nav opens the matching menu.
Typing and forms: fill a field once and it's filled everywhere.
Scrolling: scroll to a section and every device lands on the same section, not the same pixel offset.
Hover and navigation: change page on one device and the others follow.

Each of these is a toggle, so you can sync only what you care about.

🧠 Same state, not same pixels

The tricky part is that the devices don't share a layout. A click on a desktop nav link has no pixel-equivalent on a phone where that link lives inside a drawer. So Samestate syncs logical state rather than coordinates: it works out what you interacted with (this menu, this field, this section) and finds the equivalent element on each device.

There are two modes:

Align: each device reaches the same logical state in its own layout.
Mirror: a straight replay, handy when layouts are close.

It also handles the boring-but-necessary bits: rotate all devices to landscape or portrait, reset zoom, and clear storage between runs.

🔍 Detect differences

Syncing shows you the site in the same state everywhere. Detect differences tells you what changed between those states. Pick a baseline device (say, Desktop) and Samestate compares every other frame against it, flagging differences in:

images and text that appear on one device but not another
fonts, sizes and spacing
tables that overflow or collapse
navigation that is hidden or unreachable
input modes and usability issues, like tap targets that are too small

On my own project, DEV·TV, the first run turned up 10 differences I'd never noticed while clicking through devices by hand. 😅

For now Samestate reports issues. In v2 I'd like it to start suggesting fixes.

🚀 Try it

Samestate runs as a Chrome extension, so there's no localhost or server setup. Install it, open any site, and a short guided demo walks you through syncing and difference detection (or skip it and go straight in).