DEV Community

Cover image for I built an offline, lightweight VS Code extension to preview responsive designs in real device frames
meherviewport
meherviewport

Posted on

I built an offline, lightweight VS Code extension to preview responsive designs in real device frames

Hey DEV community! 👋

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.

So, I built ViewPort — a VS Code extension that lets you preview your HTML/CSS/JS in real device frames directly inside your editor.

✨ Why I built this:

  • 100% Offline: Everything runs locally on your machine.
  • Privacy First: Zero telemetry or data tracking. Your code stays yours.
  • Real Device Frames: Accurate CSS dimensions for devices like iPad, Pixel, and Desktop.
  • Lightweight: Doesn't hog your system resources.

🚀 Try it out:

You can install it directly from the VS Code Marketplace:
Download ViewPort Here

I would love to hear your thoughts, feedback, or any feature requests you might have. Let me know what you think!

Top comments (0)