Live multi-device responsive web previewer rendering Mobile, Tablet, and Desktop screens simultaneously with synchronized scrolling & URL controls right inside VS Code.
✨ Features
📱 Multi-Device Simultaneous Preview: Renders your web application across Mobile, Tablet, and Desktop screens side-by-side in real time.
⚡ 1-Click Port Jumpers: Instant buttons for popular local dev servers: 3000 (Next.js, React), 5173 (Vite, Vue, Svelte), 8080 (Webpack), and 8000 (FastAPI, Django).
🔄 Portrait & Landscape Orientation: Flip any individual device screen with 1 click to test horizontal responsive breakpoints.
🔍 Interactive Canvas Zoom: Scale your viewports to 50%, 75%, or 100% so you can view all viewports comfortably without horizontal crowding.
🔗 Synchronized Scrolling & Interactions: Scroll on any screen and mirror the position across all other devices.
🎯 Device Presets Included:
📱 iPhone 15 Pro (393 × 852 px)
📱 Google Pixel 8 (412 × 915 px)
📱 iPhone SE (375 × 667 px)
📟 iPad Air (820 × 1180 px)
📟 iPad Mini (768 × 1024 px)
💻 MacBook Air / Laptop (1280 × 800 px)
🖥️ Full HD Desktop (1920 × 1080 px)
🌐 External Browser Quick Link: Open the active URL in your default browser with a single click.
⌨️ Shortcuts & Commands
Command
Title
Default Shortcut
responsiveCanvas.open
Open Multi-Device Preview 📐
Alt+Shift+R (Cmd+Shift+R on Mac)
responsiveCanvas.openUrl
Preview Custom URL across Devices...
Command Palette
responsiveCanvas.toggleSyncScroll
Toggle Synchronized Scrolling
Command Palette
⚙️ Configuration Settings
Configure in VS Code Settings (Ctrl+, -> search Responsive Canvas):
responsiveCanvas.defaultUrl: Default URL loaded when opening preview (default: http://localhost:3000).
responsiveCanvas.syncScroll: Whether cross-device synchronized scrolling is enabled by default (true).
responsiveCanvas.defaultScale: Initial canvas zoom factor ("50%", "75%", or "100%").
