Skip to content
| Marketplace
Sign in
Visual Studio Code>Debuggers>FlexorNew to Visual Studio Code? Get it now.
Flexor

Flexor

kalculus

|
300 installs
| (1) | Free
FLEXOR is a powerful device emulation tool built specifically for web developers. Preview your responsive designs on 10+ devices in real-time without context switching. See exactly how your code looks on different screen sizes, orientations, and device types—all without leaving your editor.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Flexor — Multi-Device Web Preview for VS Code

Preview your web app on multiple devices at the same time, right inside VS Code. No tab switching, no external tools.

Flexor is a device emulator built for web developers who want to see how their designs hold up across different screen sizes without leaving the editor. Open a grid of devices, point them at your localhost, and watch everything update in real time as you code.

Flexor welcome screen

What it does

  • Multi-device grid — View up to 10+ devices side by side in a responsive layout
  • Built-in presets — iPhone 12/15, Samsung Galaxy, iPad, MacBook, Desktop, and more
  • Custom profiles — Add any screen size you need with custom width, height, and DPR
  • Drag-to-resize — Tweak dimensions on the fly to test breakpoints
  • Live reload — Changes appear on all devices instantly as you save

Flexor multi-device grid showing iPhone 12 and MacBook Air side by side

Flexor iPhone 12 preview

Getting started

  1. Install Flexor from the VS Code Marketplace
  2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
  3. Run "Open FLEXOR Device Emulator"
  4. Pick a preset or enter custom dimensions
  5. Enter your localhost URL (e.g. http://localhost:3000)
  6. Start coding — your changes show up live across all devices

Flexor iPhone 12 in sidebar view

Creating custom devices

If your target device isn't in the presets, you can add it in a few clicks:

  1. Click the + button in the device selector
  2. Enter width and height in CSS pixels
  3. Set the Device Pixel Ratio (DPR)
  4. Save and preview

Common dimensions for reference:

Device Resolution DPR
iPhone 15 Pro 393 x 852 3x
Samsung Galaxy S24 360 x 800 2x
iPad Air 820 x 1180 2x
MacBook Pro 14" 1512 x 982 2x

Requirements

  • VS Code 1.95.0 or later
  • A local dev server (optional — you can also test any live localhost URL)

Privacy

Flexor runs entirely on your machine. No remote connections, no data collection, no telemetry, no analytics. Your preferences are stored locally in VS Code.

Known issues

  • WebSocket reconnection may take a few seconds if your network drops
  • Very large CSS files (1MB+) can cause slight lag on updates
  • External resources may be blocked by CORS depending on your setup

Roadmap

Planned for upcoming releases:

  • Touch and gesture simulation
  • Screenshot capture with device frames
  • Network throttling (3G, 4G, 5G, WiFi)
  • Responsive breakpoint analyzer
  • Browser console integration

Release notes

1.0.1 (2025-12-12)

  • Fixed webview initialization errors in marketplace builds
  • Improved build pipeline stability

1.0.0 (2025-12-11)

  • Initial release
  • Multi-device grid with real-time sync
  • 8 built-in device presets
  • Custom device profile creation
  • Dark UI theme
  • WebSocket-based file watching

Contributing

Found a bug or have a suggestion? Open an issue or pull request on GitHub.

License

MIT — free to use and modify. See LICENSE for details.


Built by developers, for developers.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft