📱 Put device frames around your mobile/web/progressive app screenshots.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data Use cluster module to process frames in parallel for parse-frames.js Jun 13, 2018
lib Remove unused code Oct 27, 2017
scripts Fix indentation Jun 22, 2018
test Add test file Oct 27, 2017
.editorconfig Initial commit Sep 18, 2017
.gitattributes WIP Sep 21, 2017
.gitignore WIP: screenshots Oct 16, 2017
.npmrc WIP Sep 21, 2017
.travis.yml WIP Sep 21, 2017
3device.png Round device dimensions down. Update readme with 3-device image Oct 18, 2017
LICENSE License data files with MIT Jun 6, 2018
README.md Rename README to README.md Apr 2, 2018
animation.gif Add animation Oct 16, 2017
cli.js Fix indentation Jun 22, 2018
example.jpg WIP: screenshots Oct 16, 2017
example.png Optimize screenshot Oct 16, 2017
logo.png WIP: screenshots Oct 16, 2017
multi-shot.png Update screenshots Oct 18, 2017
package.json v1.3.0 Jun 22, 2018
yarn.lock Fix lockfile Apr 30, 2018

README.md

Put device frames around your mobile/web/progressive app screenshots.

This tool is in active development. If something seems off, file an issue!

Get it

npm install -g deviceframe

Use it


Pass in filenames, file globs, websites urls, or image urls. In any combination or order.
$ dframe cat.jpg
$ dframe http://github.com
$ dframe http://github.com dog.png https://i.imgur.com/aw2bc01.jpg *.bmp

deviceframe will prompt you for the frames you want to use. You can select multiple frames and search by typing. Once you have selected all the frames you want to use, hit ESC.

The frames will be downloaded from a CDN and cached locally in case you want to re-use them.

If you want to use it non-interactively you can pass frames in with the --frame flag:

$ dframe cat.jpg --frame "iphone 6"
$ dframe cat.jpg --frame "iphone 7 silver" --frame "iphone 5 blue"

You can also use one flag and separate the devices by commas:

$ dframe cat.jpg --frame "iphone 6s, macbook air"

Mobile Apps

Coming Soon

Hybrid Apps

Make a screenshot of an Ionic app locally:

$ ionic serve

In another terminal:

$ dframe --delay 5 http://localhost:8100

Websites

For website URLs, deviceframe will load the page with the aspect ratio and pixel density of selected device(s).

Here's Product Hunt's website on a Macbook Air, iPad, and iPhone:

Devices

Currently 52 unique devices. Run dframe --devices to get a list

  • 166 phone + color combinations (Apple, Google, Samsung, HTC, Motorola)
  • 6 tablets (iPad, Surface, Nexus 9)
  • 9 computers (Apple, Dell, Microsoft)
  • 5 monitors
  • 4 watches (Apple Watch 1+2, Moto 360, Sony SmartWatch 3) either open or closed.

Notes

Attributions

Logo icon created by Vallone Design from the Noun Project