MockupStudio

Turn any URL into polished device and app mockups in seconds.

Overview

MockupStudio is a browser-based mockup generator for designers, founders, and developers who need clean product visuals fast. Paste a live URL and it captures high-resolution screenshots across phone, tablet, laptop, and desktop viewports, then arranges them into export-ready compositions — device collections, linear line-ups, grids, cinematic 3D page stacks, and app screen galleries. You can also upload your own screen designs instead of capturing a live site.

Screenshots are captured server-side with a headless Chromium (Puppeteer) service that hardens against SSRF, caches results, and queues concurrent captures. The React frontend handles layout, background styling, and pixel-perfect client-side export to PNG/JPEG (including bundled ZIP downloads).

Features

• URL-to-mockup capture — screenshots a live site at iPhone, iPad, laptop (1512×982), and desktop (1920×1080) viewports at 3× device pixel ratio.
• Two project types — Website mockups (multi-device) and App mockups (phone-first screens, up to 5 custom screens).
• Two capture modes — Device Mockups (single URL → all devices) and Page Stack (multiple pages/URLs → 3D stacked story).
• Multiple layouts — Collection, Linear, and Grid for devices; Stack and Showcase for page journeys; Stacked Phones / Screens Only / Page Stack / Story Spread for apps.
• Custom uploads — drop in your own screen images per device or per screen.
• Background studio — 80 solid swatches, custom hex input, 45+ gradient presets with vertical / horizontal / diagonal / radial orientations and invert.
• High-quality export — client-side rendering via html-to-image targeting up to 4K, automatic size capping (10 MB), single-image, full-composition, and "Download All" ZIP outputs.
• Hardened screenshot API — Helmet, gzip compression, global + per-route rate limiting, URL validation, private/local-host blocking (SSRF guard), in-memory TTL cache, and a bounded concurrent capture queue.
• Serverless option — a Vercel-style handler (api/screenshot.js) using puppeteer-core + @sparticuz/chromium for deployment on serverless platforms.

Tech Stack

• Frontend: React 19, Vite 7, Tailwind CSS 3, lucide-react, html-to-image, JSZip
• Backend: Node.js, Express 5, Puppeteer (headless Chromium), Helmet, compression, express-rate-limit, CORS
• Serverless: puppeteer-core + @sparticuz/chromium
• Helper: small Flask app (app.py) that serves the README over HTTP
• Tooling: ESLint, PostCSS, Autoprefixer, concurrently, ngrok config

Setup / Run

Local development

1. Install dependencies once: npm install.
2. Start the app (Express screenshot service + Vite) with npm run dev.
   • Express listens on http://localhost:3001.
   • Vite serves the UI on http://localhost:5173 (proxies /api to Express).
3. Optional Flask helper: python3 app.py (serves /readme on port 5000).

If a dev server refuses to start because a port is busy, free the port or adjust it in server.js / vite.config.js.

Production

1. Build the frontend: npm run build.
2. Start the server (serves dist/ + /api/screenshot): npm run start.

Environment variables

• PORT (default 3001)
• CORS_ORIGIN (comma-separated allowlist; default disabled)
• SCREENSHOT_RATE_LIMIT_PER_MIN (default 30)
• RATE_LIMIT_PER_MIN (global limiter; default 300)
• ALLOW_PRIVATE_URLS (true/false; default false in production)
• TRUST_PROXY (default 1, useful behind nginx/Cloudflare)
• SCREENSHOT_CONCURRENCY, SCREENSHOT_CACHE_TTL_MS, SCREENSHOT_CACHE_SIZE, MAX_CAPTURE_TIME_MS, MAX_URL_LENGTH (capture tuning)

Ngrok tunnels (optional)

1. Authenticate ngrok: ngrok config add-authtoken <your-token>.
2. Use the bundled ngrok.yml, which exposes the Express API (3001), Flask helper (5000), and Vite UI (5173).
3. Start from the project root: ngrok start --config=ngrok.yml web api ui.

Author

Built by Usama Bin Ejaz — AI/ML Engineer & Data Scientist, Founder of UBE Labs.

• GitHub: github.com/ube09
• Website: usamabinejaz.com (UBE Labs)