github-avatar-frame-api
GitHub Avatar Frame API
Officially accepted for GSSoC!
📊 Project Insights
| 🌟 Stars | 🍴 Forks | 🐛 Issues | 🔔 Open PRs | 🔕 Closed PRs | 🛠️ Languages | 👥 Contributors |
|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
<hr>
🎨 About GitHub Avatar Frame API
A free and open-source API to frame your GitHub avatar using creative themes. Perfect for README files, portfolios, or social media.
🌐 Live API: https://github-avatar-frame-api.onrender.com
📌 API Usage
Base Endpoint:
https://github-avatar-frame-api.onrender.com/api/framed-avatar/{username}?theme={theme}&size={size}&canvas={canvas}&shape={shape}&radius={radius}
Query Parameters:
| Parameter | Type | Default | Description | Example |
|---|---|---|---|---|
| username | string | required | GitHub username | octocat |
| theme | string | base | Frame theme (eternity, base, flamingo) | flamingo |
| size | integer | 256 | Avatar size in px (64–1024) | 300 |
| canvas | string | light | Background color of avatar canvas: light / dark | dark |
| shape | string | circle | Avatar shape: circle or rounded | rounded |
| radius | integer | 25 | Corner radius for rounded shape in px | 50 |
Canvas, Shape & Radius Explained
- canvas: Sets the avatar background color. Options:
lightordark. - shape: Sets the avatar outline. Options:
circleorrounded. - radius: Controls corner rounding in px when
shape=rounded. 0 = square, higher = more rounded.
Combine all three to customize your avatar:
| Canvas | Shape | Radius | Example URL | Preview |
|---|---|---|---|---|
| light | circle | - | URL | |
| dark | circle | - | URL | |
| light | rounded | 20 | URL | |
| dark | rounded | 50 | URL |
Live Examples by Theme
| Theme | Canvas / Shape / Radius | Preview | Description |
|---|---|---|---|
| eternity | light / circle / 0 | Classic eternity theme, light background, circular avatar | |
| eternity | dark / circle / 0 | Dark canvas version of eternity theme | |
| base | light / rounded / 20 | Base theme, light background, rounded corners 20px | |
| base | light / rounded / 50 | Base theme, light background, rounded corners 50px | |
| flamingo | dark / circle / 0 | Flamingo theme, dark canvas | |
| flamingo | light / rounded / 30 | Flamingo theme, light canvas, rounded corners 30px |
Embed in README
🤝 Contributing
- 🎨 Add new themes in
public/frames/ - 🐛 Bug fixes
- ✨ New features
- 📚 Improve documentation
⚙ Tech Stack
- Node.js & Express.js (TypeScript)
- Sharp (image processing)
- Render (hosting)
- TypeScript
🔗 Links
- Live API: https://github-avatar-frame-api.onrender.com
- Issues: GitHub Issues
- Contributing Guidelines: CONTRIBUTING.md
- Code of Conduct: CODE_OF_CONDUCT.md
🌟 Show Your Support
- ⭐ Star the repository
- 🐛 Report bugs or suggest features
- 🤝 Contribute new themes
- 📢 Share with the community
📜 License
MIT License