Media
5 items
Description
Open any page in exact device viewports (locked size), rotate, theme preview, and take clean screenshots. 🌍 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.