The latest articles on DEV Community by meherviewport (@meherviewport). https://dev.to/meherviewport https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3922415%2Fc2a87a0d-11f5-469e-95ff-0b210baa055c.png https://dev.to/meherviewport en meherviewport Sat, 09 May 2026 20:11:36 +0000 https://dev.to/meherviewport/i-built-an-offline-lightweight-vs-code-extension-to-preview-responsive-designs-in-real-device-4gb0 https://dev.to/meherviewport/i-built-an-offline-lightweight-vs-code-extension-to-preview-responsive-designs-in-real-device-4gb0 <p>Hey DEV community! 👋</p> <p>I often found myself frustrated by switching back and forth between VS Code and heavy browsers just to check if my UI was responsive. It breaks the flow and consumes too much RAM.</p> <p>So, I built <strong>ViewPort</strong> — a VS Code extension that lets you preview your HTML/CSS/JS in real device frames directly inside your editor.</p> <h3> ✨ Why I built this: </h3> <ul> <li> <strong>100% Offline:</strong> Everything runs locally on your machine.</li> <li> <strong>Privacy First:</strong> Zero telemetry or data tracking. Your code stays yours.</li> <li> <strong>Real Device Frames:</strong> Accurate CSS dimensions for devices like iPad, Pixel, and Desktop.</li> <li> <strong>Lightweight:</strong> Doesn't hog your system resources.</li> </ul> <h3> 🚀 Try it out: </h3> <p>You can install it directly from the VS Code Marketplace:<br> <strong><a href="https://marketplace.visualstudio.com/items?itemName=viewportdev.viewport" rel="noopener noreferrer">Download ViewPort Here</a></strong></p> <p>I would love to hear your thoughts, feedback, or any feature requests you might have. Let me know what you think!</p> webde vsco fronten produ