Mobile Preview by MTech System

Preview any web page inside realistic phone, tablet, and desktop frames — right inside VS Code.

Built for developers who want to sanity-check responsive layouts (including Flutter web builds) without leaving the editor or spinning up a heavy emulator.

Features

• Everything in the panel, no Command Palette required — device, frame color, compare mode, favorites, and auto-reload are all controlled by dropdowns, buttons, and a toggle right in the toolbar. Every action is also available in the Command Palette for keyboard-driven workflows.
• Collapsible toolbar — hide the URL bar and controls with one click on the thin handle bar beneath them, for a clean, full-panel view of just the device.
• 23+ devices — iPhones, Pixels, Samsung Galaxy phones and folds, Surface Duo, iPads, Android tablets, and common laptop/desktop sizes.
• 6 frame color skins — Midnight Black, Space Gray, Arctic Silver, Rose Gold, Forest Green, Ocean Blue.
• Accurate viewport rendering at any zoom level — the page inside the frame always sees the device's true logical viewport, even when the panel is too small to show it at 100%. Fit-to-window scaling is a purely visual CSS transform on top, so fonts, padding, and icons never render oversized just because your editor panel is narrow.
• Realistic status bar — live clock, signal, and battery icons that reserve real space at the top of phone/tablet frames, like an actual device, so they never overlap your app's own header.
• Notch / Dynamic Island rendered accurately per device.
• Properly contained scrolling — scrolling inside the device screen never bleeds out to scroll the whole panel.
• Clean device chrome — the URL bar lives above the phone, not inside it, and there are no overlaid labels on the frame itself, so the device alone looks like a real phone running your app (great for screenshots).
• Custom touch cursor — hovering the device frame shows a hand/pointer cursor instead of the default arrow, for a more phone-like feel.
• Rotate — flip between portrait and landscape instantly.
• Compare mode — view two devices side-by-side at once.
• Recent URLs — your last 5 URLs are remembered automatically and suggested as you type, no need to save a favorite just to switch back.
• Favorites — manually save and reopen a device + URL combination.
• Live reload on save — the preview refreshes automatically every time you save a file (toggleable).
• Export guidance — the Export button explains how to capture a pixel-perfect screenshot of the loaded page itself.

Getting started

1. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P).
2. Run "Mobile Preview: Show".
3. Type a URL into the bar at the top (e.g. localhost:3000 or any live site) and press Go.

Commands

A note on screenshots

Browsers don't allow capturing pixels from a cross-origin page inside an iframe (this is a security feature, not a limitation of this extension). For a pixel-perfect screenshot of the page itself, use your browser's own DevTools "Capture screenshot" feature, or your operating system's screenshot tool on this panel.

A note on Flutter web (and other responsive) sizing

The device frame can be scaled down to fit your panel, but the page loaded inside the iframe always keeps the device's true, unscaled logical viewport — the panel-fit scaling is applied as a visual CSS transform on top, not by shrinking the iframe's real pixel dimensions. This matters because Flutter's web renderer (and any responsive layout) reads the iframe's actual viewport size to decide how big to lay out fonts, padding, and widgets; if that viewport were narrower than the target device, everything would render oversized for the space it's actually shown in.

If you still see oversized text or elements, it's worth checking your index.html for an explicit <meta name="viewport" content="width=device-width, initial-scale=1"> tag, and confirming your widget tree isn't overriding MediaQuery with a fixed pixel density assumption.

Troubleshooting blank screens

If the preview stays blank, it's almost always one of two causes:

1. The site blocks being framed. Google, YouTube, Facebook, and many major sites deliberately block embedding (via X-Frame-Options / frame-ancestors headers) to prevent clickjacking. This is enforced by the site itself — no setting here can override it. Open the URL directly in your browser instead.
2. Nothing is actually running at that address. This is the most common cause with local dev servers. In particular, flutter run -d chrome picks a random port every time unless you specify one — so localhost:3000 may be stale from a previous session. Check your terminal output for the actual URL Flutter printed, or pin a stable port:

   flutter run -d chrome --web-port 3000
   

   Then localhost:3000 will work consistently.

Using this with Flutter

This extension previews web pages, not native Flutter builds. To preview a Flutter app here, run it in web mode:

flutter run -d chrome

This serves your app at a local URL (e.g. http://localhost:PORT) that you can paste into Mobile Preview. Note that Flutter web rendering can differ slightly from native iOS/Android, but it's a solid way to check layout and responsiveness without an emulator.

Settings

About

Developed by Aubrey Macpherson Kuseli Jnr, MTech System.

Questions, bugs, or feature requests: kuseli13@gmail.com

License

MIT — free to use, modify, and share.