printable-mockups turns a UI sketch into a printable PDF sheet

What the tool is for

printable-mockups is a project for creating printable UI mockups and wireframe templates, and the wording of the description is precise about the domain. These are not clickable prototypes. They are drawings of screens arranged on a page that can be printed, and the repository is full of topics around mockup generation, PDF generation, PDF documents, UI patterns, UX research and wireframing. There is a live demo at printablemockups.com and the repository carries a recorded animation of the tool in use alongside three static images of the output. The audience is therefore people who work with layouts as artefacts rather than as running software: a designer preparing something for a print workshop, a researcher laying out screens for a study, or a developer explaining a layout to someone who will not open a browser tab.

Running it on your own machine

The project is a Vite app, so getting it going locally is the standard two-command dance. The README offers yarn:

yarn install
yarn dev

or npm:

npm install
npm run dev

Either way you then open a browser and go to http://localhost:5173/. That is the whole setup, and the reason it is short is that the project has no server component, no database and no account system. The manifest confirms the shape: the package is named printable-mockups-app-new, marked private with version 0.0.0, declared as an ES module, with scripts for dev, build, lint and preview running through Vite and ESLint. The name ending in app-new suggests the project is a rename of an earlier application, and the private flag with a zero version means it is not published to a registry for others to install, it is a workspace you clone and run.

The stack, including one dependency the manifest does not list

The dependency list is small and tells you what the tool is built from. React 19 and react-dom are the UI layer, react-modal handles dialogs, jquery is present as a runtime dependency, and jspdf at 4.2.1 does the PDF generation, which is the output format the project is named for. The build tooling is Vite 8 with the React plugin, ESLint 10 with the js recommended config, the react-hooks and react-refresh plugins, and globals for the environment. The dev and build dependencies are pinned to ranges, and the project is an ES module with a vite.config.js and an eslint.config.js at the root. The credits section names GoldenLayout as one of the inspirations, and the layout of the editing canvas is where that credit shows up, since the manifest itself lists neither GoldenLayout nor the icon set.

The known problems are stated in the README

The Notes and Problems section is short and blunt, and it is the most useful part of the documentation for anyone deciding whether to use this. The first line says it does not work well on small screens or touchscreens. The second says not all the features are implemented. There is no elaboration and no workaround offered, so a reader has to take these at face value. The practical consequence is that this is a desktop tool built with a mouse in mind, and that the feature set is a subset of what the interface implies. A designer on a laptop will have a workable experience. A designer on a tablet, or a team that assumes feature parity with a mature wireframing tool, will not. Naming the limitation up front is unusual and worth crediting, and it is also the reason to trial the demo before committing.

The to-do list tells you what is missing

Three items are on the to-do list, and between them they describe the gap between this and a finished tool. The first is showing mockup dimensions, which means the output does not currently tell you the pixel size of each frame it draws. The second is implementing save as SVG or JSON and import from JSON, which is the single most consequential omission here, because it means there is no editable intermediate format. You get a PDF, and a PDF is a dead end for anything downstream. The third is an option to set the background pattern's colour, stroke width and opacity, which is a cosmetic control on the grid behind the frames. The absence of the JSON round trip is what separates this from a design workflow, since a wireframe that cannot be reopened and edited becomes a picture of a wireframe.

Where printable-mockups is the wrong tool

Three cases. The first is a team that needs to keep iterating on a wireframe, because the export is a PDF and the SVG and JSON formats are still to-do, so every revision means redrawing in the tool and re-exporting rather than editing a file. The second is anyone working on a tablet or a phone, which the README rules out directly. The third is a designer who wants to hand a colleague something editable in a vector tool, since the PDF path is a final artefact rather than a working file. Against a general purpose design tool such as Figma or a dedicated wireframing application, the difference in approach is that this project is a purpose-built generator for a specific output, printable sheets of UI frames, with a template library and a page layout, and it has no component library, no symbol system and no collaborative editing. The trade is a narrower job done with a very small dependency footprint, and the cost is a project whose own README lists the missing pieces and whose package manifest is a private zero-version app rather than a released library.

Editorial conclusion

printable-mockups is a good fit for a designer who wants a physical sheet of screen layouts to hand to a printer, a colleague or a workshop, and who is working on a desktop and is content with the templates the project provides. It is a poor fit for a team that needs editable wireframes in a vector tool, a touchscreen workflow, or a maintained design system, since the author lists both the small screen problem and the missing features as known issues. Check three things before you build on it: that you are on a desktop with a mouse, because the README says it does not work well on small screens or touchscreens, that the output is the deliverable you need, since the export path is PDF through jsPDF and saving as SVG or JSON is still on the to-do list, and that you accept the licence and the project shape, since the repository is MIT-licensed and its package manifest is a private, version 0.0.0 app rather than a published library.

Frequently asked questions

Official sources

1. alexadam/printable-mockups on GitHub
2. License: MIT
3. Project website
4. README
5. Releases