backdropi

A browser-based image toolbox + mockup editor. Turn screenshots into polished mockups, convert, compress, resize, and remove backgrounds - entirely in your browser. No uploads to a server, no sign-ups, no watermarks, and it works offline once opened (PWA).

Features

Mockup editor (Mockup mode)

• Color extraction - dominant colors are automatically extracted from your screenshot and offered as swatches in the background and shadow color pickers
• Backgrounds - solid color, gradient with 8-direction swatches + angle slider, image upload, or Unsplash search
• Shadows - 4 presets (Subtle, Soft, Deep, Dramatic) or full manual control over blur, opacity, offset, and color
• Corner radius - 3 presets + fine-tune slider (0-128px), independent padding control
• Browser frame - Safari-style window with traffic light dots, gradient chrome bar, centered URL bar
• Export - PNG, JPEG, or WebP at 2x HiDPI resolution

Image tools (Tools mode)

• Convert - re-encode to PNG, JPEG, WebP, or AVIF (AVIF auto-hidden where unsupported) with quality control
• Compress - WebP/JPEG with a live quality slider showing original vs. compressed size and % savings
• Resize - by percentage or exact pixels, with optional aspect-ratio lock
• Remove background - AI-powered client-side cutout (@imgly/background-removal). Runs in-browser via WASM; the model (~40 MB) downloads on first use and is cached for offline. No image ever leaves the device.
• Send to mockup - drop any result (resized, cutout, converted) straight into the mockup editor as the source image

Platform

• Offline PWA - installable with a custom install prompt; the app shell, Unsplash images, and the background-removal model are cached for offline use after first visit
• Undo / Redo - keyboard shortcuts (⌘Z, ⇧⌘Z / ⌘Y) and toolbar buttons
• State persistence - automatically saves to localStorage, restores on reload
• Replace image - upload a new image at any time via toolbar or canvas hover button

Stack

• Vite + vite-plugin-pwa
• React 19
• TypeScript
• Tailwind CSS v4
• lucide-react (icons)
• @imgly/background-removal (AI background removal)

Design

Glassy, modern, warm aesthetic. Cream + lavender frosted-glass panels with backdrop-blur-xl, soft shadows, and a subtle gradient background.

Getting started

npm install

Create a .env file in the project root with your Unsplash API access key:

VITE_UNSPLASH_ACCESS_KEY=your_key_here

Then start the dev server:

npm run dev

Commands

Command	Description
npm run dev	Start development server
npm run build	Type-check and production build (emits PWA service worker)
npm run lint	Run ESLint
npm test	Run tests

Usage

1. Upload - drag & drop an image, click to browse, or paste from clipboard
2. Mockup mode - open the tool palette to adjust background, shadow, corners, or switch to browser frame
3. Tools mode - convert, compress, resize, or remove the background; download the result or send it to the mockup
4. Export - choose PNG, JPEG, or WebP and download at 2x resolution

Deploying to Vercel

The project includes a vercel.json (COOP/COEP headers enable WASM threading for faster background removal). Deploy with:

vercel --prod

The OG image (1200x630 PNG with the app logo and tagline) is a static asset at public/og-image.png.