The Device Mockup Generator is 100% client-side. When you drop or choose a file it is decoded locally as a same-origin data URL into an HTMLImageElement; the device frame, the notch or browser chrome, the laptop base or monitor stand, the background gradient and the drop-shadow are all painted on an HTML5 <canvas>, and the final PNG is produced by canvas.toBlob() on your machine. Because the image is a same-origin data URL, the canvas is never “tainted”, so export always succeeds without a server. There is no upload endpoint, no cloud rendering and no external stock-photo or AI relighting in the path — the only network use on the page is the site’s ads. The tool works offline once cached and discards everything when you close the tab.

The two options mirror CSS object-fit. Cover fills the screen edge-to-edge and trims the parts of the screenshot that don’t fit the screen’s aspect ratio — you get a clean full-bleed screen, at the cost of some cropping if the ratios differ, which you can nudge with the Pan X / Pan Y and Zoom sliders. Contain fits the whole screenshot inside the screen so nothing is cropped; if the ratios differ you’ll see letterbox bands (which sit on the screen’s dark “off” colour). For a pixel-perfect result with neither cropping nor letterboxing, capture your screenshot at the frame’s native aspect ratio (e.g. a tall ~19.5:9 capture for the modern phone, 4:3 for the tablet).

The preview renders at a base frame width (~900px), and export multiplies that by your chosen scale, re-running the whole composite so the frame edges, rounded corners and screenshot stay crisp rather than being upscaled. Because a PNG is a fixed-resolution raster, pick a size comfortably above where you’ll use it: 1× is fine for a thumbnail or slide, 2× is the safe default for websites and Retina screens, and 3× suits print or hero banners. Transparent backgrounds export as true PNG transparency so the mockup drops cleanly onto any page. All rendering is local, so extremely large exports are bounded only by your device’s available memory.

To keep the tool self-contained and free of trademark issues, the frames are hand-defined generic devices rather than exact replicas of any brand’s hardware. They use realistic proportions and details — a notch or punch-hole and a home-indicator on the modern phones, a camera dot and bezel on the tablet and laptop, a keyboard base or monitor stand, a browser toolbar with traffic-light dots — so a screenshot reads clearly as “on a device”, but there are no logos and the shapes are not certified matches for a particular model. This is deliberate: it means the whole library ships as inline canvas geometry with no external device images to download, which is what keeps everything private and offline.