{"id":13657939,"url":"https://github.com/alexadam/printable-mockups","last_synced_at":"2025-04-05T19:12:09.346Z","repository":{"id":39497957,"uuid":"193932173","full_name":"alexadam/printable-mockups","owner":"alexadam","description":"Create printable UI mockups \u0026 wireframes templates","archived":false,"fork":false,"pushed_at":"2022-12-10T20:24:00.000Z","size":9839,"stargazers_count":522,"open_issues_count":23,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T18:06:30.871Z","etag":null,"topics":["design-tools","mockup-generator","mockup-illustration","mockup-image","mockups","pdf","pdf-document","pdf-generation","printable-mockups","react","ui-design","ui-mockups","ui-patterns","ux-design","ux-research","ux-ui","wireframes","wireframes-templates","wireframing","wireframing-tool"],"latest_commit_sha":null,"homepage":"https://www.printablemockups.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexadam.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":"2019-06-26T15:32:10.000Z","updated_at":"2024-09-18T04:30:15.000Z","dependencies_parsed_at":"2023-01-26T10:46:46.422Z","dependency_job_id":null,"html_url":"https://github.com/alexadam/printable-mockups","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexadam%2Fprintable-mockups","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexadam%2Fprintable-mockups/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexadam%2Fprintable-mockups/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexadam%2Fprintable-mockups/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexadam","download_url":"https://codeload.github.com/alexadam/printable-mockups/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386265,"owners_count":20930619,"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":["design-tools","mockup-generator","mockup-illustration","mockup-image","mockups","pdf","pdf-document","pdf-generation","printable-mockups","react","ui-design","ui-mockups","ui-patterns","ux-design","ux-research","ux-ui","wireframes","wireframes-templates","wireframing","wireframing-tool"],"created_at":"2024-08-02T05:00:53.916Z","updated_at":"2025-04-05T19:12:09.331Z","avatar_url":"https://github.com/alexadam.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# printable-mockups\n\nCreate printable UI mockups/wireframes templates\n\n## Try it: [Demo](https://alexadam.github.io/demos/printable-mockups/index.html)\n\n\u003cimg src=\"https://github.com/alexadam/printable-mockups/blob/master/imgs/ex.gif?raw=true\" width=\"800\"\u003e\n\n\u003cimg src=\"https://github.com/alexadam/printable-mockups/blob/master/imgs/ex1.png?raw=true\" width=\"800\"\u003e\n\n\u003cimg src=\"https://github.com/alexadam/printable-mockups/blob/master/imgs/ex3.png?raw=true\" width=\"800\"\u003e\n\n\u003cimg src=\"https://github.com/alexadam/printable-mockups/blob/master/imgs/ex2.png?raw=true\" width=\"800\"\u003e\n\n## Notes / Problems\n\n - It doesn't work (well) on small screens / touchscreens\n - Not all the features are implemented\n - The generated PDF file is huge and blurry\n\n## To-Do\n\n - Improve the generated PDF file\n - Show mockups dimensions\n - Implement Save as SVG/JSON and import from JSON\n - Add option to set background pattern's color, stroke width \u0026 opacity\n - Add more mockups and background patterns\n\n ## How to run it on your machine\n\n  1. Download or clone this repository\n\n  2. Open a terminal and run:\n\n```\nyarn install\nyarn dev\n```\n\n  3. Open a Web Browser and go to *localhost:8080*\n\n## Credits\n\n - [GoldenLayout](https://golden-layout.com/)\n - [Canvg](https://github.com/canvg/canvg)\n - [jsPDF](https://github.com/MrRio/jsPDF)\n - [React-Modal](https://github.com/reactjs/react-modal)\n - [Icons](https://ionicons.com/)\n - Animation made with [GIPHY Capture](https://giphy.com/apps/giphycapture) and [ezgif](https://ezgif.com/)\n - Thanks to [Paresh Deshpande](https://www.linkedin.com/in/paresh-deshpande-78303756/) for feedback and ideas.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexadam%2Fprintable-mockups","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexadam%2Fprintable-mockups","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexadam%2Fprintable-mockups/lists"}