Viewport Lab

About

🌍 The Story Behind Viewport Lab

Viewport Lab began life as a side-project: Flutter Responsive Tester.
As a Flutter developer, I needed a simple way to lock a page into real device sizes, rotate between orientations, and quickly check how my app responded — all without the hassle of external emulators.

But something unexpected happened.
Frontend devs from other ecosystems (React, Vue, Angular, Svelte, plain HTML/CSS) started using it too. The problem wasn’t just Flutter — it was responsive testing itself.

That’s when the project evolved and got a new name: Viewport Lab.
Because this isn’t just for Flutter anymore — it’s for everyone building for the web.

✨ Key Features
👉 Exact Device Viewports - Open pages in locked mobile, tablet, or desktop sizes - Supports iPhone, iPad, Android, and custom devices - Save, edit, or delete your own devices

👉 Rotation (Portrait & Landscape)  - Test both orientations instantly with a single click

👉 Theme Preview (System / Light / Dark)  - Emulate OS-level theme preferences Check if your site respects `prefers-color-scheme`,  Filter fallback included for stubborn sites

👉 Screenshot Capture -Take clean screenshots (toolbar auto-hides during capture) - Save for bug reports, documentation, or demos

👉Multi-Device Launch  - Open multiple viewports side by side - Compare layouts across devices in real-time

👉 Precision Mode (Dev Build) - For advanced developers and testers - Emulate User-Agent strings, DPR, touch, geolocation, network throttling, reduced-motion - Powered by Chrome’s DevTools Protocol

👉Custom Devices Add your own screen sizes - Delete old entries with one click (trash icon) - Lightweight and Fast - No external API calls - No cloud dependency - Works offline

🖼️ Who Uses Viewport Lab?

👉 Flutter Developers

👉 Verify breakpoints in Flutter web apps

👉 Take quick screenshots for stakeholders

👉 Frontend Developers

👉 Test responsive CSS, flex/grid, media queries

👉 Verify design systems across screen widths

👉 UI/UX Designers

👉 Preview mockups and live sites in mobile/tablet frames

👉 Test color schemes with light/dark toggle

👉 QA Testers

👉 Quickly validate responsive bugs without heavy simulators

👉 Export screenshots to bug trackers

👉 Agencies & PMs

👉 Demo websites in “real device” views during client reviews

🎯 Why Use Viewport Lab Over Chrome DevTools?

Chrome DevTools already has “Device Toolbar” — so why Viewport Lab?

✅ Cleaner workflow — no switching panels, just a dedicated viewport window
✅ Screenshot-ready — toolbar hides for pixel-perfect screenshots
✅ Theme emulation — quick light/dark toggles
✅ Multi-window support — view multiple devices side by side
✅ Custom devices — save and reuse your own presets
✅ Lightweight — no console clutter, no inspector overhead

Viewport Lab is built for speed, focus, and convenience.

🔒 Privacy Promise

Viewport Lab is fully local-first:

✅  No tracking

✅  No analytics

✅  No external servers

✅  No data collection

✅  Your websites, screenshots, and test results never leave your browser.

🛠️ Roadmap

Bulk screenshots (export multiple devices in one click)

Companion app for WebKit & Firefox previews via Playwright

Optional cloud testing for Safari/iOS devices


👉 Install Viewport Lab today. Whether you’re building in Flutter, React, Vue, Angular, or plain HTML/CSS, it’s the fastest way to check your responsive designs.