ViewPort 🖥️📱

Live device preview for HTML, CSS and JS — see your webpage in real device frames instantly.

ViewPort is a VS Code extension that lets you preview your HTML files in real device frames — just like Flutter's Device Preview, but for web developers.

✨ Features

• 📱 29+ Device Frames — Android, iPhone, iPad, MacBook, Desktop
• ⚡ Live Reload — Save your file, preview updates instantly
• 🌐 Works Offline — 100% local, zero tracking, completely private
• 🎨 Auto Scale — Device frames auto-fit your screen size
• 🖱️ Right Click Support — Right click any HTML file → Open with ViewPort

🚀 How to Use

1. Open any HTML file in VS Code
2. Click Go ViewPort in the bottom status bar
3. Your browser opens with live device preview
4. Select any device from the sidebar
5. Edit and save your file — preview updates automatically!

📱 Supported Devices

Android — Samsung Galaxy S25, S20, A54, Note 20 Ultra, Google Pixel 9 Pro, Pixel 8, Pixel 6a, OnePlus 8 Pro, Sony Xperia 1 II, Nexus 5, Nexus 6P

iPhone — iPhone 16 Pro, 16 Pro Max, 14 Pro, 13 Mini, 11 Pro Max, SE 3rd Gen

iPad — iPad Air 11" M2, iPad Air 13" M2, iPad Pro 11" M4, iPad Pro 13" M4, iPad 10th Gen, iPad 11th Gen

MacBook — MacBook Air 13", MacBook Pro 15", MacBook Pro 14" M3, MacBook Pro 16" M3

Desktop — Laptop HD, Desktop FHD, Desktop QHD

🔒 Privacy First

ViewPort runs entirely on your local machine. No data is sent anywhere. No internet required.

💡 Tip

Use ViewPort alongside your CSS to build perfectly responsive websites without switching between browser tabs!