🎨 DevPic

Generate perfectly sized placeholder and production-ready images instantly.

DevPic is an open-source, programmable image generation engine built for developers and designers. Stop searching for the "perfect image" to fit your UI mockups, social cards, or test environments. Simply define your parameters via a single API call and generate stunning, mathematically perfect assets on the fly.

---

✨ Features

• 🌈 Gradients & Mesh: Linear, radial, mesh, and conic gradients with 15+ curated premium palettes.
• ✏️ Procedural Doodles: 12 unique doodle subtypes (waves, dots, confetti, topography, curves, etc.).
• 🔷 Geometric Patterns: 11 repeating SVG patterns including hexagons, chevrons, dots, grid, zigzag, and scales.
• 🫧 Blobs & Shapes: Organic blobs, geometric grids, and crisp vector shape compositions.
• 🪟 Glassmorphism & Neumorphism: Frosted glass effects, blurred backgrounds, and soft UI elements.
• 📐 Any Size, Any Ratio: Generate images at any exact resolution. 21 dimension presets included.
• ⚡ Instant Stateless API: Images are generated entirely in-memory and streamed directly. No storage, no buckets, zero latency.
• 🌗 Auto Dark Mode: Contrast-aware text overlays and dark background switching.
• 🎲 Deterministic Engine: Driven by a seeded PRNG. Providing the same seed guarantees the exact same image output every time.
• 🆓 100% Free & Open Source: No pricing, no accounts, no rate limits, no API keys. MIT licensed.

---

🚀 Quick Start (API)

DevPic operates via a simple GET request.

Basic Usage

<!-- Returns an 800x600 gradient image by default -->
<img src="https://your-domain.com/api/v1/image" alt="DevPic Image" />

Advanced Usage

<!-- Returns a 1200x630 dark mode mesh gradient with text -->
<img src="https://your-domain.com/api/v1/image?width=1200&height=630&type=mesh&palette=neon&dark=true&text=Hello+World" alt="Social Card" />

Available Parameters

Parameter	Type	Default	Description
width	number	800	Width in pixels (1–4096)
height	number	600	Height in pixels (1–4096)
ratio	string	—	Aspect ratio priority (e.g., 16:9, 4:3)
type	string	gradient	solid, gradient, doodle, vector, pattern, mesh, blob, noise, glass, neumorph
format	string	png	png, webp, jpeg, svg
palette	string	purple	purple, blue, sunset, forest, ocean, fire, neon, rose, indigo, amber, cyan, slate, pastel, earth, mono
dark	boolean	false	Enable dark mode styling
seed	number	random	Provide a number for deterministic/reproducible outputs
noise	number	0	Add grain/noise intensity (0 to 1)

---

💻 Running Locally

DevPic is built with Next.js 15 (App Router), TypeScript, and Tailwind CSS v4.

1. Clone the repository:

   git clone https://github.com/MonsterFlick/devpic.git
   cd devpic

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 to view the visual Generator UI.

---

🛠 Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4, CSS Modules
• State Management: Zustand
• Image Processing: @resvg/resvg-js (SVG to Raster) & sharp (Compression/Format output)
• Generation: Pure mathematically-driven SVG composition.

---

📝 License

Distributed under the MIT License. Free to use for personal and commercial projects.