---
title: "Mockup: frame an image in a device"
description: "Present an image, video or iframe inside a device mockup (phone, tablet, laptop, screen) to showcase a screenshot or a demo."
url: https://docs.vivlab.com/en/editor/style/mockup
---

# Mockup

The **Mockup** subsection frames an image, video or iframe inside a device representation (phone, tablet, laptop, screen). Ideal for showcasing an app screenshot, a website or a demo video.

This subsection is only available on [Image](https://docs.vivlab.com/en/editor/menu/image.md), [Video](https://docs.vivlab.com/en/editor/menu/video.md), [Before/after image](https://docs.vivlab.com/en/editor/menu/image-before-after.md), [Parallax image](https://docs.vivlab.com/en/editor/menu/image-parallax.md) and [Iframe](https://docs.vivlab.com/en/editor/menu/iframe.md) elements.

<DocsScreenshot name="editor-mockup-presets" alt="MacBook, iPhone and iPad frames available for media." :width="343" :height="326" />

## Choose a mockup

The panel displays five mockups in a grid, each with a preview of the appearance:

- **Macbook Pro 16**: Apple laptop, 16-inch format.
- **Macbook Air M2**: Apple laptop, more compact.
- **iPhone 14 Pro Max**: vertical smartphone.
- **iPad Pro 12.9**: large tablet.
- **iMac 24**: Apple desktop.

Click on a mockup to apply it. Click again on it to deactivate it.

## Reset

The **Reset settings** button removes the mockup and the element returns to its normal rendering.