I believe every repository deserves to look beautiful. Your code is art, your projects deserve stunning visuals to match. But design tools steal hours you don't have. So I built a service that generates gorgeous banners through simple URL parameters. Instant, customizable, and no design tools required. Because great projects deserve great presentation.
- 🎨 Hex-Based Customization - Full control with hex codes for backgrounds, gradients, and text colors
- 🌈 Gradient Support - Create custom gradients using
bg=HEX1-HEX2format - 💧 Opacity Control - 8-digit hex codes with alpha channel (RRGGBBAA)
- 🔤 Google Fonts Integration - Use any font from Google Fonts for custom typography
- 😀 Native Emoji - Full emoji support with proper rendering
- 📥 SVG & PNG Download - Download banners as SVG or PNG directly from the UI
- ⚡ Lightning Fast - Built with Hono framework for optimal performance
- 🔒 Secure - Input sanitization and validation
- 🚀 Edge-Ready - Deploy to modern platforms like Railway
Visit ghrb.waren.build to create your banner using the interactive UI.
git clone https://github.com/warengonzaga/github-repo-banner.git
cd github-repo-banner
pnpm install
pnpm devWhen you deploy your own copy, you're directly supporting this project! 💖
https://ghrb.waren.build/banner?header=My+Project&bg=ec4899-3b82f6&color=ffffff
https://ghrb.waren.build/banner?header=OSSPH&subheader=Open+Source+Community&bg=dbeafe&color=3b82f6
https://ghrb.waren.build/banner?header=%F0%9F%A6%9EOpenClaw&subheader=Your+own+personal+AI+assistant.&bg=fee2e2&color=bb2c2c&support=true
https://ghrb.waren.build/banner?header=Transparent&bg=00000000&color=ffffff
https://ghrb.waren.build/banner?header=Semi-Transparent&bg=ffffff80&color=000000
https://ghrb.waren.build/banner?header=Beautiful+Typography&subheader=Powered+by+Google+Fonts&bg=1a1a1a-4a4a4a&color=ffffff&headerfont=Playfair+Display&subheaderfont=Roboto
Generate a custom SVG banner.
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
header |
string | No | "Hello World" | Main text (supports emojis) |
subheader |
string | No | - | Optional subtitle text |
bg |
string | No | 1a1a1a-4a4a4a |
Background color in hex format |
color |
string | No | ffffff |
Header text color (hex without #) |
subheadercolor |
string | No | Same as color |
Subheader text color |
headerfont |
string | No | - | Google Fonts family name for header (e.g., "Roboto") |
subheaderfont |
string | No | - | Google Fonts family name for subheader (e.g., "Playfair Display") |
support |
boolean | No | false |
Show support watermark |
watermarkpos |
string | No | bottom-right |
Watermark position: top-left, top-right, bottom-left, bottom-right |
| Format | Example | Description |
|---|---|---|
| Gradient | HEX1-HEX2 |
1a1a1a-4a4a4a (left to right) |
| Solid | HEX |
ffffff (single color) |
| Transparent | 00000000 |
Fully transparent |
| With Opacity | RRGGBBAA |
ffffff80 (50% opacity) |
- Content-Type:
image/svg+xml - Cache-Control:
public, max-age=86400(production) - Size: 1280×304px
Interactive banner generator UI with live preview.
Health check endpoint for monitoring.
{ "status": "ok", "timestamp": "2026-02-01T00:00:00.000Z" }The UI includes presets for quick access:
Gradients: 1a1a1a-4a4a4a (Midnight) • ec4899-3b82f6 (Vibe) • 14b8a6-06b6d4 (Ocean)
Solids: dbeafe/3b82f6 (OSSPH) • fee2e2/bb2c2c (Molty) • fde8e3/de7356 (Claude) • f3f4f6/1f2937 (Minimal)
Special: 00000000/ffffff (Transparent)
Tip: Create any custom gradient or color using hex codes directly in the URL.
Runtime: Node.js • Framework: Hono • Language: TypeScript • Build: tsup • Package Manager: pnpm
pnpm dev # Development with hot-reload
pnpm build # Production build
pnpm start # Start production serverPORT=3000 # Server port
NODE_ENV=development # Environment mode✅ Input sanitization (XSS prevention) ✅ Hex color validation ✅ Header length limits ✅ No external dependencies
Contributions are welcome! For major changes, open an issue first.
- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit with Clean Commit convention
- Push and open a Pull Request
MIT License - see LICENSE file.
Waren Gonzaga • GitHub • Website
💻💖☕ by Waren Gonzaga | YHWH 🙏
