Mobile Preview - Test Responsive Designs Without Leaving VS Code

Stop switching between your editor and browser. Preview your web app in pixel-perfect mobile device frames - iPhone, Android, iPad - right inside VS Code with live reload.

Perfect for web developers, UI/UX designers, and anyone building responsive websites or progressive web apps.

|| |--|--|

Why Mobile Preview?

✨ Faster Development - No more alt-tabbing. Preview mobile layouts instantly in your editor 📱 Realistic Device Frames - See exactly how your app looks on real iPhones, Android phones & tablets ⚡ Auto-Reload on Save - Changes appear instantly when you hit save 🎯 Smart Auto-Detection - Automatically detects your dev server URL (React, Vue, Next.js, Vite, etc.) ⭐ Quick Favorites - Save your most-used devices for instant switching with keyboard shortcuts 🆓 Free Forever - Start with 3 iPhone devices, no credit card required

Quick Start

1. Install the extension
2. Run your dev server (npm start, yarn dev, etc.)
3. Press Ctrl+Shift+P → "Mobile Preview: Show"
4. Auto-detection magic! The extension detects your dev server URL automatically
5. Done! Your app appears in a mobile frame with live reload

Even faster: Click the 🔍 button in the preview to auto-detect your server at any time.

Key Features

✓ Smart Auto-Detection - Detects React, Vue, Next.js, Vite, Angular, Svelte and more automatically ✓ Quick Favorites - Save up to 5 devices (Pro) and switch instantly with ⌘1-5 shortcuts ✓ 15+ Device Templates - iPhone 15, Galaxy S23, iPad Pro & more (Pro license) ✓ Instant Live Reload - See changes immediately when you save files ✓ Framework Badge - Shows which framework is detected in your project ✓ Localhost & Remote URLs - Test local dev servers or deployed sites ✓ Side-by-Side View - Code on the left, mobile preview on the right ✓ Offline-Ready - Works completely offline, no external dependencies

Pricing - Simple & Affordable

🆓 Free Forever

Perfect for getting started:

• 3 iPhone devices (iPhone 13 Pro, 15, 15 Pro Max)
• 1 favorite device with ⌘1 shortcut
• Auto-refresh on file save
• Smart URL auto-detection
• Framework detection badge
• No credit card required
• No time limit

💎 Pro - $5 One-Time Payment

Lifetime access to all features:

• ✅ 15+ devices - All iPhones, Android phones & tablets
• ✅ 5 favorite devices - Quick switch with ⌘1-5 shortcuts
• ✅ iPad devices - iPad Pro 11, iPad Air, iPad Mini
• ✅ Latest models - iPhone 15, Galaxy S23, Pixel 7
• ✅ Priority support - Get help when you need it
• ✅ Future devices - New devices added regularly at no extra cost

That's less than a coffee for lifetime access. No subscription, no recurring fees.

Get Pro License →

Installation

Option 1: VS Code Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (Extensions)
3. Search for "Mobile Preview"
4. Click Install

Option 2: Command Line

code --install-extension lirobi.phone-preview

How to Use

Basic Usage:

1. Start your dev server: npm start, yarn dev, etc.
2. Open Command Palette: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
3. Type: "Mobile Preview: Show"
4. The extension auto-detects your dev server URL (or enter manually)
5. Your app appears in a mobile frame - code and preview side-by-side!

Quick Actions:

• 🔍 Auto-detect button - Click to detect your dev server URL at any time
• ⭐ Favorite button - Click the star to save a device as favorite (toggle on/off)
• 📱 Favorites menu - Click the phone icon to quickly switch between saved favorites
• Framework badge - Shows which framework was detected (React, Vue, etc.)

Keyboard Shortcuts:

• ⌘1 (or Ctrl+1) - Switch to favorite #1
• ⌘2 (or Ctrl+2) - Switch to favorite #2
• ... up to ⌘5 for Pro users

Pro Tips:

• Changes auto-reload when you save files
• Free users get 1 favorite, Pro users get 5
• Works with React, Vue, Next.js, Vite, Angular, Svelte and any dev server
• Use remote URLs to preview deployed sites

Commands

Main Commands

• Mobile Preview: Show - Open the mobile preview panel (with auto-detection)
• Mobile Preview: Open Settings - Open the extension settings

Favorites (New!)

• Mobile Preview: Add Current Device to Favorites - Save the current device as a favorite
• Mobile Preview: Switch to Favorite 1/2/3/4/5 - Quickly switch to a saved favorite

License Management

• Mobile Preview: Enter License Key - Activate a Pro license
• Mobile Preview: View License Information - View details about your current license
• Mobile Preview: Purchase License - Open the license purchase page
• Mobile Preview: Deactivate License - Deactivate your license on this device

🆕 What's New in v2.3

Smart Auto-Detection

The extension now automatically detects your dev server URL when you open Mobile Preview! It recognizes:

• Frameworks: React, Vue, Next.js, Vite, Angular, Svelte, Gatsby, Astro, Remix
• Ports: Common dev server ports (3000, 5173, 4200, 8080, etc.)
• Running Status: Shows which servers are currently active

Click the 🔍 button anytime to re-detect your server.

Device Favorites

Save your most-used devices for instant access:

• Free: 1 favorite device with ⌘1 shortcut
• Pro: 5 favorite devices with ⌘1-5 shortcuts
• Toggle: Click the ⭐ button to add/remove favorites
• Dropdown: Click the 📱 button to see all your favorites

Framework Detection Badge

Your project's framework is automatically detected and displayed as a badge in the toolbar (⚛️ React, ⚡ Vite, 💚 Vue, etc.)

License Management

Activating a License

1. Purchase a license from our website
2. You will receive a license key via email
3. In the extension, click on "GET PRO" or "💎 GET PRO" button
4. Enter your license key when prompted
5. Your Pro features will be activated immediately

📱 Device Library

Free Tier (3 Devices)

• iPhone 13 Pro
• iPhone 15
• iPhone 15 Pro Max

Pro Tier (15+ Devices)

iPhones:

• iPhone 15, 15 Pro Max
• iPhone 14 Pro
• iPhone 13 Pro
• iPhone 12 Mini
• iPhone 11

iPads:

• iPad Pro 11"
• iPad Air
• iPad Mini

Android Phones:

• Samsung Galaxy S23
• Google Pixel 7
• OnePlus 10 Pro
• Xiaomi 13

Android Tablets:

• Samsung Galaxy Tab S8
• Google Pixel Tablet

More devices added regularly with Pro license updates

Use Cases

Frontend Developers

• Test responsive designs without browser DevTools
• Preview React/Vue/Angular components in real device frames
• Debug mobile-specific layout issues faster

UI/UX Designers

• Validate designs against actual device dimensions
• Share mockups with stakeholders directly from VS Code
• Check readability and spacing on mobile screens

Full-Stack Developers

• Test mobile PWA features during development
• Preview API responses on mobile viewports
• Validate mobile authentication flows

Common Questions

Q: Does this work with my framework? A: Yes! The auto-detection supports React, Vue, Next.js, Angular, Svelte, Vite, Gatsby, Astro, Remix, and plain HTML/CSS. If it runs in a browser, it works!

Q: How does auto-detection work? A: The extension scans your package.json for frameworks and checks common dev server ports to find your running server automatically.

Q: Can I use it with remote URLs? A: Absolutely. Use localhost for dev servers or any HTTPS URL for deployed sites.

Q: Does it support hot reload? A: Yes, the preview automatically refreshes when you save files in VS Code.

Q: How many favorites can I save? A: Free users can save 1 favorite device, Pro users can save up to 5 favorites with keyboard shortcuts ⌘1-5.

Q: Is the Pro license a subscription? A: No. It's a one-time $5 payment for lifetime access, including future device updates.

Q: Can I use one license on multiple computers? A: Yes, you can activate your license on up to 3 devices. Deactivate from one to use on another.

Support & Feedback

• 🐛 Report a Bug
• 💡 Request a Feature
• 📧 Email: support@lirobi.com
• 🌐 Website: mobilepreview.lirobi.com

License

Proprietary license. Free tier available. Pro features require a paid license.