Mobile QR Preview

Preview your local web project on a real phone directly from VS Code.
Start a preview session, scan the QR code, and test instantly on the same network with live reload.

Fast QR preview - Real phone testing - Live reload - SPA-friendly routing

Why developers use it

• Open your local project on a real phone in seconds from inside VS Code.
• Generate a QR code automatically for the current preview URL.
• Refresh changes quickly with live reload.
• Keep SPA routes working with index fallback.
• Launch, stop, restart, copy, or open the preview URL from one focused panel.

Why Mobile QR Preview?

When you build mobile UIs, responsive websites, touch interactions, mini-games, or quick prototypes, desktop preview is never enough. You need to see the real result on a real phone.

Most local preview workflows are still too manual:

• start a local server
• find the correct local IP
• check the port
• type the URL on your phone
• retry when the network changes

Mobile QR Preview removes that friction.

See it in action

Open your local project on a real phone in seconds directly from VS Code.

Follow the core workflow: start the preview, scan the QR code, and test instantly on your phone.

Adjust the served folder, routing, live reload behavior, and preview style from a focused settings panel.

Launch or stop the preview from the panel, the sidebar, or the VS Code status bar.

Keep the preview readable and polished across different VS Code themes.

Features

• instant mobile preview directly from VS Code
• built-in QR code for fast phone access
• automatic local network detection
• live reload when files change
• SPA fallback support
• Primary Side Bar or Secondary Side Bar preview placement
• simple actions to start, stop, restart, copy the URL, and open in browser
• compact settings page for the core workflow
• output channel logging for diagnostics

Perfect for

• responsive websites
• mobile-first interfaces
• HTML, CSS, and JavaScript prototypes
• React, Vue, Angular, Svelte, Next.js static exports, and similar browser-based web apps
• HTML5 and canvas games
• touch UI testing
• PWA experiments
• quick client demos on a phone

How it works

1. Open your project in VS Code.
2. Run Mobile QR Preview: Start.
3. Scan the QR code with your phone.
4. Open the generated local URL.
5. Edit your files and see the result reload automatically.

Your computer and phone must be connected to the same local network. The preview server stops automatically after 15 seconds when no client remains connected. After Start Preview, it also stops automatically if no client connects within 90 seconds (set mobileQrPreview.initialNoClientTimeout to 0 to disable).

Commands

• Mobile QR Preview: Start
• Mobile QR Preview: Stop
• Mobile QR Preview: Restart
• Mobile QR Preview: Copy URL
• Mobile QR Preview: Open in Browser
• Mobile QR Preview: Settings

Extension Settings

This extension contributes the following settings:

• mobileQrPreview.root Folder to serve. Leave it empty to serve the folder opened in VS Code, or enter a subfolder such as web, dist, or apps/site/public.

• mobileQrPreview.port Preferred HTTP port for the local preview server. Use 0 to auto-pick a free port.

• mobileQrPreview.autoReload Enable or disable automatic reload.

• mobileQrPreview.reloadDelay Delay before sending a reload after file changes are detected. Lower values feel more real-time.

• mobileQrPreview.initialNoClientTimeout Auto-stop delay in seconds after startup if no client connects yet. Set 0 to disable.

• mobileQrPreview.spaFallback Serve index.html for unknown routes.

• mobileQrPreview.autoOpenPanel Open the QR panel when VS Code starts and when a preview session starts.

• mobileQrPreview.previewTheme Choose the branded or native preview style.

• mobileQrPreview.ignored File patterns ignored by the live reload watcher.

Quick Start

1. Install Mobile QR Preview.
2. Open a local web project in VS Code.
3. Start a preview session.
4. Scan the QR code from your phone.
5. Test on a real device instantly.

Notes

• This extension is designed for local network preview.
• It is ideal for browser-based web projects, responsive layouts, prototypes, PWAs, and mobile web experiences that can be served over HTTP.
• It is not a replacement for native iOS or Android build tooling, Electron desktop packaging, React Native native runtime, or Flutter mobile runtime.

Common Issues

My phone cannot open the preview

Make sure your phone and your computer are connected to the same Wi-Fi or local network.

The QR code opens but the page does not load

Your local firewall, VPN, or network settings may be blocking the connection.

The wrong IP is used

If multiple network interfaces are active, restarting the preview session may resolve the issue.

My project does not reload properly

Check your ignore patterns and confirm that auto reload is enabled.

Security

Mobile QR Preview is intended for local development on your LAN. By default, it should be used only inside your local network.

Do not expose local preview sessions publicly unless you explicitly understand the security implications.

Roadmap

Planned and possible improvements include:

• improved project root detection
• broader session and device visibility
• HTTPS local preview
• optional proxy mode for existing dev servers
• deeper framework integration
• more advanced mobile debugging workflows

Feedback

Feedback, bug reports, and product ideas are welcome.

The source code is not publicly available. If you want to report a problem, share an idea, or get in touch about the extension, that is very welcome.

Contact

• Studio: Nimbiki Studio
• Developer: Patrick Jossevel
• Contact: contact@nimbiki.ch
• Website: https://www.nimbiki.ch/

License

Proprietary. See LICENSE for details.

with love by Patrick