Live Mockups · Media · 2 min read

Put your design on the screen

Replace the picture on a device screen in Live Mockups, zoom it with Scale, and carry it to other scenes with one switch.

By Ruslan Latypov · Updated Nov 7, 2026

To put your design on a device screen in Live Mockups on ls.graphics, hover over the Media tile in the right panel, click the pencil to open Adjust media, click Replace Media and choose your picture, then click Okay to see it on the 3D device.

Editor: Live Mockups at ls.graphics/live-mockup-editor. Result: your picture on an iPad Pro screen, zoomed with Scale and carried to another iPad scene. In our test the screen was listed as 2752 × 2048 under Media.

Find the Media tile

Look for Media at the top of the right panel. The tile shows the picture on the screen right now, with its file name and the screen size, here 2752 × 2048. Hover over the tile: a pencil (Edit media) and a cross (Remove media) appear.

The Media tile with the pencil and cross buttons, beside the iPad Pro scene — Hover over the Media tile to show its buttons.

Open Adjust media

Click the pencil. The Adjust media window opens next to the right panel, with Replace Media, Add Url, a preview, a Scale field and an Okay button.

The Adjust media window with Replace Media, Add Url, a preview and the Scale field — Adjust media previews what is on the screen.

Replace the picture

Click Replace Media and choose your image. The preview and the screen on the canvas change together.

Adjust media previewing the new design while the iPad screen shows it too — The new design replaces the old one right away.

Scale the picture

Type 125 in Scale and press Enter to zoom into the picture. The preview and the screen update together. Type 100 to see the whole picture again.

The Scale field set to 125 and the picture enlarged in the preview — Scale zooms into the picture.

Close the window

Click Okay. Your design stays on the screen, and the Media tile shows its file name. Next, Turn and zoom the mockup to see it from other sides.

The iPad with the new design on its screen and in the Media tile — The Media tile shows the design on the screen.

Try another scene

Under the Media tile, turn on Transfer to another scene. Then click another scene card, for example another iPad in the iPad group. Your design comes along. Start with a 3D scene explains the scene list.

A tilted iPad Pro scene on the canvas showing the same design on its screen — The same design on a different iPad scene.

Questions

Does Live Mockups keep my design when I reload the page?

In our test, yes. After we reloaded Live Mockups in the same browser, the iPad scene still showed the earlier design on its screen, and the Media tile still listed the file name.

Why does a new scene show a gray gradient instead of my design?

Each scene keeps its own media, and a scene without a picture shows its default gradient. Turn on Transfer to another scene under Media before you click the next card, and the design is carried over.

How do I remove a design from a screen in Live Mockups?

Hover over the Media tile and click the cross, Remove media. In our test the screen turned bright green and the tile read Add your media. Clicking the tile opened Choose media with Upload File and Add Url.

Can I add a picture from a web address in Live Mockups?

Adjust media has an Add Url button beside Replace Media. In our test it opened a Choose media window with an address field and an Add button. We did not load a picture from it.