About

What MochiMockup is

MochiMockup is a browser-based mockup generator that places a flat screenshot onto a photorealistic device — iPhone, MacBook, iPad or Apple Watch — in about 30 seconds. It runs on the web and as a Figma plugin, exports up to 4K, and is free to try without an account.

The catalog, in numbers

Counted off the live catalog when this page was last built, not rounded up for the copy.

545templates in the catalog
13free, no account needed
3840pxwidest export (4K, Pro)
23guides, articles and comparisons
DeviceTemplatesBrowse
Phones298phones
Laptops183laptops
Tablets35tablets
Watches29watches

How a mockup is actually made

Most “mockup generators” scale your image into a rectangle and call it a day. Here is what happens between dropping a file in and getting a render back.

  1. 01

    The template is a photographed-style scene with a green screen where the display sits.

    Each template carries the four corner coordinates of its screen, its corner radius, and — where the device has one — a hand-drawn outline of its notch or Dynamic Island.

  2. 02

    Your design is warped onto that screen with a homography, not pasted flat.

    An inverse homography maps every pixel of the template back to a point on your design, so the result follows the device's real angle and perspective instead of sitting on top of it.

  3. 03

    The green screen is keyed out and despilled.

    Keying only runs near the screen quad, so green elsewhere in the scene survives. A despill pass then removes the green cast that keying leaves along the edges of the glass.

  4. 04

    The layers are composited server-side and exported.

    Compositing runs on raw RGBA buffers on the server, which is why a 4K export is identical whatever browser you opened it in — and why the watermark on a free export is burned into the pixels rather than drawn over them.

Who it is for

App teams

App Store and Google Play screenshots at the exact sizes Apple and Google publish.

Founders and marketers

Landing-page heroes, Product Hunt galleries and social posts without a designer in the loop.

Designers in Figma

The same render from a selected frame, without leaving the canvas or re-uploading anything.

Questions people actually ask

Who makes MochiMockup?

MochiMockup is an independent product, self-funded rather than venture-backed. It has been publicly available since July 2026.

What does MochiMockup actually cost?

Free templates export at 2K with a watermark, and need no account. Pro is $9.99 per month and unlocks the full catalog, 4K exports (3840 px wide) and the Figma plugin. If you only need one image, a single export on any Pro template is $2.50 with no subscription.

Can I use the mockups commercially?

Yes. Every render is cleared for editorial and commercial use — App Store and Google Play listings, marketing sites, client deliverables and social media.

Does my design get uploaded anywhere?

Compositing happens on our server, so your image is sent to it to be rendered. It is used to produce your export and is not published in the catalog or shown to anyone else.

How is this different from a Photoshop mockup file?

A Photoshop mockup is a PSD with a Smart Object you have to open, replace and re-export by hand. MochiMockup does the same perspective placement in the browser or inside Figma, in about 30 seconds, without the file or the software.