TypeScript/Node core library for applying device frames to screenshots and retrieving up-to-date media of device frame PNGs (with metadata)

npm install device-frames

import { applyFrame, listDevices } from "device-frames";

// List devices
const allDevices = await listDevices();

// Apply a frame
await applyFrame(
  "input.png",
  "16-pro-max",
  "black-titanium",
  "output/framed.png",
  { category: "apple-iphone" }
);

Notes

• Device frames and masks are fetched at runtime from https://github.com/jonnyjackson26/device-frames-media. This ensures you always have updated data. If you need a frame that's not listed there, please add it
• The package depends on sharp for image compositing, so it runs in Node.js (server, CLI, build scripts) — not in the browser.
• Device and variation names use lowercase kebab-case (e.g., "16-pro-max", "black-titanium").

Read more about this project on my website
Github repo
device-frames-media Github repo