Skip to content
MewixMewix

Mockups

Free 3D phone mockup editor

Drop your UI onto a real Pixel phone or Galaxy Book laptop, light it like a product shot, and export a crisp PNG in the browser.

Updated

mewix.net/mockups/editor
The Mewix mockup editor with a Pixel phone and a Galaxy Book laptop on the canvas

Android phone & laptop mockups

The editor maps your screenshot onto real device meshes — Google Pixel 9 Pro XL for phone shots and Samsung Galaxy Book 2 for laptop shots — with studio HDRI lighting and HQ PNG export.

  • Android Pixel phone and Galaxy Book laptop with custom screen art
  • Move, rotate, and frame the shot like a product studio
  • Runs locally — nothing uploaded to Mewix servers
Open mockup editor
Android 3D phone mockup with colorful screen art on a dark studio backdrop

Why 3D mockups on Mewix

Unlike flat phone frames, Mewix uses WebGL scenes where lighting, angle, and materials react like a product photo.

Real 3D devices

Orbit, move, and rotate a real phone model — not a flat PNG frame.

Drop your screen

Add a screenshot or UI and see it mapped onto the display instantly.

Studio lighting

HDRI environments, exposure, and key/fill/rim lights for product-shot looks.

HQ export

Download supersampled PNGs for stories, ads, and landing pages.

How the mockup editor works

Five steps from blank canvas to a shareable device mockup — private and free in your browser.

  1. Step 1

    Open the mockup editor

    Go to the free 3D mockup editor on Mewix — no account required.

  2. Step 2

    Pick a device

    Choose a Pixel phone or a Galaxy Book laptop for the shot.

  3. Step 3

    Drop your screenshot

    Add your UI so it maps onto the device display.

  4. Step 4

    Frame and light

    Orbit the camera, adjust studio lighting, and set the angle.

  5. Step 5

    Export PNG

    Download a high-quality PNG for stories, ads, or landing pages.

What you can build

The editor places real 3D models, not flat frames, on a canvas. Two devices are available today, and you can add several to one scene, such as a phone in front of a laptop:

  • Google Pixel 9 Pro XL in Porcelain, Rose Quartz, Hazel or Obsidian.
  • Samsung Galaxy Book 2 laptop in Silver or Graphite.

Because the devices are 3D, you can orbit the camera and rotate each one, and the screen catches light and reflections the way a product photo would. Lighting comes from an HDRI environment; you can load your own .hdr file if you have one.

Getting your screenshot to fit

Your image fills the device screen edge to edge. If its shape differs from the screen's, the middle is kept and the edges are trimmed, so a wide desktop capture on the phone loses its sides. For the phone, use a full-height screenshot from a modern Android phone or iPhone; for the laptop, a normal widescreen capture of a browser or app window. Keep anything important away from the very edges. PNG, JPG, WebP and GIF screenshots all work.

Canvas sizes and export

Canvas presetSize at 1×
Full HD (default)1920 × 1080
Square 1K1080 × 1080
Portrait 4:51080 × 1350
Story / Reel1080 × 1920
Wide banner2560 × 1080
4K UHD3840 × 2160

HD, A4 at 300 dpi, Phone frame and Tablet are also in the list, and you can type a custom size. Export multiplies the canvas by 1, 2 or 3, up to 8192 pixels on the longest side; past that the editor drops to the largest multiple that fits. With Backdrop set to None, a PNG keeps the background transparent. JPG cannot store transparency, so it fills with white, but the file is much smaller.

Save the project, not just the picture

Save project writes a .mewix file with the devices, camera, lighting and screen images in it. Open project restores the scene exactly, so you can swap in a new screenshot and export again without rebuilding the shot. The file contains your screenshots, so share it only with people who may see them.

What happens to your screenshots

The editor runs with WebGL in your browser. It downloads the device models and lighting files from Mewix, but your screenshots are never sent anywhere: they are read, placed on the screen and exported on your own machine. That makes it safe for unreleased designs and client work under NDA.

Questions

Is there an iPhone model?

Not yet. The phone available now is the Pixel 9 Pro XL. An iPhone screenshot still fits it well because the screen shapes are close.

The editor is slow on my laptop.

3D rendering leans on the graphics chip. Close other heavy tabs, keep the canvas at Full HD while you arrange the scene, and only raise the export multiplier at the end.

Can I put a video on the screen?

No, the screen takes still images only. For a moving demo, export one frame per scene and sequence them in a video editor.

How do I add a frame-free screenshot to a slide instead?

If you only need the screenshot itself at a set size, the image resizer is quicker.

Ready to frame your app?

Open the free 3D mockup editor and drop in a screenshot.

Open mockup editor