Preview a Vite (React, Vue, Svelte) app on mobile inside VS Code

Vite serves your app on port 5173 by default and moves to the next free port if it is busy.

1. Install the extension and start your server with npm run dev.
2. Open the Command Palette and run “Mobile Preview: Show”.
3. Check that the address bar shows http://localhost:5173; if your terminal printed another port, type that address instead.
4. Choose a device from the menu and edit your code.

• Hot module replacement usually updates a component without a full reload: scroll down the phone frame and edit a component to check a long page.
• Font and image imports: check that large assets are not loaded in full on a narrow screen.
• Components that use window.innerWidth: reload after changing device to see the correct value.

Mobile Preview is a layout preview in a device frame, not an emulator. Check touch behavior and browser-specific rendering on a real phone before you ship.

• The viewport meta tag is present, otherwise phones lay the page out as if it were much wider.
• Tap targets are comfortably large and not too close together.
• Nothing is hidden behind the notch or Dynamic Island: see the viewport sizes and cutouts on the devices page.

What port does Vite (React, Vue, Svelte) use in development?

Vite (React, Vue, Svelte) serves on port 5173 by default (http://localhost:5173). If that port is busy, the dev server usually moves to another one and prints it in the terminal.

Does Mobile Preview work with Vite (React, Vue, Svelte)?

Yes. It works with any page that loads in a browser, and it detects a local dev server automatically. You can also type any URL in its address bar.

Does the preview reload when I save?

Yes. It reloads each time you save a file.

Is it free?

There is a free version with three iPhone models. Pro, a one-time payment of €6.99, adds Android phones, iPads and more iPhones.