Mobile Preview - Phone & Tablet Simulator installs statistics

Mobile Preview — Phone & Tablet Simulator for VS Code

See your web app on an iPhone, Android phone or iPad, right next to your code. Mobile Preview puts your localhost in a realistic device frame inside VS Code (and Cursor, Windsurf, VSCodium): live reload, accurate viewports, landscape mode, focus mode. No browser switching, no DevTools device toolbar, no emulator to boot.

<!-- DEMO GIF: place the screen recording here, e.g. <img src="https://mobilepreview.lirobi.com/images/demo.gif" alt="Mobile Preview demo" width="760"> -->

Without Mobile Preview	With Mobile Preview
Resize the browser window or open DevTools device mode	One panel next to your code, already on the right device
Alt-tab on every change	Changes appear as you type
Guess what a real iPhone shows	Real device dimensions, notch, Dynamic Island and status bar

Works with React, Next.js, Vue, Vite, Angular, Svelte, Astro, Remix, Gatsby — any framework that runs in a browser.

<table> <tr> <td><img src="https://mobilepreview.lirobi.com/images/new-iphone16pro.png" alt="iPhone 16 Pro Preview" width="380"></td> <td><img src="https://mobilepreview.lirobi.com/images/new-iphone16prolandscape.png" alt="iPhone 16 Pro Landscape mode" width="380"></td> </tr> <tr> <td><img src="https://mobilepreview.lirobi.com/images/new-s25ultra.png" alt="Samsung Galaxy S25 Ultra Preview" width="380"></td> <td><img src="https://mobilepreview.lirobi.com/images/new-galaxytabs6.png" alt="Samsung Galaxy Tab Preview" width="380"></td> </tr> </table>

Why developers love it

• Zero setup — auto-detects your dev server (React, Vue, Next.js, Vite, Angular, Svelte, and more). Open the panel, it's already loaded.
• Side-by-side — code on the left, phone on the right. Changes appear as you type.
• Accurate viewports — each device frame uses real pixel dimensions, so what you see matches what users see.
• Landscape mode — flip any device sideways with one click. Dynamic Island, notch and status bar all rotate correctly.
• Focus mode — one click hides the toolbar so only the phone is left, centered and as large as the panel allows. Esc brings the toolbar back.
• Recent URLs — the address bar remembers your last 12 URLs in a scrollable list, filtered as you type.
• Favorites with shortcuts — save your go-to devices and switch with ⌘1–5.
• Framed screenshots — export your page inside the device frame as a PNG (portrait or landscape, transparent or solid background, 2× or 3×). 3 free captures, then Pro. Uses the Chrome, Edge, Brave or Chromium already installed on your computer.
• Works with any URL — local dev server, staging, production. If it loads in a browser, it works here.

Export framed screenshots

Click Capture to export your page inside the current device frame as a PNG, in portrait or landscape. Choose with or without the frame, a transparent or solid background, and 2× or 3× resolution. Save it to a file or copy it. Your first 3 captures are free; unlimited captures are part of Pro.

<img src="https://mobilepreview.lirobi.com/images/demo-capture.gif" alt="Capture menu: frame, background and scale options, then the exported PNG (sample page)" width="600">

Screen recording of the Capture feature on a sample page. Capture uses the Chrome, Edge, Brave or Chromium already installed on your computer (nothing is downloaded). If none is found, set mobile-preview.screenshotBrowserPath.

The toolbar at a glance

Control	What it does
Device name	Opens the device list, with search. Pro devices are tagged PRO
Rotate	Switches between portrait and landscape
Focus	Hides the toolbar to show only the phone (Esc to leave)
Capture	Exports the phone as a PNG (3 free, then Pro)
…	Favorites and quick switch (⌘1–5)
PRO / Upgrade	License window: unlock Pro, view your license, deactivate this computer
Address bar	Type a URL, pick a recent one, detect your dev server (magnifier), reload

Quick Start

1. Install the extension
2. Start your dev server (npm run dev, yarn start, etc.)
3. Ctrl+Shift+P → Mobile Preview: Show
4. The extension detects your server automatically (if not, enter the url in the address bar)

Free vs Pro

Free — no credit card, no time limit

• 3 iPhone devices
• 1 saved favorite
• 3 landscape previews
• Auto-detection of your dev server, live reload, framework badge
• Framed screenshot export (PNG, 2× or 3×), 3 free then Pro

Pro — €6.99, one-time payment, lifetime access (no subscription)

• 38 devices — all iPhones, Android phones, foldables, iPads and Android tablets
• Up to 5 saved favorites with ⌘1–5 shortcuts
• Landscape mode for all devices
• New devices added regularly at no extra cost

Get Pro — €6.99 →

What's New in v3.2

• Focus mode is a button in the toolbar, and the phone stays centered when the toolbar is hidden.
• Rotate has a clearer icon and label.
• Recent URLs under the address bar.
• Deactivate this device from the license window, to move your license to another computer.
• Captures: 3 free, then Pro (same rule as landscape).
• One consistent behavior for every menu and window: click outside or press Esc to close.
• The license window now follows your VS Code theme.
• Device presets were removed: applying one only switched to its first device.

What's New in v3

• Landscape mode — flip any device sideways with one click. Dynamic Island, notch and status bar all rotate correctly.
• Realistic phone frames — pixel-accurate bezels, Dynamic Island, notch and hole-punch camera, authentic status bar with live clock, battery and signal.

Device Library

Free (3 devices) iPhone 16 · iPhone 17 · iPhone 17 Pro Max…