Live: mockupkit.github.io
Turn your website screenshots into a polished multi-device mockup scene — desktop, laptop, tablet, and phone on a clean studio backdrop — and download it as a single PNG for your portfolio.
Built for developers who want to showcase their websites — drop in your screenshots and get a portfolio-ready hero image in seconds.
🚧 In progress: a feature to paste a website URL and auto-capture the screenshots at each device size, so you won't have to upload them manually.
v1 is fully client-side: upload a screenshot per device and the scene renders live on a canvas you can download. The URL auto-capture flow and accounts are on the roadmap (
docs/ARCHITECTURE.md).
npm install
npm run dev # http://localhost:3000Upload a screenshot into each device slot. For a pixel-perfect, crop-free fit, capture each at the size shown on its slot:
| Device | Capture size |
|---|---|
| Desktop | 1920 × 1080 |
| Laptop | 1440 × 900 |
| Tablet | 820 × 1180 |
| Phone | 390 × 844 |
Pick a background — neutral or gradient presets, or a custom solid colour — and hit Download PNG.
npm run dev # dev server
npm run build # production build
npm run lint # eslint
npm run typecheck # tsc --noEmit
npm run test:e2e # Playwright e2e (auto-starts the dev server)Next.js 16 (App Router) · React 19 · TypeScript · Tailwind v4 · Zustand · react-dropzone · Canvas 2D · Playwright.
See CLAUDE.md for project conventions and
docs/ARCHITECTURE.md for the roadmap.
The app is a static export served at the org root https://mockupkit.github.io.
A push to main runs .github/workflows/deploy.yml,
which builds (npm run build → out/) and publishes to Pages. Enable it once in
repo Settings → Pages → Source: GitHub Actions.
Built by Shehwar Ahmad — github.com/shehwar-ahmad.