Screenshot mockup generator. Upload, frame, export -- all in the browser.
SnapMock turns raw screenshots into polished device mockups in seconds. Drag in an image, pick a background gradient, wrap it in a device frame, and download a high-resolution PNG. Everything runs client-side -- your images never leave your machine.
- Drag-and-drop upload -- Drop an image, click to browse, or paste from clipboard with Ctrl+V.
- 12 gradient backgrounds -- Lavender, Ocean, Sunset, Peach, Mint, Berry, Night, Coral, Sky, Gold, White, and Dark.
- Device frames -- macOS-style browser window, phone with notch, or no frame.
- Adjustable styling -- Padding, border radius, and four shadow levels (None, Subtle, Medium, Heavy).
- High-resolution export -- Download mockups as 2x or 4x PNG.
- Custom color picker -- Choose any background color (Pro).
- Glassmorphism UI -- Modern frosted-glass design with smooth animations.
- License key system -- One-time Pro upgrade with localStorage persistence and cross-tab sync.
- Fully private -- Zero server uploads. All processing happens in the browser via
html-to-image.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19, Tailwind CSS 4 |
| Export | html-to-image (client-side canvas rendering) |
| Language | TypeScript 5 |
| Analytics | Vercel Analytics, Vercel Speed Insights |
| Deployment | Vercel |
- Node.js 18 or later
- npm, yarn, or pnpm
git clone https://github.com/beepboop2025/snapmock.git
cd snapmock
npm installnpm run devThe app starts at http://localhost:3000.
npm run build
npm startsrc/app/
page.tsx # Landing page
layout.tsx # Root layout and metadata
config.ts # Payment and site configuration
globals.css # Global styles
hooks/
useLicense.ts # Pro license state management
components/
MockupEditor.tsx # Core editor (backgrounds, frames, export)
PaymentModal.tsx # Pro upgrade payment flow
PricingSection.tsx # Free vs Pro comparison
FloatingSupport.tsx # Support widget
EmailCapture.tsx # Email collection form
Payment methods and site details are configured in src/app/config.ts:
export const CONFIG = {
UPI_ID: "",
PAYPAL_USERNAME: "",
BMAC_USERNAME: "",
CRYPTO_WALLETS: [],
EMAIL_ENDPOINT: "",
SITE_URL: "https://snapmock-orpin.vercel.app",
PRODUCT_NAME: "SnapMock",
PRO_PRICE: "$9",
};Supported payment methods: UPI, PayPal, Buy Me a Coffee, and crypto (ETH, BTC, SOL, BNB, Base, Polygon).
Connect the repository to Vercel for automatic deploys on push, or deploy manually:
npx vercel --prodNo environment variables are required.
This project is licensed under the MIT License.