Device Frames
Wrap screenshots in browser, iPhone, iPad, and MacBook frames with matching viewport behavior.
Use device when the image should communicate product context, platform, or screen size.
Devices
| Device | Best for |
|---|---|
browser-macos | Web apps, docs pages, landing pages, dashboards. |
browser-windows | Enterprise software, Windows-first products, cross-platform demos. |
iphone-16-pro | Mobile app screens, responsive pages, app store shots. |
ipad-pro-m4 | Tablet apps, editor UIs, media products. |
macbook-pro-16 | Big product hero images and desktop SaaS screenshots. |
json{ "url": "https://example.com", "device": "macbook-pro-16", "background_preset": "midnight", "shadow": "soft", "aspect_ratio": "16:9"}
Device colors
Physical device frames support color variants. Availability depends on the device.
json{ "url": "https://example.com", "device": "iphone-16-pro", "device_color": "natural-titanium", "background_preset": "aurora"}
Browser chrome
Browser chrome is selected through the device field:
json{ "device": "browser-macos"}
json{ "device": "browser-windows"}
The old window_controls field is not supported. Use browser-macos or browser-windows.
Frame ratio and scale
Use frame_ratio when the content inside the frame should have a known shape, independent of the final canvas.
json{ "url": "https://example.com/dashboard", "frame_ratio": "16:9", "aspect_ratio": "1:1", "device": "browser-macos", "background_preset": "arctic"}
Use device_scale for normal device sizing and frame_scale for advanced camera-style compositions.