Apple publishes their own frames which is great, but coverage drops off pretty quickly for everything else, especially Android and Windows. I've been collecting and making my own over the years to fill the gaps, and try to keep them updated as new hardware comes out. They're free to use.

The set ships in a few different formats so you can drop them into whatever tool you're working in — design files in Sketch and Figma, a drop-in web component for case studies and blog posts, and the raw artwork for everything else.

If you're designing in Sketch or Figma, the frames are available as components ready to drop into your wireframes:

• Sketch file (via iCloud Drive) — the full set with coordinates, resolutions, and sizing guides.
• Figma — iPhone 17 Pro / Max / Air
• Figma — iPad Pro

There's also a Viewport file in the iCloud Drive that lets you drop them straight into existing wireframes.

If you're working on a website (a portfolio page, a case study, a blog post) and want device-framed screenshots, I host the frames as a drop-in component at jjy.me/deviceframe/v1. Two tags and your screenshot renders inside the right bezel — no npm or build step.

<link rel="stylesheet" href="https://jjy.me/deviceframe/v1/device-frame.css">

<img class="device-frame iphone-latest" src="screenshot.png" alt="App screenshot">

<script src="https://jjy.me/deviceframe/v1/index.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    window.DeviceFrame.init({
      manifest: 'https://jjy.me/deviceframe/v1/manifest.json'
    });
  });
</script>

A few examples of how to specify the device:

<!-- Alias; auto-updates as new hardware lands -->
<img class="device-frame iphone-latest" src="app.png" alt="App on iPhone">

<!-- Specific device by ID -->
<img class="device-frame" data-device-id="macbook-pro-16" src="app.png" alt="App on MacBook">

<!-- Specific colour variant -->
<img class="device-frame" data-device-id="iphone-17-pro-cosmic-orange" src="app.png" alt="…">

The full resolution rules, the alias list, and the advanced options are below.

For anything not covered above (Affinity, Illustrator, slide decks, presentation software), the raw assets are on GitHub. The repo also lists credits for the frames that aren't entirely my own work.

The runtime resolves device IDs in priority order:

1. data-device-id attribute — explicit, always wins.
2. A non-device-frame CSS class on the element — use an alias or a full device ID.

<!-- Explicit ID via attribute (recommended for colour variants) -->
<img class="device-frame" data-device-id="iphone-17-pro-cosmic-orange"
     src="screenshot.png" alt="…">

<!-- Alias via class (auto-updates when new hardware releases) -->
<img class="device-frame iphone-latest" src="screenshot.png" alt="…">

<!-- Full ID via class -->
<img class="device-frame macbook-pro-16" src="screenshot.png" alt="…">

Aliases resolve to the newest device in their category. They update automatically as new devices are added — so your markup stays evergreen.

Your screenshot should match the screen resolution listed in the catalogue below — that's the pixel area the bezel artwork exposes. The runtime scales everything via CSS, so you don't need to produce images at native frame resolution; you just need the correct aspect ratio.

If your screenshot has a different aspect ratio to the screen area, object-fit: cover is applied — the image fills the screen, cropped to centre.

Custom selector

By default the runtime targets .device-frame. Pass a custom CSS selector to init() to scope it differently.

window.DeviceFrame.init({
  manifest: 'https://jjy.me/deviceframe/v1/manifest.json',
  selector: '.my-mockup'   // target .my-mockup elements instead
});

Custom aliases

Extend or override the built-in aliases by passing an aliases object.

window.DeviceFrame.init({
  manifest: 'https://jjy.me/deviceframe/v1/manifest.json',
  aliases: {
    ...window.DeviceFrame.defaults.aliases, // keep built-ins
    'my-phone': 'iphone-17-pro-max'         // add your own
  }
});

Inline manifest

If you want to avoid the manifest fetch (e.g. for strict CSPs), set window.DEVICE_FRAME_MANIFEST to the manifest object before calling init() and the runtime will use it directly.

Fallback when an asset is missing

If a device has no frame artwork (asset_exists: false in the manifest), the wrapper renders with a plain rounded border and light background — so your screenshot is still displayed cleanly rather than broken.

32 primary devices, 58 colour variants, 90 IDs total. Colour variants share the same geometry as their base device — use the full variant ID to select a specific finish.