Open Placeholder

A fast, simple, and customizable placeholder image service

Live Demo • Features • Usage • API Reference • Deployment

---

Open Placeholder is a high-performance placeholder image generator built with Next.js and Edge Runtime. It provides dynamic image generation with custom dimensions and text, perfect for mockups, prototypes, and development.

✨ Features

• 🚀 Edge Runtime - Lightning-fast image generation at the edge
• 📐 Flexible Sizing - Support for any dimensions up to 4000x4000 pixels
• 📝 Custom Text - Display custom text instead of dimensions
• 💾 Smart Caching - Optimized with CDN cache headers for performance
• 🎨 Clean Design - Minimalist aesthetic with Geist font
• 🔧 Zero Configuration - Works out of the box with sensible defaults
• 🌍 Self-Hostable - Deploy your own instance in seconds

🚀 Quick Start

Basic Usage

Generate a 600x400 placeholder image:

https://openplaceholder.com/600x400

Square Images

Create a 256x256 square image with a single dimension:

https://openplaceholder.com/256

Custom Text

Display custom text instead of dimensions:

https://openplaceholder.com/600x300/Hello%20World

📖 API Reference

URL Format

https://openplaceholder.com/[width]x[height]/[text]

Parameters

Parameter	Type	Description	Example
width	number	Image width in pixels (1-4000)	600
height	number	Image height in pixels (1-4000)	400
text	string	Optional custom text (URL encoded)	Hello%20World

Examples

Rectangle (600x400)

<img src="https://openplaceholder.com/600x400" alt="Placeholder">

Square (512x512)

<img src="https://openplaceholder.com/512" alt="Square placeholder">

Custom Text

<img src="https://openplaceholder.com/800x200/Coming%20Soon" alt="Coming Soon">

Banner with Text

<img src="https://openplaceholder.com/1200x400/Hero%20Banner" alt="Hero Banner">

🛠️ Built With

• Next.js 15 - React framework with App Router
• React 19 - UI library
• @vercel/og - Image generation
• Tailwind CSS - Styling
• TypeScript - Type safety
• Zod - Runtime validation

🚀 Deployment

Deploy to Vercel (Recommended)

Deploy your own instance with one click:

Self-Hosting

1. Clone the repository:

git clone https://github.com/akshitkrnagpal/open-placeholder.git
cd open-placeholder

2. Install dependencies:

npm install
# or
pnpm install

3. Run the development server:

npm run dev
# or
pnpm dev

4. Build for production:

npm run build
npm run start

Environment Variables

No environment variables are required for basic functionality. The app works out of the box!

🏗️ Development

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Local Development

# Clone the repo
git clone https://github.com/akshitkrnagpal/open-placeholder.git
cd open-placeholder

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run production build
pnpm start

# Run linter
pnpm lint

Project Structure

open-placeholder/
├── app/
│   ├── [...filename]/     # Catch-all route for image generation
│   │   └── route.tsx      # Image generation endpoint
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Landing page
├── utils/
│   ├── parser.ts          # URL parameter parsing
│   └── data.ts            # GitHub data fetching
├── fonts/
│   └── geist/             # Local font files for image generation
└── public/                # Static assets

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Inspired by placehold.co
• Built with Vercel's Edge Runtime
• Typography by Geist Font

📊 Stats

---

Made with ❤️ by Akshit Kr Nagpal