Browser & Device Mockup Generator
Wraps a screenshot in a drawn browser, phone, tablet or laptop frame and exports SVG or PNG, entirely in your browser.
This tool needs JavaScript: the screenshot is read and framed by your browser, which is why nothing is uploaded.
The frames are drawn rather than photographed, so they scale to any size and do not date with the hardware.
Shown on the browser and window frames. Long addresses are cut at the end, keeping the host.
Transparent leaves the page behind the mockup showing, which is what you want for a PNG going onto a coloured slide.
Room for the shadow. Zero crops it.
The frame scales with it, so a half-size export looks the same rather than having a giant title bar.
The framed screenshot appears here. Nothing is sent anywhere: the frame is drawn around your picture in this tab.
A screenshot on a slide looks like a screenshot. The same screenshot inside a browser frame looks like a product, and the difference costs about four seconds of work.
This wraps a picture in a drawn frame: a browser with a tab and an address bar, a plain window, a phone, a tablet or a laptop. The frames are vector, so the export is sharp at any size, and the whole thing happens in your browser: the screenshot is read locally, embedded in the SVG, and rasterised by your own canvas if you want a PNG.
How to use
- Choose a screenshot, or drop one on the box.
- Pick a frame. Light and dark browsers, a window without the tab strip, a phone, a tablet, a laptop, or no frame at all with rounded corners.
- Type what the address bar should say.
- Set the background, the padding and the scale, then download the SVG or the PNG.
The SVG is the better file when you have the choice. It is a tenth of the size and it stays sharp when somebody puts it on a projector.
Example
A 1440 × 900 capture in the light browser frame, 64px of padding:
Frame browser-light
Address example.com/pricing
Background #eef1f6
Padding 64px
Scale 1
1440 × 900px in · 1568 × 1107px out · 1.7 MP · PNG 284 KBThe chrome is 79 pixels tall there. On a 400-pixel-wide capture it is 30, and on a 6000-pixel one it is 76: the bar is a proportion of the width with a clamp at each end, because a fixed height looks enormous on a small screenshot and disappears on a large one.
Pitfalls
Frames are stylised, not photographs of devices. Nothing here claims to be a particular phone or laptop, and the proportions are the conventions the shapes share rather than measurements. That is a deliberate choice: a drawn frame is a few kilobytes, scales to any size and does not go out of date, and a photographed device does none of those things and belongs to whoever photographed it.
Screenshot aspect ratios matter more than the frame does. A 16:9 capture in a phone frame is cropped to the phone’s shape by the fit, which usually looks wrong. Capture at the shape you intend to show: a device toolbar in the browser’s developer tools gives you the right proportions to start from.
An exported SVG must carry the picture inside it. The screenshot is embedded as a data URI rather than linked, so the file works when emailed. That is also why the SVG is roughly the size of the screenshot plus a third: base64 costs about 33 percent.
Transparent means transparent. With the background set to transparent, the PNG has an alpha channel and the area around the frame is empty. That is what you want for a slide with its own background, and it looks like a mistake in any viewer that shows transparency as white.
The shadow needs padding to live in. At zero padding the drop shadow is cut off at the edge of the canvas. Sixty-four pixels is enough at ordinary sizes; a large export wants more, because the blur scales with the frame.
A PNG is fixed at the size it was exported. Scaling it up in a presentation blurs it. The scale field is there to export at the size you need, and the SVG sidesteps the question.
Dark frames want dark screenshots. A light page inside a dark browser frame reads as a mistake rather than a style, and vice versa. Match them, or use the plain frame.
Compatibility
Works in any browser with a canvas and FileReader. Nothing is uploaded, nothing is stored, and closing the tab discards everything.
The frame is an SVG assembled from the screenshot’s own dimensions. Every measurement is a ratio of the screen width with a clamp either side, so the chrome is 30 pixels tall at the smallest and 76 at the largest, the phone bezel is 3.5 percent of the width between 10 and 34 pixels, and the shadow blur follows the frame rather than sitting at a fixed radius that looks like a bruise on a small mockup.
The address text is escaped before it goes into the SVG, along with the image reference, and the test
suite includes an address of "/><script> to prove the export cannot be turned into markup. Every frame
is also rendered in the suite and checked for balanced groups and for the absence of NaN and
undefined, which are the two ways a generated SVG usually fails: silently, and only in some viewers.
The PNG comes from drawing that same SVG onto a canvas, so the preview, the SVG download and the PNG download are the same document. It is made when you press the button rather than on every change, because encoding one is seconds of single-threaded work: a 518 by 7329 mockup of a long page froze the tab for most of a minute while the canvas worked, which is why the PNG is capped at 4096 pixels on the longest side and the SVG is not capped at all. If the browser refuses to rasterise it, the SVG download still works and the tool says so rather than handing you an empty file.