About Mockframe

Mockframe places your design onto photographs of real devices — a MacBook on a desk, an iPad on a stone slab, a display in a studio — and does the whole thing inside your browser tab.

What it is

A mockup is a picture of your work shown on a real device instead of floating on a blank canvas. It is what you put on a landing page, in a pitch deck, on a portfolio, or in an app store listing.

Most tools do this by pasting your screenshot onto a flat rectangle. Mockframe starts from an actual photograph and warps your design onto the screen with the same perspective the camera saw, then clips it to the screen's rounded corners and keeps whatever the lens kept — the notch, the Dynamic Island, the reflections on the glass. The result reads as a photo of your product, not a sticker on a photo.

Who it's for

• Designers presenting a screen to a client without opening Photoshop and hunting for a smart object.
• Developers and indie makers who need a decent-looking hero image for a README, a landing page, or a launch post.
• Marketing and content people producing social images on a schedule, where a two-minute turnaround matters more than pixel-level control.
• Anyone handling work they cannot upload — unreleased products, client material under NDA, internal dashboards.

How to use it

1. Pick a scene. Browse the library on the left and choose the device and setting that fits your story. The library is grouped by MacBook, iPad and Browser.
2. Add your design. Drag an image onto the canvas, click to browse, or paste with ⌘V. Each scene tells you the recommended size so your design fills the screen exactly.
3. Adjust the fit. Choose Width, Cover, Contain or Stretch, then nudge scale, position and rotation. Drag directly on the canvas to move the design, scroll to zoom it.
4. Export or copy. Export as PNG, JPG or WebP at up to 2×, or press Copy to put the image straight on your clipboard and paste it into Figma, Slack or Notion.

Your files stay on your machine

There is no upload step and no account. The scene photograph is downloaded to your browser, your design is read from your disk, and the two are combined on a canvas element in the same tab. Nothing is transmitted, so nothing can be stored or leaked by us — once the page has loaded you can go offline and everything still works.

Common questions

Is Mockframe free?

Yes. Every scene and every export size is free, with no account and no watermark.

Are my designs uploaded to a server?

No. The whole pipeline runs in your browser. Your image is never sent anywhere.

What size should my design be?

Each scene shows a recommended size matching the real device screen: 1440px wide for laptops and displays, 1024px for iPad, 390px for iPhone. Upload a 2× version of that size to keep exports sharp.

Which formats can I export?

PNG, JPG and WebP, at 0.5×, 1× or 2×. Copy to clipboard always produces a PNG, because that is the only image format browsers accept on the clipboard.

Can I use the results commercially?

Yes. The exported image is yours to use — on your site, in your deck, in paid campaigns.