How to Use

A quick guide to creating beautiful device mockups.

1

Upload Screenshots

Drag and drop one or multiple screenshots onto the upload zone, or click "browse files". Supported formats: PNG, JPEG, WebP.

💡 Tip: You can select multiple files at once for batch processing.
2

Choose a Device

Pick the device frame you want. Available options:

  • iPhone – Modern iPhone with Dynamic Island
  • iPad – Tablet style with uniform bezels
  • Android – Modern smartphone with punch-hole camera
  • Apple Watch – Smartwatch with crown
  • MacBook – Open laptop with notch
  • Laptop – Generic Windows-style laptop
  • iMac – All-in-one desktop with stand
  • Smart TV – Television with dual legs
3

Customize

Adjust the look to your liking:

  • Frame Color – Dark, Silver, Gold, Blue, or Red
  • Background – Solid or gradient backgrounds
  • Scale – Make the mockup larger or smaller
  • Orientation – Portrait or landscape (where applicable)
4

Export

Choose your format and export:

  • PNG – Lossless, best quality, larger file
  • JPEG – Smaller file, good for web (adjust quality)
  • WebP – Modern format, excellent compression

Use Export Current for one image, or Export All (ZIP) to download every screenshot as a ZIP archive.

5

Install as App

On supported browsers, click the install banner (or use your browser's "Add to Home Screen" option) to install Mockup Studio as a standalone app. Once installed it works offline.

6

Settings & Themes

Visit the Settings page to switch themes, change the default export format, manage storage, and more.

FAQ

Where do my images go?

Nowhere. They stay on your device. All processing happens in your browser.

What image dimensions work best?

Use screenshots that match the aspect ratio of your target device for best results (e.g., 1170×2532 for iPhone, 2048×2732 for iPad).

Can I use this offline?

Yes! Once installed as a PWA, the app works completely offline.

Why is my exported image low quality?

Make sure the JPEG/WebP quality slider is set high. PNG is always lossless.

How do I get the best-looking export?

Use high-resolution screenshots, set scale to 100%, export as PNG, and pick a contrasting background.

Why is the scale slider not working?

In v2.0.1, scale now properly applies via CSS custom property. If you still see issues, try refreshing the page.