Device Preview Pro

A production-level Visual Studio Code extension that allows developers to preview their web/mobile apps inside the editor using dynamically generated device frames built entirely with CSS and SVG (no PNG images).

Features

Core Functionality

• Webview Panel: Full-featured preview panel that opens beside your editor
• Live Preview System: Display your app in an iframe with automatic reload
• Device Configuration: JSON-based device system with 12 pre-configured devices
• CSS-Based Device Frames: Realistic hardware visualization using pure CSS (no images)

Device System

Interactive Controls

• Device Switching: Dropdown selector with categorized device list
• Rotation: 90-degree rotation with swapped dimensions
• Zoom: Slider control from 0.5x to 1.5x with CSS transforms
• Safe Area Simulation: Toggle overlay showing status/navigation bars
• Touch Simulation: Click ripple effects for realistic interaction

Advanced Features

• Auto Dev Server Detection: Automatically detects running servers on common ports (3000, 5173, 8080, 4200, 8000)
• Live Reload: Automatically reloads preview when you save files
• Multi-Device View: Compare up to 4 devices side-by-side
• Custom Device Creator: UI form to add your own device configurations
• Screenshot Capture: Take screenshots of your preview

UI/UX

• Modern dark theme with glassmorphism design
• Top control bar with quick access to all features
• Smooth transitions and animations
• Device info overlay (resolution, DPR, type)
• Toast notifications for user feedback

Installation

From Source

1. Clone or download this repository
2. Open the folder in VS Code
3. Run npm install to install dependencies
4. Press F5 to launch the extension in debug mode

Package as VSIX

npm install
npm run compile
vsce package

Then install the .vsix file through VS Code's Extensions panel.

Usage

Opening Device Preview

• Command Palette: Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and type "Open Device Preview"
• Keyboard Shortcut: Ctrl+Shift+P (configurable)
• Editor Title: Click the mobile icon when editing web files

Navigation

Configuration

Settings available in VS Code preferences:

{
  "devicePreview.defaultDevice": "iPhone 14 Pro",
  "devicePreview.autoReload": true,
  "devicePreview.defaultZoom": 1.0,
  "devicePreview.devServerPorts": [3000, 5173, 8080, 4200, 8000]
}

Architecture

device-preview-pro/
├── src/
│   ├── extension.ts              # Extension entry point
│   ├── devicePreviewProvider.ts  # Webview panel management
│   ├── deviceManager.ts          # Device configuration logic
│   └── webview/
│       ├── index.html            # Webview HTML structure
│       ├── style.css             # CSS device frame engine
│       ├── script.js             # Webview JavaScript functionality
│       └── devices.json          # Device configurations
├── package.json                  # Extension manifest
└── tsconfig.json                 # TypeScript configuration

CSS Device Frame Engine

The extension uses a sophisticated CSS-based system for rendering device frames:

• device-shell: Outer hardware frame with realistic gradients and shadows
• device-screen: Inner display area with proper aspect ratio
• device-notch: Dynamic Island, notch, or hole-punch camera cutouts
• safe-area-overlay: Visual guides for safe area insets
• Home indicator: iOS-style home bar for modern devices
• Side buttons: Volume and power button simulation
• Laptop base / Monitor stand: Realistic desktop device bases

All visuals are created using CSS properties:

• box-shadow for depth and realism
• linear-gradient for metallic/plastic finishes
• border-radius for rounded corners
• CSS variables for dynamic theming

Device Configuration Format

{
  "id": "iphone-14-pro",
  "name": "iPhone 14 Pro",
  "width": 393,
  "height": 852,
  "borderRadius": 47,
  "notch": {
    "type": "dynamic-island",
    "width": 126,
    "height": 37,
    "top": 11
  },
  "safeAreaInsets": {
    "top": 59,
    "bottom": 34,
    "left": 0,
    "right": 0
  },
  "type": "mobile",
  "pixelRatio": 3,
  "frameColor": "#1a1a1a",
  "frameGradient": "linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%)"
}

Keyboard Shortcuts

Requirements

• VS Code 1.74.0 or higher
• Node.js 16+ (for development)

Development

Build

npm install
npm run compile

Watch Mode

npm run watch

Testing

Press F5 in VS Code to launch a new window with the extension loaded.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details.

Acknowledgments

• Built with the VS Code Extension API
• Device frame engine inspired by modern CSS art techniques
• Glassmorphism design inspired by macOS and iOS aesthetics