Printable Mockups
Builder now live — drag, drop, print

Create mockupsyou can actually hold.

Drag device frames onto your canvas, arrange your layout, export as PDF, and print. A free open-source drag-and-drop builder for wireframes and sketchpads you can sketch on with a pencil.

Free to use MIT licensed
Why it works

Designed around how
you actually think.

Most tools make you fight to get started. The drag-and-drop builder gives you device frames and blank canvases you can fill in seconds — then print and think with a pencil.

Drag-and-drop builder

Assemble your layout in seconds.

Drop device frames, sketchpads and component blocks onto your canvas. Resize, rearrange and annotate — then export as a print-ready PDF at true device proportions.

Portrait & Landscape

Print in any orientation.

Switch between portrait and landscape — your layout fits the page perfectly either way.

Built in the open

Fork it. Extend it.
Make it yours.

Add new device frames, sketchpad styles, or component sheets. PRs welcome.

90-second workflow

Drag. Export. Print. Repeat.

01 Drag your device frames onto the canvas
02 Add content, notes, and annotations
03 Export PDF, print, sketch, ship
print ready
sheet 03 featured
Printable mockup sheet
sheet 01 Printable mockup sheet
sheet 02 Printable mockup sheet
sheet 04 Printable mockup sheet
sheet 05 Printable mockup sheet
Starting points

Pick a frame.
Make it yours.

Choose from eight device frames as your starting point — or drag in multiple and build a full flow. Everything is customizable in the builder.

01

Phone

4 layouts

Portrait, landscape & multi-frame storyboards.

02

Tablet

3 layouts

Portrait, landscape and split-view variants.

04

Browser

6 layouts

Window chrome, tabs, modals, blank canvas.

05

Smart watch

3 layouts

Round, rect and complication-grid frames.

06

Sketchpad

dot · grid · lined

Blank canvases at 5mm and 8mm spacing.

Workflow

Three steps. Real fast.

From blank canvas to something you can hold in sixty seconds.

01
~ 30 sec

Open & build.

No install, no signup. Open the builder in your browser, drag your device frames onto the canvas, and start arranging your layout.

Drag-and-drop canvas browser
02
~ as long as it takes

Build your layout.

Drop in device frames, component blocks and sketchpads. Annotate, resize, rearrange. Stay rough — that's the point.

03
~ 1 min

Export, print & iterate.

Export as PDF, print on A4 or Letter, sketch over it with a pencil. Photograph the best ideas, share with your team. Repeat.

my-mockup.pdf
→ ready to print
Try it now

Build your mockup.

Drag device frames onto the canvas, arrange your layout, and export as a print-ready PDF. No signup required.

Drag device frames Arrange layouts Export PDF

Drag, drop & design
your document — free.

No signup required. Works right here.

Built for

Anyone who designs
before they build.

Product designers

Build ten directions in the app before opening Figma. Decide what's worth the pixels.

Founders & PMs

Walk into a meeting with three printed flows you made in minutes. Walk out with a decision.

Workshop hosts

Build custom workshop sheets in minutes. Drag in your device frames, print, run the session.

Educators

Have students create their own layouts in the builder, then sketch on them. Structure first, pixels later.

Open source

Built in public.
Yours to remix.

Printable Mockups is MIT-licensed and built in the open. Fork the builder, add new device frames or component blocks, or just use the app and get printing. Contributions welcome.

bash
~/projects $ git clone https://github.com/alexadam/printable-mockups
Cloning into 'printable-mockups'...
remote: Enumerating objects: 1,204, done.
~/projects $ cd printable-mockups
~/projects/printable-mockups $ npm install
added 42 packages in 3.1s
~/projects/printable-mockups $ npm run dev
ready on http://localhost:5173
~/projects/printable-mockups $
Frequently asked

Questions, answered.

Is it really free?

Yes — MIT-licensed, no signup, no email. Open the builder, create your mockup, export and print. Use it for client work, classroom work, agency work, side projects. Attribution is appreciated but not required.

Do I need to install anything?

Nothing. The drag-and-drop builder runs entirely in your browser. Open it, build your layout, export as PDF. No account, no download, no setup.

What paper size should I print on?

The builder exports to both A4 and US Letter. Margins are calibrated so device frames land at the same physical size on either paper — pick whichever your printer prefers.

Can I contribute new device frames or components?

Absolutely. The builder's source files live on GitHub. Open a PR with your own device frames, sketchpad styles, or component blocks — the project is built to be extended.

Why not just use Figma?

Use Figma. Use both. The builder is for the first ten minutes of a problem — the part where digital tools quietly punish you for being uncertain. Build the layout, print it, think with a pencil. Then switch to Figma.

Where can I send feedback?

Open an issue on GitHub or post a photo of your sketched-on printout with #printablemockups. Real-world use is the best bug report we get.

Your idea. Your layout.
Start building.

Drag, arrange, export, print. The builder gives you device-accurate frames you can fill in seconds — then take offline with a pencil.