Design & UI Validation

Screenshot Tool

Capture pixel-perfect PNG screenshots of any device frame — viewport-only or full-page scroll — for bug reports, design handoffs, and marketing assets.

Overview

Frame-Level PNG Capture

The Screenshot Tool exports a high-fidelity PNG of any device frame currently rendered on the canvas. Because Vispane loads pages through its server-side proxy on a same-origin context, it avoids the cross-origin "tainted canvas" restriction that blocks screenshot capture in standard browser tools.

  • Per-Frame Selection: Choose exactly which device frame to capture (e.g., only the iPhone 14 viewport, or only the Desktop 1440px frame).
  • Viewport vs. Full-Page: Capture only what's visible in the viewport, or automatically scroll and stitch the entire page into one seamless PNG — including content below the fold.
  • Instant PNG Download: The captured image is downloaded directly to your filesystem with a descriptive filename including the device name and timestamp.
  • High Fidelity: Screenshots are captured at device pixel ratio, ensuring crisp rendering on both standard and HiDPI/Retina displays.
ℹ️
Proxy requirement is intentional Screenshots require the Vispane proxy to be active. Cross-origin iframes cannot be rasterized due to browser security restrictions (tainted canvas). The proxy makes all frames same-origin, enabling full-fidelity capture that would otherwise be impossible.
Pro Tips
💡
Capture mobile screenshots for app store assets Use the iPhone frame at 390×844px to capture marketing screenshots that match the exact dimensions required by the Apple App Store and Google Play Store for web app listings.
💡
Use full-page capture for bug reports When filing a bug report, use the full-page screenshot instead of a viewport crop. The full-page view often reveals contextual layout issues that are invisible when viewing only the affected area in isolation.
💡
Capture OG image previews Navigate to a page in your app, set the preview frame to 1200×630px (standard OG image dimensions), and screenshot it. This gives you a real-world preview of how your page will look when shared on social media.