ViewGrid

Stop resizing your browser.

ViewGrid opens phone, tablet and desktop views side by side in one tab, scrolling together so you never miss a broken breakpoint.

Available on Chrome Web Store
→
Get it for Firefox Add-ons
→

Store review in progress — manual install below

Alt + Shift + V Launch instantly on any page • View all shortcuts
⚡ PLAYGROUND
SYNCHRONIZED SCROLL ENGINE
0%
⠿ Drag to Reorder
⠿ Phone (375) Leader
Mobile Stack

Fluid full-width column

Product Item 01
Product Item 02
Customer Testimonial
Newsletter Form
© 2026 Mobile View
⠿ Tablet (768) Leader
Catalog • Cart • Sign in
Tablet Dual-Column Layout

Expanded horizontal rhythm

Feature Card Alpha
Feature Card Beta
Feature Card Gamma
Analytics Metrics
© 2026 Brand Inc. Tablet View
⠿ Desktop (1280) Leader
Products • Solutions • Docs • Pricing
Desktop Multi-Column Canvas

Wide grid with sidebar & live diagnostics

Column 1
Column 2
Column 3
Data Stream
Audit Log
System Health
© 2026 Brand Global Workspace Desktop HD View
Performance & Architecture

Native browser performance. Not an 850 MB Electron app.

Most multi-screen testing tools are bloated Electron bundles or cloud proxies that swallow your machine's RAM. ViewGrid runs directly inside your browser engine with near-zero overhead.

RAM FOOTPRINT < 15 MB

Ultra-light memory footprint

Runs natively inside Chromium and Firefox. While Electron-based tools consume 850 MB to 1.2 GB of RAM, ViewGrid tests multiple breakpoints without slowing down your laptop or battery.

ViewGrid: 14 MB
Electron Tools: 850 MB+
SCROLL SYNC < 15 ms

Zero-lag bidirectional sync

Local broadcast channel mirrors mouse clicks, touch interactions, input forms, and 60 FPS scrolling instantly without feedback loops or frame hitching.

⚡ 60 FPS Smooth Scroll 🔄 Loop Echo Suppression 👆 Touch Cursor Emulation
100% PRIVATE 100%

Local-first & privacy safe

No remote proxy servers, no telemetry, no tracking pixels. Test staging servers, localhost, and authenticated sessions behind VPNs with complete peace of mind.

🔒 Zero Cloud Proxying 🛡️ Preserves Local Cookies 🌐 Works Completely Offline
Interface tour

Explore the workspace modes.

🎯 Design Handoff & Pixel-Diff: Compare live breakpoints against Figma mockups with zero pixel drift →
viewgrid://workspace
ViewGrid Workspace
Multi-device responsive workspace with synchronized scrolling
View phone, tablet, and desktop side by side in one tab. Zoom, pan, and rearrange frames freely.
Full size preview
Design Handoff & Pixel-Diff

Zero pixel drift between Figma and production.

Stop eyeballing padding and font weights. Overlay your Figma mockups directly over live responsive breakpoints to inspect sub-pixel alignment, typography baselines, and element sizing.

🎨 Figma Design Spec (375px)
Menu
48px padding

Minimalist Architecture

Crafting spatial structures with timeless natural materials.

View Projects 16px gap
⇄
💻 Live Rendered DOM (375px)
Menu
✓ 48px Match

Minimalist Architecture

Crafting spatial structures with timeless natural materials.

View Projects ✓ 0px Drift
📐

Pixel-Diff Curtain & Opacity

Drag the split handle or adjust overlay opacity from 0% to 100% to catch minute kerning differences, line-height discrepancies, or 1px margin misalignments.

🎨

Figma Frame Import & Overlays

Load PNG or SVG design mockups directly into any viewport frame as a translucent guide layer while interacting with your live code.

🤝

Faster Design QA Cycles

Take screenshot comparisons that designers can verify in seconds. Eliminate endless back-and-forth Slack messages about button alignment and font sizes.

Why

Testing one screen at a time is why responsive bugs make it to production.

You open browser DevTools, switch to device mode, drag the window handle, and squint at 375 pixels. You fix a broken header on mobile, push your commit, and only later realize that your fix pushed the navigation off-screen at 840 pixels. Nobody has the patience to manually click through eight presets for every CSS change. When you test screens one by one, you miss the transitions where layouts actually break.

DevTools Device Mode

One screen at a time. Dragging the window border breaks your focus. You check phone, forget tablet, and miss the mid-tier breakpoint bugs.

ViewGrid Workspace

Phone, tablet and desktop stay side by side. Scroll once, and all three follow. Layout shifts and alignment bugs are impossible to miss.

How it works
01

Open the workspace

Click ViewGrid in your browser toolbar from any tab you want to inspect. A dedicated, distraction-free workspace opens immediately.

02

Type any URL or localhost

Test live production websites, staging links, or your local dev server at localhost:3000. No tunnels, cloud proxies, or server setup required.

03

Pick device presets

Choose standard phones, tablets, and laptops, or specify custom pixel bounds. Flip orientations between portrait and landscape with one click.

04

Scroll and click once

Interact with any device. Every other viewport replicates your scroll and click coordinates in real time without feedback loops or echo lag.

STEP 01 • WORKSPACE INVOCATION

Websites don’t exist at one screen size. Why test them like they do?

Features

Everything needed to inspect responsive craft.

Device presets
Curated dimensions for popular phones, tablets, and laptops, plus freeform custom pixel inputs.
375 × 812 • 768 × 1024 • 1280 × 800
Split-diff curtain
Superimpose two viewports and drag an optical divider to detect 1-pixel font jumps or wrapping shifts.
↔ Draggable Optical Divider
Per-viewport user-agent
Spoof mobile and tablet User-Agent strings per frame so server-rendered mobile HTML and assets load correctly.
Mobile UA / Touch Emulation
Works on protected sites
Safely strips X-Frame-Options and CSP headers solely for sub-frames inside the ViewGrid tab.
DNR • webRequest Sub-Frame Filter
Full-canvas screenshots
Capture individual viewports or the entire multi-device workspace into full-resolution PNG files.
One-Click PNG Export
100% Local processing
Zero analytical tracking, zero external beacons, zero remote servers. Works offline and on private VPNs.
Localhost • VPN Safe • Zero Telemetry
Keyboard-first workflow
Launch workspace with Alt+Shift+V / ⌥⇧V, toggle compare diff with D, show cheatsheet with ?
Alt+Shift+V • D • ?
Compare

Catch layout bugs between breakpoints.

Drag the curtain handle below to compare how the layout renders at 375px versus 1280px. Notice where text drops awkwardly or buttons misalign.

[375px MOBILE BREAKPOINT]

Single-Column Header

Hamburger menu triggered. Navigation collapsed into drawer. Action button full width.

Button: Full Width Mobile CTA
[1280px DESKTOP BREAKPOINT]

Expanded Horizontal Nav

Full horizontal links displayed: Products • Docs • Pricing • Changelog. Sidebar pinned to the right.

Action Primary
Secondary Link
↔
Header handling

Works on sites that block iframes.

Production websites usually send X-Frame-Options: DENY headers to prevent clickjacking. Standard iframe testing tools fail completely and show blank boxes. ViewGrid runs as an audited browser extension, safely stripping these blocking headers strictly for the sub-frames inside your active ViewGrid workspace tab. Your other browsing tabs remain fully protected.

Standard iframe tool: Blocked by X-Frame-Options
ViewGrid workspace: Allowed (Scoped Sub-Frame Rule)

Zero cloud proxy servers. Network rules execute locally in Chromium DNR and Firefox webRequest.

Use cases

Built for daily frontend rhythm.

Scroll through the scenarios where ViewGrid replaces manual browser gymnastics.

Checking a breakpoint

Write a CSS media query, hit save, and see mobile, tablet, and desktop redraw instantly without touching DevTools.

CSS • Layout Tuning

QA before release

Run through a checkout flow or registration form once. Verify input styling across three screen widths simultaneously.

Pre-Flight • Forms

Designer & Dev handoff

Compare Figma breakpoint specifications against live production implementation using the optical split-diff slider.

Figma • Spec Verification

Testing a localhost app

Works right out of the box with localhost:3000, Vite dev servers, Next.js, Rails, or Docker containers.

Localhost • Dev Server

Client review & demo

Take one comprehensive full-canvas screenshot showing your client how their new site responds across all screen sizes.

Exports • Client Delivery
Install

Add ViewGrid to your browser.

ViewGrid is free to install. Everything executes locally in your browser sandbox.

Works in Chrome, Edge, Brave, Arc, Opera, and Mozilla Firefox.

Next.js Vite Remix SvelteKit Astro Nuxt Rails Docker localhost:3000 127.0.0.1
Available on Chrome Web Store
→
Get it for Firefox Add-ons
→

Store review in progress — manual install below

Install manually (Chromium ZIP)

If you prefer not to wait for store registry approval, you can sideload the extension archive directly:

  1. Download and unzip viewgrid-0.1.0-chromium.zip.
  2. Open chrome://extensions in your browser and enable Developer Mode.
  3. Click "Load unpacked" and select the unzipped directory.

Firefox users: store installation via AMO is the supported route.

FAQ

Frequently asked questions.

Does ViewGrid collect any personal data?

ViewGrid doesn't collect, transmit or store your data. Everything runs in your browser. We have zero servers, zero analytics trackers, and zero telemetry.

Can I test local development servers?

Yes. ViewGrid works directly with localhost:3000, 127.0.0.1, internal VPN addresses, and staging environments without requiring reverse proxies or tunnels.

Why doesn't synchronized scrolling get stuck in loops?

ViewGrid stamps scroll events with sequence identifiers and an active suppression window. When frame A broadcasts a scroll offset, frames B and C apply it without echoing the event back.

Which browsers are supported?

Google Chrome, Microsoft Edge, Brave, Arc, Opera, and Mozilla Firefox / Firefox Developer Edition.

Can I take screenshots of my viewports?

Yes. You can capture individual viewports or the entire multi-device canvas into full-resolution PNG files with a single click.