See your web project in phone and tablet frames right next to your code, and check responsive layouts without leaving the editor.
Features
30 device sizes: current phones, foldables and tablets, plus laptop and desktop. You can also add your own device size.
Device frames with rounded corners, a camera cutout and a status bar. Frames scale to fit the panel while the page keeps the real device width.
Finds your dev server. Start your project as usual (for example npm run dev), and the preview opens it automatically. Works with Next.js, Vite, React, Vue, Nuxt, Angular, Svelte, Astro, Remix and plain HTML.
Updates when you save. Projects with hot reload update by themselves; other projects reload after each save.
Portrait and landscape for every device.
Several devices at once, side by side or in a grid.
Images of the preview with or without the device frame, at 1x, 2x or 3x.
Favorites, focus mode and zoom. Your choices are remembered.
Getting started
Start your project, for example with npm run dev.
Press Cmd+Alt+M (macOS) or Ctrl+Alt+M (Windows, Linux), or run MVDev: Open Mobile Preview from the Command Palette.
Pick a device in the toolbar and rotate it as needed.
You can also type a localhost address into the address bar of the preview.
Two preview modes
Embedded (default): the page is shown inside the editor at the exact device width. This is ideal for checking layouts and breakpoints.
Browser: uses Chrome, Edge or another Chromium-based browser installed on your computer to show the page with the device's pixel density, touch input and mobile browser identity. Switch modes with the Embedded / Browser control at the bottom of the preview.
Commands
Command
Shortcut (macOS / Windows, Linux)
MVDev: Open Mobile Preview
Cmd+Alt+M / Ctrl+Alt+M
MVDev: Detect Local Server
MVDev: Refresh Preview
MVDev: Select Device
MVDev: Rotate Device
Cmd+Alt+R / Ctrl+Alt+R
MVDev: Capture Screenshot
MVDev: Open Multiple Previews
MVDev: Next / Previous Favorite Device
Cmd+Alt+] / Cmd+Alt+[
MVDev: Toggle Current Device as Favorite
MVDev: Toggle Focus Mode
MVDev: Add Custom Device
MVDev: Switch Preview Mode (Embedded / Browser)
Settings
Setting
Default
Description
mvdevMobilePreview.defaultDevice
iphone-16-pro
Device shown the first time the preview opens
mvdevMobilePreview.autoDetectServer
true
Look for your running project when the preview opens
mvdevMobilePreview.autoReload
auto
auto, always or off
mvdevMobilePreview.reloadDelay
300
Milliseconds to wait after saving before reloading
mvdevMobilePreview.defaultPort
–
Port of your project, if it is not found automatically
mvdevMobilePreview.additionalPorts
[]
More ports where your projects may run
mvdevMobilePreview.defaultOrientation
portrait
portrait or landscape
mvdevMobilePreview.browserPath
""
Browser used in Browser mode (empty = find it automatically)
