Device Mockup Kit — Browser, Laptop, Phone & Tablet Mockups

The Device Mockup Kit presents websites and apps on flat, modern devices without a Photoshop dependency. Twelve mockups cover light and dark browser windows, a laptop in graphite and silver, a monitor, landscape and portrait tablets, two phones and three scenes, including a laptop with a phone and a trio of phones.

Mockup Studio is a single HTML file that runs offline in any browser: choose a mockup, drop in your screenshots and download a high-resolution PNG. Every mockup is also supplied as an editable SVG and as a transparent PNG frame with its screen coordinates, so it works in whatever tool you already use.

• Portfolio and case-study images
• Product launch and landing page visuals
• App store and social media promotion
• Client presentations and pitch decks

• 12 mockups: browser, laptop, monitor, tablet, phone and scenes
• Mockup Studio: offline, no upload, PNG export up to 3200 × 2000
• Editable SVG for every mockup
• Transparent PNG frames at 3200 × 2000
• Screen_Areas.json with exact screen positions
• Graphite and silver device finishes

• Mockup_Studio.html
• 12 SVG mockups
• 12 transparent PNG frames (3200 × 2000)
• Screen_Areas.json
• README and licence

• Any modern browser for Mockup Studio (works offline)
• Figma, Illustrator, Affinity Designer and Inkscape (SVG)
• Photoshop, Affinity Photo, GIMP, Keynote and Canva (transparent PNG frames)

• Screenshots of your website or app
• A browser, or any editor that supports layers

1. Unzip the download and open Mockup_Studio.html in your browser

2. Pick a mockup, add a screenshot for each screen and download a PNG at up to 3200 × 2000

3. Or place a transparent PNG frame over your screenshot in any editor, using Screen_Areas.json for the screen position

4. Or open an SVG and replace the linked your-screen image

Devices are flat vector illustrations, not photographs, and are not modelled on any specific brand's hardware. Screens in the previews show DistroSource Originals templates.

• Personal — Use in your own non-commercial projects.
• Commercial — Use in one commercial project or for one client, including products you sell where the asset is not the main thing being sold.
• Agency — Use across multiple client projects and commercial work, up to the limits stated on this page.

No tier permits reselling or redistributing the files themselves.

Questions about Device Mockup Kit are handled through your DistroSource account — open a support ticket from the order and include your order number.