https://github.com/alexadam/printable-mockups

Create printable UI mockups & wireframes templates
https://github.com/alexadam/printable-mockups

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

Last synced: 2 months ago
JSON representation

Create printable UI mockups & wireframes templates

• Host: GitHub
• URL: https://github.com/alexadam/printable-mockups
• Owner: alexadam
• License: mit
• Created: 2019-06-26T15:32:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:24:00.000Z (about 2 years ago)
• Last Synced: 2024-08-02T05:07:58.202Z (6 months ago)
• 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
• Language: JavaScript
• Homepage: https://www.printablemockups.com/
• Size: 9.38 MB
• Stars: 520
• Watchers: 5
• Forks: 24
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# printable-mockups

Create printable UI mockups/wireframes templates

## Try it: [Demo](https://alexadam.github.io/demos/printable-mockups/index.html)









## Notes / Problems

 - It doesn't work (well) on small screens / touchscreens

 - Not all the features are implemented

 - The generated PDF file is huge and blurry

## To-Do

 - Improve the generated PDF file

 - Show mockups dimensions

 - Implement Save as SVG/JSON and import from JSON

 - Add option to set background pattern's color, stroke width & opacity

 - Add more mockups and background patterns

 ## How to run it on your machine

  1. Download or clone this repository

  2. Open a terminal and run:

```

yarn install

yarn dev

```

  3. Open a Web Browser and go to *localhost:8080*

## Credits

 - [GoldenLayout](https://golden-layout.com/)

 - [Canvg](https://github.com/canvg/canvg)

 - [jsPDF](https://github.com/MrRio/jsPDF)

 - [React-Modal](https://github.com/reactjs/react-modal)

 - [Icons](https://ionicons.com/)

 - Animation made with [GIPHY Capture](https://giphy.com/apps/giphycapture) and [ezgif](https://ezgif.com/)

 - Thanks to [Paresh Deshpande](https://www.linkedin.com/in/paresh-deshpande-78303756/) for feedback and ideas.