Drop. Frame. Ship.
A free, open-source screenshot mockup generator.
Create beautiful mockups with device frames, gradient backgrounds, and shadows.
| Feature | Description |
|---|---|
| 📱 Device Frames | iPhone, MacBook, iPad, Pixel, Browser, Monitor |
| 🎨 Backgrounds | Gradient presets, solid colors, custom gradients, transparent |
| ⚙️ Customization | Adjustable padding, shadows, border radius |
| 🌐 Browser URL | Dynamic URL input for browser frame mockups |
| 📤 Export Options | PNG (1x/2x/3x), social media sizes, SVG |
| ⌨️ Keyboard Shortcuts | Ctrl+S to export, Esc to reset |
| 🌙 Dark Theme | Clean, minimal interface |
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Deploy to Cloudflare Workers
npm run deploy- Drop - Drag & drop, paste (
Ctrl+V), or click to upload a screenshot - Frame - Choose a device frame and customize background, padding & shadows
- Ship - Export your mockup as PNG or SVG
- TanStack Start - React framework
- Tailwind CSS v4 - Styling
- Cloudflare Workers - Deployment
- html-to-image - Export functionality
MIT
Made with ❤️ by Gift Egwuenu
