Mockify is a free, open-source AI image generator for designers, developers, and marketers. It runs entirely in the browser using Puter.js, no backend API keys, auth, or database required. Generated images and your model settings are saved in your browser's localStorage.
- Multiple AI models, DALL-E 3, Flux 1.1 Pro, Imagen 4 Ultra, Gemini 2.5 Flash, Ideogram 3.0 (via Puter.js)
- Prompt enhancement, Adds composition and quality guidance before generation
- Aspect ratio selector, Square, landscape, portrait, and widescreen options (model-dependent)
- Quality control, Per-model quality settings where supported
- Generation history, Browse, search, reload, and delete images saved in localStorage
- Fullscreen lightbox, View generated images with zoom
- Download, Save any generated image locally
- Copy prompt, One-click copy of the prompt used for any image
- Example prompts, Quick-start chips for common product and mockup use cases
- Persistent settings, Model, quality, and size preferences saved to localStorage
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5.7 |
| Styling | Tailwind CSS v4 |
| AI Inference | Puter.js (client-side) |
| Icons | Lucide React |
| Package Manager | pnpm or npm |
- Node.js 18+
- pnpm or npm
# 1. Clone the repo
git clone https://github.com/MuhammadTanveerAbbas/mockify.git
cd mockify
# 2. Install dependencies
pnpm install
# 3. Start the development server
pnpm dev
# 4. Open in browser
# http://localhost:3000No environment variables are required. Puter.js handles AI inference in the browser.
mockify/
├── public/ # Static assets (favicon)
├── app/
│ ├── globals.css # Global styles and design tokens
│ ├── layout.tsx # Root layout (loads Puter.js)
│ └── page.tsx # Main page, generation, history, settings
├── components/
│ ├── prompt-form.tsx # Prompt input, model/quality/size selectors
│ ├── mockup-result.tsx # Image display, download, copy, fullscreen
│ ├── prompt-history.tsx # History list with search and delete
│ ├── wave-loader.tsx # Loading animation
│ └── empty-state.tsx # Empty state UI
├── lib/
│ ├── generateImage.ts # Puter.js wrapper + model/size/quality config
│ └── utils.ts # Tailwind class utilities
├── package.json
├── tsconfig.json
└── README.md
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm typecheck |
Run TypeScript compiler |
Deploy on Vercel or any static Next.js host. No environment variables are needed.
- Multiple AI model support via Puter.js
- Prompt enhancement
- Aspect ratio and quality controls
- Generation history with search (localStorage)
- Fullscreen lightbox with zoom
- Persistent settings via localStorage
- Image-to-image generation
- Batch generation mode
- Custom prompt templates
Contributions are welcome:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Muhammad Tanveer Abbas SaaS Developer | Building production-ready MVPs in 14-21 days
