📱 ViewPort: Live Responsive Device Preview for VS Code

ViewPort is a powerful VS Code extension that lets web developers preview their HTML/CSS/JS files inside real device frames—just like Flutter's Device Preview, but built specifically for web developers. It opens directly in your browser with a sleek device sidebar, updating instantly as you code.

✨ Key Features

🥔 Built for "Potato PCs" (Ultra-Optimized)

If your computer can run VS Code, it can run ViewPort. Period.

Many responsive testing tools launch entirely separate Chromium instances, heavy Electron wrappers, or use bloated UI frameworks that consume massive amounts of RAM and spike CPU usage. We engineered ViewPort with extreme constraints to ensure zero performance degradation on low-end hardware:

• Zero UI Overhead: The ViewPort UI is written in 100% Vanilla JS, HTML, and CSS. No React, no virtual DOMs, no heavy build steps. It renders instantly.
• Uses Your Existing Browser: Instead of launching a heavy internal browser window, ViewPort opens seamlessly in your default lightweight browser, utilizing the memory footprint you're already using.
• Tiny Package Size: At just ~1 MB, it installs in seconds and takes up virtually no disk space.
• Aggressive Garbage Collection: The moment you click viewport.stop, our cleanupAll() routine instantly kills the Express server, terminates SSE connections, drops file watchers, and frees up your RAM completely. No ghost processes left behind.

🔥 The Ultimate Vanilla Web & Static Template Engine

ViewPort is engineered specifically for runtime web development. If you build with pure HTML, CSS, JS, or CSS frameworks, this tool is your holy grail.

• Handles Heavy Templates: Effortlessly renders complex, heavily-styled static sites and templates like HTML5 UP and Start Bootstrap smoothly.
• Framework Friendly: Works flawlessly with utility frameworks like Tailwind CSS, Bootstrap, and external JS libraries.
• Zero-Config Entry: Just right-click any .html file (even in sub-directories) and start.
• Honest Limitation: ViewPort is designed for runtime execution. It requires an .html file and does not currently support build-step frameworks like React, Next.js, or Astro.

🚀 Instant Launch & Controls

• Status Bar Button: A Go ViewPort button sits quietly in your bottom status bar. Click it to launch. When running, it displays ViewPort: filename.html. Click again to stop.
• Right-Click Support: Simply right-click any HTML file in your editor and select Open with ViewPort to launch instantly.

⚡ Lightning Fast Live Reload

• Powered by SSE: Uses Server-Sent Events (no heavy polling) to detect file changes.
• Zero Flickering: Save any file in your project folder and the browser updates instantly. It only reloads on actual file saves, preserving your scroll state and workflow.

🎯 True 1:1 Device Testing

• "Your Screen" (Auto Detect): The very first option automatically detects your actual hardware monitor resolution (e.g., 1366x768) and defaults to it when ViewPort opens.
• Auto Scale Engine: Device frames automatically scale to fit your browser window. Resize your browser, and the frames adjust seamlessly.
• Native Frame Styling: Mobile and tablet views feature rounded bezels, while Desktop/MacBook views mimic a laptop-style frame with realistic borders.

🔒 100% Offline, Private & Optimized

• No Internet Needed: Runs entirely on localhost. No data is ever sent out.
• Deep RAM Cleanup: We respect your machine's memory. The cleanupAll() function rigorously disposes of all resources on stop—SSE clients are closed, file watchers are disposed, and the Express server is completely shut down.
• Dynamic Port Handling: Defaults to port 3579. If it's busy, ViewPort recursively scans and binds to the next available port automatically.

📱 27+ Verified Device Frames

Real CSS viewport dimensions carefully verified against blisk.io and screensizechecker.com.

🛠️ Tech Stack & Package Info

ViewPort is intentionally built to be ultra-lightweight.

Package Footprint:

• extension.js: ~14 KB
• package.json: ~1.4 KB
• node_modules/: ~2.6 MB
• Total .vsix Size: ~1.09 MB

🔧 How It Works Under the Hood

User opens HTML file in VS Code 
       ↓
Clicks "Go ViewPort" in status bar 
       ↓
Extension starts Express server on port 3579 
       ↓
Browser opens localhost:3579/viewport-ui 
       ↓
ViewPort UI loads with dark-themed, 4px thin scrollbars 
       ↓
iframe serves the HTML file 
       ↓
User saves file → SSE sends reload signal → iframe reloads instantly

📦 Installation

Search for "ViewPort" in the VS Code Extensions Marketplace or install it directly via the Official Marketplace Link.

📋 Commands & Activation

• viewport.start: Starts ViewPort / Open with ViewPort
• viewport.stop: Stops the ViewPort server and runs memory cleanup.

Note: The extension activates smoothly on onStartupFinished, ensuring the status bar button is ready without delaying your editor's boot time.

🛡️ Privacy First

We believe in 100% privacy:

• Zero Tracking: We don't collect your code or usage data.
• Client-Side Processing: Everything runs locally on your machine.

☕ Support the Project

ViewPort is completely open-source and free to use. It was built to solve a genuine frustration for web developers.

If this tool saves you time, prevents headaches during responsive testing, or makes your workflow smoother, consider supporting its development! ❤️