{"id":13529987,"url":"https://github.com/c0bra/deviceframe","last_synced_at":"2025-04-04T19:15:17.946Z","repository":{"id":56464397,"uuid":"103960874","full_name":"c0bra/deviceframe","owner":"c0bra","description":":iphone: Put device frames around your mobile/web/progressive app screenshots.","archived":false,"fork":false,"pushed_at":"2020-11-09T20:53:31.000Z","size":1345,"stargazers_count":583,"open_issues_count":16,"forks_count":16,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-12-06T09:21:10.217Z","etag":null,"topics":["android","automation","frame","ios","mobile","screenshot"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/c0bra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-18T16:00:09.000Z","updated_at":"2024-12-03T22:56:42.000Z","dependencies_parsed_at":"2022-08-15T19:11:01.427Z","dependency_job_id":null,"html_url":"https://github.com/c0bra/deviceframe","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fdeviceframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fdeviceframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fdeviceframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c0bra%2Fdeviceframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c0bra","download_url":"https://codeload.github.com/c0bra/deviceframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234930,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","automation","frame","ios","mobile","screenshot"],"created_at":"2024-08-01T07:00:41.735Z","updated_at":"2025-04-04T19:15:17.907Z","avatar_url":"https://github.com/c0bra.png","language":"JavaScript","funding_links":[],"categories":["Development","JavaScript","\u003ca name=\"graphics\"\u003e\u003c/a\u003eGraphics"],"sub_categories":["Mobile Development"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"example.png\"\u003e\n\u003c/div\u003e\n\n\u003e  Put device frames around your mobile/web/progressive app screenshots.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eThis tool is in active development. If something seems off, file an issue!\u003c/strong\u003e\n\u003c/div\u003e\n\n# Get it\n\n    npm install -g deviceframe\n\n# Use it\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"animation.gif\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\nPass in filenames, file globs, websites urls, or image urls. In any combination or order.\n\n```\n$ dframe cat.jpg\n$ dframe http://github.com\n$ dframe http://github.com dog.png https://i.imgur.com/aw2bc01.jpg *.bmp\n```\n\ndeviceframe 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.\n\nThe frames will be downloaded from a CDN and cached locally in case you want to re-use them.\n\nIf you want to use it non-interactively you can pass frames in with the `--frame flag`:\n\n```\n$ dframe cat.jpg --frame \"iphone 6\"\n$ dframe cat.jpg --frame \"iphone 7 silver\" --frame \"iphone 5 blue\"\n```\n\nYou can also use one flag and separate the devices by commas:\n\n```\n$ dframe cat.jpg --frame \"iphone 6s, macbook air\"\n```\n\n# Mobile Apps\n\n_Coming Soon_\n\n# Hybrid Apps\n\nMake a screenshot of an Ionic app locally:\n\n```\n$ ionic serve\n```\n\nIn another terminal:\n\n```\n$ dframe --delay 5 http://localhost:8100\n```\n\n# Websites\n\nFor website URLs, deviceframe will load the page with the aspect ratio and pixel density of selected device(s).\n\nHere's Product Hunt's website on a Macbook Air, iPad, and iPhone:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"multi-shot.png\"\u003e\n\u003c/div\u003e\n\n# Devices\n\nCurrently 52 unique devices. Run `dframe --devices` to get a list\n\n* 166 phone + color combinations (Apple, Google, Samsung, HTC, Motorola)\n* 6 tablets (iPad, Surface, Nexus 9)\n* 9 computers (Apple, Dell, Microsoft)\n* 5 monitors\n* 4 watches (Apple Watch 1+2, Moto 360, Sony SmartWatch 3) either open or closed.\n\n# Notes\n\n* deviceframe caches frame images in a cache directory using [env-paths](https://github.com/sindresorhus/env-paths)\n* Pixel ratio information comes from https://mydevice.io/devices/\n* iPhone X renders the image below the notch.\n\n# Attributions\n\nLogo icon created by Vallone Design from the Noun Project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc0bra%2Fdeviceframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc0bra%2Fdeviceframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc0bra%2Fdeviceframe/lists"}