Smart Canvas

Preview your frontend on an interactive multi-device canvas with realistic mobile & tablet frames — live, right inside VS Code.

Designed for frontend developers who want the authentic feel of an Xcode/SwiftUI preview canvas directly beside their code without switching context to external browser windows.

Getting Started

1. Build and Run

npm install
npm run compile

Press F5 in VS Code to launch an Extension Development Host window with the extension activated.

2. Preview Your Application

1. Start your local frontend dev server in your project terminal (e.g. npm run dev, npm start).
2. Click the "Open Smart Canvas to the Side" icon button in the editor title bar (or press Ctrl+Alt+D / Cmd+Alt+D).
3. The extension automatically detects your running dev server (e.g., port 5173 for Vite, 3000 for Next.js/React, 4200 for Angular, 8080, 4321 for Astro, etc.).

Features

🛠️ Architecture & Dev Server Reverse Proxy

• Zero-Config Reverse Proxy: Smart Canvas spins up an ephemeral local proxy (127.0.0.1:<port>) that tunnels HTTP and WebSocket (HMR) traffic seamlessly to your active dev server.
• Cross-Origin Sandbox Freedom: Injects safe-area CSS environment variables and an in-page snapshot bridge without modifying your project source code.
• Zero External Dependencies: Built entirely on native Node.js and VS Code APIs for maximum performance and minimal footprint.
• Full Framework Compatibility: Works out of the box with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and Vite.

📸 Dual-Workflow Mockup Screenshot Export

• Live Screen Capture (Primary): Click the Snap button (camera icon) to capture the exact active DOM state, computed styles, and scroll offset directly from your running app, composited into a high-res 2x Retina PNG with the physical device frame, metallic highlights, status bar, and Dynamic Island.
• Clipboard & Drag-and-Drop (Fallback): Supports instant Ctrl+V / Cmd+V clipboard pasting and drag-and-drop to place any external design mockup directly into the chassis.

🎨 Native Xcode & SwiftUI Canvas Fidelity

• Simulated Native Status Bar: Authentic 9:41 time, 4-bar cellular reception, Wi-Fi glyph, and battery indicator framing the Dynamic Island or Punch Hole camera.
• Safe Area Inset Guides: Interactive 📐 Guides overlay showing top and bottom safe-area insets (env(safe-area-inset-top) / env(safe-area-inset-bottom)).
• Safe-Area CSS Injection: Auto-injects --sat, --sab, and --safe-area-inset-* custom properties into the page so Tailwind safe-area padding works out of the box.
• Touch & Gesture Emulation: Circular translucent touch cursor with kinetic drag scrolling and tap ripples.
• Xcode Dot-Grid & Artboard Navigation: Interactive canvas with zoom controls (+, −, 100%, and Auto-Fit) and full-range scroll navigation that avoids top-bezel clipping at any zoom level.
• Environment Overrides: One-click toggles for Light / Dark appearance, Safe Area guides, and Touch simulation.

📱📱 Dual & Multi-Device Canvas Previews (v2.0)

• Side-by-Side Dual Previews: Click Dual in the toolbar (or press Alt+Shift+M) to render two devices side-by-side on the dot-grid canvas (e.g. iPhone + iPad Mini, or iOS + Android).
• Light & Dark Mode Comparison: One-click variant mode that displays your primary device simultaneously in Light Mode (left) and Dark Mode (right) with synchronized sub-route navigation.
• Synchronized Navigation & History: Entering routes, clicking Back/Forward, or triggering Reload updates both devices simultaneously.
• Dual Showcase Screenshot Export: In Dual Mode, the Snap button captures both active devices and renders a high-res 2x Retina studio presentation mockup (preview-dual-*.png) with device tags, metallic bezels, status bars, and hardware cutouts on an elegant presentation backdrop.

🔤 Dynamic Type & Accessibility Font Scaling (v2.1)

• Responsive Typography Testing: Emulate iOS Dynamic Type and Android font accessibility settings without touching your CSS.
• Granular Scaling Presets: Cycle presets or pick directly from the toolbar dropdown:
  • 80% (Compact), 90% (Small), 100% (Default), 115% (Large), 130% (XL), 150% (AX 1), 175% (AX 2), 200% (AX 3).
• Synchronized Font Scaling: Both devices in Dual Mode scale synchronously.
• Zero-Flicker Live DOM Injection: Injected dynamically into root html { font-size: ... !important; } and --dynamic-type-scale custom property.
• Keyboard Shortcut: Press Alt+Shift+T to instantly cycle to the next Dynamic Type preset.

📡 Network Throttling Simulation (v2.2)

• Proxy-Level Rate Limiting: Emulate real-world mobile network conditions via internal streaming proxy without any OS configuration:
  • Online: Full unthrottled local connection speed.
  • Fast 3G: 1.6 Mbps download speed with 150ms round-trip latency.
  • Slow 3G: 400 Kbps download speed with 400ms round-trip latency.
  • Offline: Instant 503 HTTP disconnect simulation with elegant dark-mode offline fallback screen and severed WebSocket connections.
• Hardware Status Bar Fidelity: Device mockups automatically adapt their native status bar:
  • 3G indicator glyph displayed during Fast 3G and Slow 3G throttling.
  • Disconnected Wi-Fi indicator and dimmed signal bars in Offline mode.
  • Realistic status graphics preserved in 2x Retina PNG screenshot exports.
• Toolbar & Keyboard Controls: Quick cycle with Alt+Shift+N or choose directly from the toolbar network selector or Command Palette (Smart Canvas: Select Network Simulation Profile...).

📐 Custom Device Frame Importer (v2.3)

• Arbitrary Custom Device Profiles: Define custom phones, foldable devices, tablets, and embedded screens directly in your workspace or global settings.
• Interactive Device Creation Wizard: Run Smart Canvas: Add Custom Device Frame... from the Command Palette to define a new device step-by-step (ID, label, type, dimensions, corner radius, bezel color, notch style, safe-area insets) with automatic validation and persistence to .vscode/settings.json.
• JSON Configuration Schema: Add custom devices directly in .vscode/settings.json under smartCanvas.customDevices:

  {
    "smartCanvas.customDevices": [
      {
        "id": "pixel_fold_inner",
        "label": "Google Pixel Fold (Inner)",
        "type": "tablet",
        "os": "android",
        "widthPx": 840,
        "heightPx": 1080,
        "cornerRadius": 28,
        "bezelColor": "#1c1d1f",
        "notchStyle": "punch-hole",
        "hasNotch": true,
        "hasHomeIndicator": true,
        "safeAreaInsets": {
          "top": 24,
          "bottom": 24,
          "left": 0,
          "right": 0
        }
      }
    ]
  }
  

• Dynamic Toolbar & Artboard Integration: Custom devices automatically populate <optgroup label="Custom Devices"> in toolbar selectors, support full portrait/landscape rotation, dynamic CSS safe-area insets (--sat, --sab), zoom/pan, and 2x Retina PNG export chassis rendering.

🧭 Navigation & Productivity

• Route Navigation Bar: Mini address bar with Back, Forward, and route input (/, /dashboard, /cart) to navigate your app's sub-routes directly inside the device frame.
• Side-by-Side Split View: Opens beside your code (ViewColumn.Beside) with preserveFocus: true so your typing focus never leaves your editor.
• Activity Bar Sidebar: Persistent preview container docked in the Activity Bar for continuous background feedback.
• Status Bar Item: Interactive item ($(device-mobile) iPhone 15) with a quick-switch menu for devices, orientation, dual mode, dynamic type, and URLs.
• Workspace State Persistence: Remembers your chosen device, secondary device, dual mode toggle, orientation, dynamic type scale, and zoom level per workspace.

Device Profiles

Keyboard Shortcuts

Configuration Settings

Project Structure

smart-canvas/
├── src/
│   ├── extension.ts             # Lifecycle, commands, status bar, state persistence, custom device wizard
│   ├── proxyServer.ts           # Ephemeral Node.js reverse proxy & HMR bridge
│   ├── serverDetector.ts        # Dev server port auto-detection (3000, 5173, 4200, etc.)
│   ├── sidebarProvider.ts       # Activity Bar docked preview provider
│   ├── deviceFrames.ts          # Device presets, bezel styling, custom device registry & validation
│   └── webview/
│       └── getWebviewContent.ts # Dot-grid canvas, UI controls, route bar & screenshot engine
├── media/
│   ├── icon.svg                 # Smartphone shell vector extension icon
│   ├── icon.png                 # 128x128 marketplace icon
│   ├── smart-canvas-dark.svg    # Title bar icon (Dark theme)
│   └── smart-canvas-light.svg   # Title bar icon (Light theme)
├── scripts/
│   └── publish-helper.js        # Dual-registry automated packager & publisher
├── esbuild.js                   # High-speed bundler configuration
├── package.json                 # Manifest, configuration settings, keybindings
├── tsconfig.json                # TypeScript compiler configuration
└── README.md                    # Project documentation & user guide

License

MIT © wisdom-oviemuno