Install Mobile Preview from the Extensions view in Cursor or Windsurf, start your dev server and run “Mobile Preview: Show”. The extension is published on both the Visual Studio Marketplace and Open VSX, so it installs in VS Code and in editors that use Open VSX. Your app appears in a device frame next to the code your AI assistant writes.
Why this matters when an AI writes your UI
When an AI assistant generates components and styles, most of your time goes into checking the result. A narrow screen is where generated layouts break first: overflowing text, buttons off screen, fixed widths. Keeping a phone frame open beside the chat lets you check each change as it lands, instead of resizing a browser window afterwards.
Install in Cursor or Windsurf
- Open the Extensions view and search for “Mobile Preview”.
- Install “Mobile Preview - Phone & Tablet Simulator”. It is published on both the Visual Studio Marketplace and Open VSX, the registry used by editors that cannot use the Microsoft one.
- Start your dev server, then run “Mobile Preview: Show” from the Command Palette.
- Choose a device. The panel reloads when files are saved, including files written by your assistant.
What to check on a phone frame
- Text that overflows or wraps badly at 360 to 430 px wide.
- Buttons and menus that sit outside the visible area or are too small to tap.
- Landscape mode: flip the device sideways to check headers and fixed elements.
- Safe areas: the frame draws the notch or Dynamic Island so you can see what covers your content.
Share the result
The Capture button exports your page inside the device frame as a PNG, in portrait or landscape, with a transparent or solid background at 2× or 3×. It is free. It uses the Chrome, Edge, Brave or Chromium already installed on your computer.
Limits to know
This is a layout preview in a frame, not an emulator and not a real device. Check touch behavior, scrolling feel and browser-specific rendering on an actual phone before shipping.
Frequently asked questions
- Does Mobile Preview work in Cursor?
- Yes. It is published on the Visual Studio Marketplace and on Open VSX. Search “Mobile Preview” in the Extensions view of Cursor; if the search does not list it, install it from its Open VSX page.
- Does it work in Windsurf and VSCodium?
- Yes. Windsurf and VSCodium install extensions from Open VSX, where Mobile Preview is published.
- Does the preview update when the AI edits files?
- Yes. It reloads each time a file is saved, whoever wrote the change.
- Can I export a screenshot inside a phone frame?
- Yes. The free Capture button exports your page inside the device frame as a PNG at 2× or 3×, with a transparent or solid background.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · How to preview your website on an iPhone inside VS Code · Mobile Preview vs Chrome DevTools device mode: which should you use?