Live Preview — Device Simulator (iOS, Android, Tablets, PC)
A responsive multi-device previewer for VS Code, Cursor, and Windsurf. Test web apps, Flutter web, React Native web, Next.js, and mobile sites directly inside your editor with accurate hardware frames, responsive viewport scaling, and real-time live reload.
Supported Devices
Apple iOS & iPadOS
- iPhone 18 Series: iPhone 18 Pro Max, iPhone 18 Pro, iPhone 18 Air, iPhone 18
- iPhone 17 Series: iPhone 17 Pro Max, iPhone 17 Pro, iPhone 17 Air, iPhone 17
- iPhone 16 Series: iPhone 16 Pro Max, iPhone 16 Pro, iPhone 16 Plus, iPhone 16
- iPhone 15 & 14 Series: iPhone 15 Pro Max, 15 Pro, 15, iPhone 14 Pro Max, 14 Pro, 14 Plus, 14
- Classic iPhones: iPhone 13 / 12 / 11 Series, iPhone X / XR, iPhone SE
- iPads: iPad Pro 13" (M4), iPad Pro 11" (M4), iPad Air 11" (M2), iPad mini (A17 Pro)
Android Smartphones & Tablets
- Samsung Galaxy: Galaxy S26 Ultra, S24 Ultra, S24, S22 Ultra, S22+, S22, S21 Ultra, S20, Note 20 Ultra, Galaxy Z Flip3, Galaxy A17, A12
- Google Pixel: Pixel 10 Pro, Pixel 10, Pixel 10 Fold, Pixel 8, Pixel 6 Pro, Pixel 5
- Infinix: Infinix Hot 70, Infinix Note 30, Infinix Hot 12
- Vivo, Motorola, OnePlus, Xiaomi: Vivo V30e, Motorola Razr 70 Ultra, OnePlus Nord 2, Xiaomi 12, Xiaomi Mi 11i, Huawei P30 Pro
Key Features
- Accurate Device Bezels & Curves: Authentic hardware frames with device-accurate screen radii, Dynamic Island, punch-hole cameras, and waterfall 3D curved screens.
- Orientation Switching: One-click toggle between Portrait and Landscape orientations.
- Interactive Top Bar: Quick URL address bar, reload shortcut, rotation control, and scale adjustments.
- Visual Device Catalog: Browse devices visually with specs, viewport dimensions, and real-time previews.
- Hardware Finishes: Switch between authentic manufacturer finishes (Titanium, Cosmic Orange, Burgundy, Deep Purple, Phantom Black, and more).
- Responsive Zoom & Fit: Scale preview to 50%, 75%, 100%, or auto-fit to available editor space.
- Touch Pointer Emulation: Mobile circular touch cursor for realistic mobile tap, drag, and scroll interaction.
- Zero Focus-Stealing: Isolated webview sandbox ensures smooth typing in code files without the iframe capturing keystrokes.
Quick Start
- Start your local dev server in your terminal:
npm run dev
# or
flutter run -d web-server
- Open the command palette (
Cmd + Shift + P or Ctrl + Shift + P) and run:
Device Simulator: Preview in Device Simulator
(Or click the Device Simulator icon in the status bar at bottom-right).
- Type your local address (e.g.,
http://localhost:3000 or http://localhost:5173) into the simulator address bar and press Enter.
Commands
| Command |
Action |
Device Simulator: Preview in Device Simulator |
Opens simulator preview in the sidebar or active panel |
Device Simulator: Open in Dedicated Tab |
Opens simulator in a dedicated full editor tab |
Device Simulator: Change Preview URL |
Change target URL or port |
Device Simulator: Switch Device Model |
Quick switch between phones and tablets |
Device Simulator: Toggle Orientation (Rotate) |
Rotate between portrait and landscape |
Device Simulator: Toggle Device Finish |
Change chassis color and finish |
Device Simulator: Set Default Device |
Save current device as your startup default |
Device Simulator: Reload Simulator |
Hard-refresh current preview page |
| |
