viewport Simulator

A lightweight, responsive web preview Simulator tool built with Vanilla JavaScript. Preview websites, web apps, and local projects across custom viewports with real-time smooth scaling and dual-engine screenshot capture. I built it to solve a personal issue of how responsive my web projects are or how they look like on desktop, as i dont have a laptop or desktop as at the time of this development.

Key Features

• 🎛️ Real-Time Viewport Control: Smooth manual sliders for custom widths (320px to 3840px) and heights (480px to 2160px).
• 📱 Device Presets: Built-in viewport presets for popular devices including iPhones, iPads, Laptops, and 4K displays.
• 🔍 Auto-Fit Scaling: Intelligent auto-fit scaling logic that keeps the viewport centered and visible regardless of device size.
• 📸 Smart Screenshot Engine:
  • Localhost / Same-Origin: Direct high-resolution DOM rendering via html2canvas.
  • External / Cross-Origin: Headless cloud renderer integration to bypass browser CORS / iframe restrictions.

---

Getting Started

Because the project uses native ES Modules (import / export), it must be served through an HTTP server rather than opened directly as a file:// URL.

1. Clone the repository

git clone git@github.com:aina-deji/Responsive-Viewport-Simulator.git

cd Responsive-Viewport-simulator

2. Run locally

You can use any local development server:

• VS Code Live Server: Right-click index.html and click Open with Live Server.
• Python HTTP Server:

  python -m http.server 8000
  

• Node http-server:

  npx http-server . -p 8000
  

Open http://localhost:8000 in your browser.

🛠️ How Screenshot Capture Works

The Simulator uses a hybrid capture strategy to handle cross-origin security (CORS):

1. Localhost & Same-Origin URLs: Uses html2canvas to render the DOM directly to a high-density 2x scaled for pixel-perfect downloads.
2. External Websites (e.g., https://example.com): Cross-origin security prevents client-side DOM reading inside <iframe> elements. The engine automatically routes these requests through a headless API renderer (Microlink API), fetching exact viewport captures without CORS blocking.