Multi-device marketing shot

The web team needs this for the homepage or a press kit. Desktop, tablet, and phone in one frame. The three devices have to agree, and the scale ratios have to be right. Manually screenshotting three viewports and compositing them gets those ratios wrong every time.

The people doing this already have the product UI. They need one wide image that shows three frames together. They should not screenshot a desktop, a tablet, and a phone, then scale them by eye in a design file.

The job is one wide image with three device frames arranged together. One data file sets the content on each device. One command redraws all three. When the content should change, you swap the file and export again. Desktop, tablet, and phone stay in the same arrangement.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, one data file, one image that holds three frames. There is no batch product, no queue, no orchestrator.

The component is .lerret/marketing/multi-device.jsx. It draws desktop, tablet, and phone frames arranged together. The content on each device comes from the data file. The arrangement and the scale live on the component, which is why the ratios stay put when you re-export. The file lives under .lerret/marketing/.

Data is one data file setting the content shown on each device. Same component, that file swapped when the content should change. One run, one image. The three frames read from that file, so they cannot silently show three different versions of the product.

The image is a PNG at 1600×1000, the shipped multi-device size. One wide PNG, three frames, homepage or press kit.

You use Lerret because one command redraws all three devices consistently. Manually screenshotting three viewports and compositing them gets the scale ratios wrong every time. A design file with three pasted screenshots will get the phone too large or the desktop too small, and it will do it again the next time the UI changes.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.