Overview
ResponsiveView is a VS Code (and Cursor) panel that loads any localhost URL inside a realistic device frame — phones, tablets, laptops, desktops, and ultrawide monitors — so you can preview your responsive design at the actual viewport size without juggling browser windows or DevTools.
✨ Features
- 📱 52 built-in devices across phones, tablets, laptops, desktops, and ultrawides — iPhone 17 lineup, Samsung Galaxy S25, Google Pixel 9, iPad Pro M4, MacBook Air 15", Surface Pro 11, 4K/5K monitors, 21:9 / 32:9 ultrawides, and more
- 🎯 Auto-fit canvas — every device is sized to the largest scale that fits your panel, so 2K and 4K screens display without scrollbars
- 🔄 Portrait / landscape rotate with one click
- 📐 Custom dimensions + standard breakpoint presets (CSS standard, Tailwind, Bootstrap)
- 🌗 Dark + light themes matching Cursor's monochrome design system, with persistent theme preference
- 🖼️ Realistic device frames — Dynamic Island, notch, punch-hole, home button, laptop hinge, monitor stand — all rendered in pure CSS, no images
- 💾 Persistent state — your last URL, device, orientation, and theme are remembered across sessions
- ⌨️ Keyboard shortcut —
Cmd/Ctrl+Shift+R to open the preview
- ♿ WCAG AA accessible — all text passes contrast checks, every control has an aria-label, focus rings are visible,
prefers-reduced-motion respected
🚀 Installation
From VSIX (local install)
- Download or build
responsive-view-0.0.1.vsix (see Development)
- In VS Code or Cursor:
⌘⇧P (or Ctrl+Shift+P) → "Extensions: Install from VSIX..."
- Pick the
.vsix file → reload when prompted
From source
git clone https://github.com/lior25659567/responsive-view.git
cd responsive-view
npm install
npm run compile
Then press F5 inside VS Code to launch an Extension Development Host.
🎬 Usage
- Open the preview —
Cmd/Ctrl+Shift+R, or ⌘⇧P → "ResponsiveView: Open Preview"
- Type your dev server URL in the URL bar (e.g.
http://localhost:3000). The http:// prefix is added automatically if you forget it.
- Pick a device category (Phone, Tablet, Laptop, Desktop, Custom) and choose from the dropdown.
- Rotate between portrait/landscape, Refresh to reload, or toggle the theme with the sun/moon button.
- Custom mode lets you enter freeform W×H or pick a CSS / Tailwind / Bootstrap breakpoint preset.
⚙️ Settings
Configure defaults in settings.json:
| Setting |
Type |
Default |
Description |
responsiveView.defaultUrl |
string |
http://localhost:3000 |
URL to load on first open |
responsiveView.defaultDevice |
string |
iphone-16 |
Device id to render on open |
responsiveView.openAsTab |
boolean |
true |
Open in a full editor tab. When false, opens as a side panel beside the active editor. |
Last-used URL, device, orientation, and theme are stored separately in globalState and override the defaults above.
⌨️ Keyboard shortcuts
| Action |
macOS |
Windows / Linux |
| Open ResponsiveView |
⌘⇧R |
Ctrl+Shift+R |
You can rebind in Preferences: Open Keyboard Shortcuts → search "ResponsiveView".
📦 Supported devices
📱 Phones (25)
Apple — iPhone 17 Pro Max / 17 Pro / 17 / Air, iPhone 16 Pro Max / 16 Pro / 16 Plus / 16, iPhone 15 Pro Max / 15 Pro / 15, iPhone 14, iPhone 13 mini, iPhone SE (3rd gen)
Samsung — Galaxy S25 Ultra / S25 / S24 / S23, Galaxy Z Fold 6 (closed)
Google + others — Pixel 9 Pro / 9 / 8 / 7, OnePlus 12, Nothing Phone (2)
💊 Tablets (9)
iPad Pro 13" / 11" (M4), iPad Air 13" / 11", iPad (10th gen), iPad Mini, Galaxy Tab S10+ / S9, Surface Pro 11
💻 Laptops (10)
MacBook Pro 16" / 14", MacBook Air 15" / 13", Dell XPS 15 / 13, ThinkPad X1 Carbon, Surface Laptop 15" / 13.8", Framework 13
🖥 Desktops (10)
WXGA 1366×768, HD+ 1600×900, Full HD 1920×1080, QHD 2560×1440, 2K, iMac 5K (logical), 4K 3840×2160, Ultrawide 21:9 (3440×1440), Super-Ultrawide 32:9 (5120×1440), 5K (5120×2880)
✏️ Breakpoint presets (16)
CSS standard — xs (320), sm (576), md (768), lg (992), xl (1200), xxl (1400)
Tailwind — sm (640), md (768), lg (1024), xl (1280), 2xl (1536)
Bootstrap — sm (576), md (768), lg (992), xl (1200), xxl (1400)
🛠️ Development
Requires Node 18+.
npm install # install deps
npm run compile # tsc + copy webview assets to out/
npm run watch # tsc -w for active development
Then F5 in VS Code to launch the Extension Development Host. To preview the UI without VS Code, open dev/preview.html in any browser — it's a self-contained harness that loads the real styles.css and script.js.
To produce a .vsix for installation:
npx @vscode/vsce package
🤝 Contributing
Issues and pull requests welcome at github.com/lior25659567/responsive-view.
🐞 Known issues
- The iframe can't load sites that send
X-Frame-Options: DENY (e.g. example.com). Most localhost dev servers don't set this.
- Cross-origin iframes can't be inspected from the parent webview — element inspection isn't supported.
📜 License
MIT © lywrbwm
Built for developers who care about responsive design.
| |
