Mobile Preview — Responsive & HTML 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.

New in 3.6: preview any HTML file, no server needed. Right-click an .html file → Mobile Preview: Preview HTML File. CSS, JS and images work, and the page reloads every time you save.

Web apps only. Mobile Preview shows websites and web apps (your localhost, a staging server or any URL) at real device sizes. It is not an emulator: it can't install or run native Android (APK) or iOS apps.

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

Why developers love it

• HTML preview, no server — right-click any .html file to see it on a phone, with live reload on save. Free.
• 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.

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

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)

• 39 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

Pro — iPhones iPhone 11 · iPhone 12 Mini · iPhone 13 Pro · iPhone 14 Pro · iPhone 15 · iPhone 15 Pro Max · iPhone 16 · iPhone 16 Pro · iPhone 16 Pro Max · iPhone 17 · iPhone 17 Pro · iPhone 17 Pro Max · iPhone 18 Pro · iPhone 18 Pro Max · iPhone Air

Pro — iPads iPad Air · iPad Mini · iPad Pro 11

Pro — Android Google Pixel 7 · Google Pixel 9 · Google Pixel 9 Pro · Google Pixel 10 · Google Pixel 10 Pro · OnePlus 10 Pro · Samsung Galaxy S23 · Samsung Galaxy S25 · Samsung Galaxy S25 Ultra · Samsung Galaxy S26 · Samsung Galaxy S26 Ultra · Xiaomi 13 · Xiaomi 15 · Xiaomi 15 Pro · Xiaomi Redmi Note 14

Pro — Android Tablets Google Pixel Tablet · Samsung Galaxy Tab S8

Pro — Foldables Google Pixel 10 Pro Fold (folded) · Google Pixel 10 Pro Fold (unfolded) · Samsung Galaxy Z Flip8 · Samsung Galaxy Z Fold8 (unfolded)

Common Questions

Does it work with my framework? Yes. It auto-detects React, Vue, Next.js, Vite, Angular, Svelte, Gatsby, Astro, Remix. Anything that runs in a browser works.

Does it support hot reload? Yes. The preview refreshes automatically when you save.

Can I preview deployed sites? Yes. Enter any HTTPS URL to preview staging or production.

Is the Pro license a subscription? No. One-time payment, lifetime access including future device updates.

Capture says it cannot find a browser. What do I do? Install Chrome, Edge, Brave or Chromium, or set mobile-preview.screenshotBrowserPath to its executable. Over SSH, in Codespaces or in WSL, the browser is looked up on the remote machine.

Does it work in Cursor, Windsurf and VSCodium? Yes. It is published on both the Visual Studio Marketplace and Open VSX, so you can install it in VS Code and in editors that use Open VSX.

Is it an emulator? No. It shows your page in a device-sized frame with the device's real viewport dimensions. It is a fast way to check layout and responsive behavior, not a replacement for testing on a physical device.

Can I use one license on multiple computers? Yes, up to 3 activations. To move your license, click PRO in the toolbar and choose Deactivate this device on the computer you no longer use, then enter your key on the other one.

Support

• Report an issue
• Request a feature
• contact@lirobi.com
• mobilepreview.lirobi.com