https://github.com/ysskrishna/og-labs
Create beautiful OG images, Twitter/X Header images & more for free, in simple clicks.
https://github.com/ysskrishna/og-labs
nextjs open-graph open-graph-generator ysskrishna
Last synced: about 1 year ago
JSON representation
Create beautiful OG images, Twitter/X Header images & more for free, in simple clicks.
- Host: GitHub
- URL: https://github.com/ysskrishna/og-labs
- Owner: ysskrishna
- License: mit
- Created: 2025-04-08T13:47:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-08T17:11:18.000Z (about 1 year ago)
- Last Synced: 2025-04-08T18:25:47.774Z (about 1 year ago)
- Topics: nextjs, open-graph, open-graph-generator, ysskrishna
- Language: TypeScript
- Homepage: https://og-labs.vercel.app/
- Size: 4.87 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ogimage.click
A free and open source tool for generating beautiful Open Graph images, Twitter/X headers, and blog covers - no signup required.
## 🌟 Features
- **Multiple Template Types**
- Open Graph Images
- Twitter/X Headers
- Blog Cover Images
- Custom Templates
- **Rich Customization**
- Custom backgrounds (solid colors & gradients)
- Grid and noise overlays
- Logo upload support
- Professional typography
- Multiple export formats (PNG, JPEG, WebP)
- **Developer Experience**
- Ready-to-use HTML meta tags
- Next.js App Router integration
- Real-time preview
- No authentication required
- Free and open source
## 🚀 Getting Started
### Prerequisites
- Node.js 18+
- pnpm (recommended) or npm
### Installation
1. Clone the repository:
```bash
git clone https://github.com/weijunext/ogimage-click.git
cd ogimage.click
```
2. Install dependencies:
```bash
pnpm install
```
3. Set up environment variables in `.env.local`:
```bash
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_GOOGLE_ID=
NEXT_PUBLIC_GOOGLE_ADSENSE_ID=
```
4. Start the development server:
```bash
pnpm dev
```
## 🛠️ Tech Stack
- [Next.js 15](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Radix UI](https://www.radix-ui.com/)
- [Satori](https://github.com/vercel/satori)
- [Zod](https://zod.dev/)
## 📖 Usage
1. Choose a template type (OG Image, Twitter Header, or Blog Cover)
2. Customize your content (text, colors, images)
3. Preview in real-time
4. Export in your preferred format
5. Use the generated meta tags in your project
### Example Meta Tags
```html
```
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🌐 Links
- [Website](https://ogimage.click/)
- [Issue Tracker](https://github.com/weijunext/ogimage-click/issues)
---
Built by [Jude Wei](https://github.com/weijunext)
This project is inspired by and built upon [imgsrc-app](https://github.com/FadyMak/imgsrc-app)