{"id":13883496,"url":"https://github.com/akshitkrnagpal/open-placeholder","last_synced_at":"2026-03-09T16:14:54.725Z","repository":{"id":196315944,"uuid":"630926676","full_name":"akshitkrnagpal/open-placeholder","owner":"akshitkrnagpal","description":"Self Hosted Placeholder Image Generator ","archived":false,"fork":false,"pushed_at":"2026-02-18T00:58:27.000Z","size":1105,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-18T06:43:19.099Z","etag":null,"topics":["edge-functions","nextjs","placeholder","vercel"],"latest_commit_sha":null,"homepage":"https://openplaceholder.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akshitkrnagpal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"akshitkrnagpal"}},"created_at":"2023-04-21T13:34:31.000Z","updated_at":"2026-02-18T00:58:32.000Z","dependencies_parsed_at":"2025-05-11T20:33:10.594Z","dependency_job_id":null,"html_url":"https://github.com/akshitkrnagpal/open-placeholder","commit_stats":null,"previous_names":["akshitkrnagpal/placehold","akshitkrnagpal/open-placeholder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akshitkrnagpal/open-placeholder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshitkrnagpal%2Fopen-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshitkrnagpal%2Fopen-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshitkrnagpal%2Fopen-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshitkrnagpal%2Fopen-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akshitkrnagpal","download_url":"https://codeload.github.com/akshitkrnagpal/open-placeholder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akshitkrnagpal%2Fopen-placeholder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30301902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T14:33:48.460Z","status":"ssl_error","status_checked_at":"2026-03-09T14:33:48.027Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["edge-functions","nextjs","placeholder","vercel"],"created_at":"2024-08-06T09:01:34.649Z","updated_at":"2026-03-09T16:14:54.720Z","avatar_url":"https://github.com/akshitkrnagpal.png","language":"TypeScript","funding_links":["https://github.com/sponsors/akshitkrnagpal"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://openplaceholder.com\"\u003e\n    \u003cimg src=\"https://openplaceholder.com/800x400/Open%20Placeholder\" alt=\"Open Placeholder\"\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eOpen Placeholder\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eA fast, simple, and customizable placeholder image service\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://openplaceholder.com\"\u003eLive Demo\u003c/a\u003e •\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#api-reference\"\u003eAPI Reference\u003c/a\u003e •\n  \u003ca href=\"#deployment\"\u003eDeployment\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nOpen 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.\n\n## ✨ Features\n\n- 🚀 **Edge Runtime** - Lightning-fast image generation at the edge\n- 📐 **Flexible Sizing** - Support for any dimensions up to 4000x4000 pixels\n- 📝 **Custom Text** - Display custom text instead of dimensions\n- 💾 **Smart Caching** - Optimized with CDN cache headers for performance\n- 🎨 **Clean Design** - Minimalist aesthetic with Geist font\n- 🔧 **Zero Configuration** - Works out of the box with sensible defaults\n- 🌍 **Self-Hostable** - Deploy your own instance in seconds\n\n## 🚀 Quick Start\n\n### Basic Usage\n\nGenerate a 600x400 placeholder image:\n```\nhttps://openplaceholder.com/600x400\n```\n\n### Square Images\n\nCreate a 256x256 square image with a single dimension:\n```\nhttps://openplaceholder.com/256\n```\n\n### Custom Text\n\nDisplay custom text instead of dimensions:\n```\nhttps://openplaceholder.com/600x300/Hello%20World\n```\n\n## 📖 API Reference\n\n### URL Format\n\n```\nhttps://openplaceholder.com/[width]x[height]/[text]\n```\n\n### Parameters\n\n| Parameter | Type | Description | Example |\n|-----------|------|-------------|---------|\n| `width` | number | Image width in pixels (1-4000) | `600` |\n| `height` | number | Image height in pixels (1-4000) | `400` |\n| `text` | string | Optional custom text (URL encoded) | `Hello%20World` |\n\n### Examples\n\n#### Rectangle (600x400)\n```html\n\u003cimg src=\"https://openplaceholder.com/600x400\" alt=\"Placeholder\"\u003e\n```\n\n#### Square (512x512)\n```html\n\u003cimg src=\"https://openplaceholder.com/512\" alt=\"Square placeholder\"\u003e\n```\n\n#### Custom Text\n```html\n\u003cimg src=\"https://openplaceholder.com/800x200/Coming%20Soon\" alt=\"Coming Soon\"\u003e\n```\n\n#### Banner with Text\n```html\n\u003cimg src=\"https://openplaceholder.com/1200x400/Hero%20Banner\" alt=\"Hero Banner\"\u003e\n```\n\n## 🛠️ Built With\n\n- **[Next.js 15](https://nextjs.org)** - React framework with App Router\n- **[React 19](https://react.dev)** - UI library\n- **[@vercel/og](https://vercel.com/docs/functions/og-image-generation)** - Image generation\n- **[Tailwind CSS](https://tailwindcss.com)** - Styling\n- **[TypeScript](https://www.typescriptlang.org)** - Type safety\n- **[Zod](https://zod.dev)** - Runtime validation\n\n## 🚀 Deployment\n\n### Deploy to Vercel (Recommended)\n\nDeploy your own instance with one click:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fakshitkrnagpal%2Fopen-placeholder)\n\n### Self-Hosting\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/akshitkrnagpal/open-placeholder.git\ncd open-placeholder\n```\n\n2. Install dependencies:\n```bash\nnpm install\n# or\npnpm install\n```\n\n3. Run the development server:\n```bash\nnpm run dev\n# or\npnpm dev\n```\n\n4. Build for production:\n```bash\nnpm run build\nnpm run start\n```\n\n### Environment Variables\n\nNo environment variables are required for basic functionality. The app works out of the box!\n\n## 🏗️ Development\n\n### Prerequisites\n\n- Node.js 18+ \n- npm, yarn, or pnpm\n\n### Local Development\n\n```bash\n# Clone the repo\ngit clone https://github.com/akshitkrnagpal/open-placeholder.git\ncd open-placeholder\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Run production build\npnpm start\n\n# Run linter\npnpm lint\n```\n\n### Project Structure\n\n```\nopen-placeholder/\n├── app/\n│   ├── [...filename]/     # Catch-all route for image generation\n│   │   └── route.tsx      # Image generation endpoint\n│   ├── layout.tsx         # Root layout\n│   └── page.tsx           # Landing page\n├── utils/\n│   ├── parser.ts          # URL parameter parsing\n│   └── data.ts            # GitHub data fetching\n├── fonts/\n│   └── geist/             # Local font files for image generation\n└── public/                # Static assets\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🙏 Acknowledgments\n\n- Inspired by [placehold.co](https://placehold.co/)\n- Built with [Vercel's Edge Runtime](https://vercel.com/docs/functions/edge-functions)\n- Typography by [Geist Font](https://vercel.com/font)\n\n## 📊 Stats\n\n![GitHub stars](https://img.shields.io/github/stars/akshitkrnagpal/open-placeholder?style=social)\n![GitHub forks](https://img.shields.io/github/forks/akshitkrnagpal/open-placeholder?style=social)\n\n---\n\n\u003cp align=\"center\"\u003e\n  Made with ❤️ by \u003ca href=\"https://github.com/akshitkrnagpal\"\u003eAkshit Kr Nagpal\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshitkrnagpal%2Fopen-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakshitkrnagpal%2Fopen-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakshitkrnagpal%2Fopen-placeholder/lists"}