A production-quality responsive website testing platform for developers.
Paste a local or public URL, select phone / tablet / laptop / desktop viewports, and see exactly how your website behaves at that size.
- True viewport testing — iframe uses actual CSS width/height so media queries work correctly
- Localhost & LAN support —
http://localhost:5173,127.0.0.1,192.168.x.x - Device presets — Mobile, Tablet, Laptop, Desktop with realistic sizes
- Custom viewports — any width/height 200–5000px
- Orientation — Portrait / Landscape
- Zoom — scale the preview while keeping real viewport dimensions
- Device frames — optional phone/tablet/laptop chrome
- Ruler & grid overlays
- Safe-area simulation for mobile
- Breakpoint toolbar
- Keyboard shortcuts (R, F, +, -, 0, Esc)
- Recent URL history (localStorage)
- Projects dashboard (localStorage demo; Prisma/PostgreSQL ready)
- Dark / light theme
- Responsive UI itself works on mobile
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS v4
- Lightweight custom UI components
- TypeScript validation helpers
- Local browser storage for demo projects/history
npm installCopy .env.example to .env and fill in values if you enable database features:
cp .env.example .envnpm run devOpen http://localhost:3000.
- Start your project (e.g. Vite or another Next app):
npm run dev-
Copy the URL (e.g.
http://localhost:5173) -
Open Responsive Tester → paste the URL → Load
-
Select a device (Mobile, Tablet, …)
To test from another device on the same network:
npm run dev -- --hostname 0.0.0.0Then use your machine’s LAN IP, e.g. http://192.168.1.10:5173.
npm run build
npm startsrc/
├── app/ # Routes (landing, tester, dashboard, login, signup)
├── components/
│ ├── ui/ # Button, Input, Card, Tooltip
│ ├── tester/ # UrlBar, DeviceSelector, PreviewFrame, …
│ ├── navbar/
│ └── shared/
├── data/devices.ts # Device presets (easy to extend)
├── lib/ # utils, validation
└── types/
| Key | Action |
|---|---|
| R | Refresh |
| F | Fullscreen |
| + | Zoom in |
| - | Zoom out |
| 0 | Reset zoom |
| Esc | Exit fullscreen |
Some sites set X-Frame-Options or CSP frame-ancestors and cannot be embedded. The app shows a clear error and does not attempt to bypass browser security.
Screenshots of cross-origin iframes are blocked by the browser; use OS tools or open the site in a new tab.
MIT