https://github.com/akshitkrnagpal/open-placeholder
Self Hosted Placeholder Image Generator
https://github.com/akshitkrnagpal/open-placeholder
edge-functions nextjs placeholder vercel
Last synced: 3 months ago
JSON representation
Self Hosted Placeholder Image Generator
- Host: GitHub
- URL: https://github.com/akshitkrnagpal/open-placeholder
- Owner: akshitkrnagpal
- License: mit
- Created: 2023-04-21T13:34:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-18T00:58:27.000Z (4 months ago)
- Last Synced: 2026-02-18T06:43:19.099Z (4 months ago)
- Topics: edge-functions, nextjs, placeholder, vercel
- Language: TypeScript
- Homepage: https://openplaceholder.com
- Size: 1.05 MB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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)
```html
```
#### Square (512x512)
```html
```
#### Custom Text
```html
```
#### Banner with Text
```html
```
## 🛠️ Built With
- **[Next.js 15](https://nextjs.org)** - React framework with App Router
- **[React 19](https://react.dev)** - UI library
- **[@vercel/og](https://vercel.com/docs/functions/og-image-generation)** - Image generation
- **[Tailwind CSS](https://tailwindcss.com)** - Styling
- **[TypeScript](https://www.typescriptlang.org)** - Type safety
- **[Zod](https://zod.dev)** - Runtime validation
## 🚀 Deployment
### Deploy to Vercel (Recommended)
Deploy your own instance with one click:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fakshitkrnagpal%2Fopen-placeholder)
### Self-Hosting
1. Clone the repository:
```bash
git clone https://github.com/akshitkrnagpal/open-placeholder.git
cd open-placeholder
```
2. Install dependencies:
```bash
npm install
# or
pnpm install
```
3. Run the development server:
```bash
npm run dev
# or
pnpm dev
```
4. Build for production:
```bash
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
```bash
# 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](LICENSE).
## 🙏 Acknowledgments
- Inspired by [placehold.co](https://placehold.co/)
- Built with [Vercel's Edge Runtime](https://vercel.com/docs/functions/edge-functions)
- Typography by [Geist Font](https://vercel.com/font)
## 📊 Stats
---
Made with ❤️ by Akshit Kr Nagpal