Mockup Generator, Single File

Mockup Generator

Load a URL (iframe) or image and render it inside a device frame. Drag and drop an image over the device screen in Image mode.

Presets

Saved presets

New preset name

Presets are stored in localStorage in this browser.

Device Frame

Template

Rotation

0°

Templates load frame images from your local folder. Put images in ./frames/ and adjust paths in the JS config.

Device scale

Frame size

Enlarges the frame and screen area without visually zooming iframe content.

Content

URL Mode Image Mode

URL

Tip: some sites block embedding in iframes (X-Frame-Options / CSP). If a site refuses to load, try a different URL.

Upload image

Image fit

Cover Contain

Image scale

Drag and drop an image directly onto the device screen.

Background

Custom color

Drop Shadow

Enable shadow

Blur

Opacity

Offset X

Offset Y

Spread (approx)

Spread is approximated via an extra box-shadow layer.

Actions

Export note: Exporting to PNG works reliably for image content. If you load a URL in an iframe, browsers block pixel capture of cross-origin iframes, so export will fallback to a screenshot warning.

Shortcut: press R to reset (when not typing in an input).

Preview

Ready

Drop an image here

Or use the Upload image button in the panel.