Engive GitHub Widget — Docs
Five server-rendered SVG widgets. Drop a single <img> tag into your README or site. No build, no JavaScript on the host page, no API key. Free forever.
Quick start — GitHub README
Copy one line. Replace ankurhalder with any synced GitHub handle.
Want HTML? Use <img src="…" alt="…"/> — both forms render identically on GitHub.
The five endpoints
Each endpoint returns an SVG. All support the same query parameters below.
| Endpoint | What it shows |
|---|---|
/api/widget/[username]/stats.svg | Avatar, name, handle, top 3 languages, total stars, total commits, current streak, brand footer. |
/api/widget/[username]/streak.svg | Current streak, longest streak, total commits, three counters in one card. |
/api/widget/[username]/streak-trophy.svg | Mega card combining current/longest streak, commits, stars, and repos with a computed rank badge (C → SSS). |
/api/widget/[username]/views.svg | Live counter badge of how many times your widgets have been rendered. Also available as JSON at /views (returns { u, n }). |
/api/widget/[username]/top-languages.svg | Horizontal bar of the top N languages by bytes written, with hex-matched dots and percentages. |
/api/widget/[username]/contributions.svg | 53-week contribution heat-map with month labels plus commit & streak totals in the header. |
/api/widget/[username]/repos.svg | Featured repositories with stars, forks, language, topics, and a 1-line description each. |
/api/widget/[username]/coding-profiles.svg | LeetCode solved counts, Codeforces rating, and Stack Overflow reputation combined into one card. Configure handles in the widget builder. |
Themes
Seven hand-curated presets. Pick one with &theme= or override individual colors below.
glass-darkDefault. Matches the dark dashboard aesthetic of ankurhalder.com.
glass-lightLight variant. Use on white-background READMEs and light blogs.
auroraAnimated gradient background. Heavier, but eye-catching.
neonHigh-saturation accent. For dark hacker-themed profiles.
draculaThe famous Dracula palette. Officially named after the theme.
catppuccinSoothing pastel palette. Looks great on both light and dark backgrounds.
solarizedClassic precision palette. Easy on the eyes for long reading.
URL parameter reference
Every customization is a query string parameter on the SVG URL. No signup, no auth, no JavaScript.
| Parameter | Type / Range | Default | Description |
|---|---|---|---|
| theme | string | glass-dark | Theme preset. One of glass-dark, glass-light, aurora, neon, dracula, catppuccin, solarized. |
| cardWidth | 240–820 | 320 | Total width of the rendered SVG in pixels. |
| backgroundColor | color | #0d1117 | Card background. Any CSS color (hex, rgb, rgba). |
| accentColor | color | #58a6ff | Primary accent (avatar ring, brand footer dot, etc.). |
| textColor | color | #e6edf3 | Primary text color. |
| textMutedColor | color | rgba(230, 237, 243, 0.6) | Secondary / muted text color. |
| borderColor | color | rgba(255, 255, 255, 0.08) | Border color. |
| borderWidth | 0–4 | 1 | Border thickness in pixels. |
| borderStyle | string | solid | solid, dashed, dotted, or double. |
| borderRadius | 0–32 | 14 | Corner radius in pixels. |
| cardPadding | 8–36 | 18 | Inner padding in pixels. |
| fontFamily | string | system-ui | CSS font-family stack. URL-encode commas and spaces. |
| fontSize | 10–20 | 14 | Base font size in pixels. |
| avatarShape | string | circle | circle, rounded, or square. |
| showFooter | bool | true | Show the "Made with Engive" footer. |
| shadowGlow | bool | false | Apply an accent-tinted glow filter. |
| bgGradientEnd | color | — | Optional. Enable gradient by supplying a second color (use gradientAngle too). |
| gradientAngle | 0–360 | 135 | Angle of the bgGradientEnd gradient in degrees. |
Examples
Compact card
Dracula streak
Hide brand footer
Custom font + radius
Gradient background
Where it works
- GitHub READMEs — the canonical case. The widget ships as an
<img>that GitHub's CSP allows. - dev.to / Hashnode / Medium — all three accept
<img>tags in markdown. - Personal sites & portfolios — any HTML page. Drop it in next to your project cards.
- Email signatures — SVGs render in Gmail, Outlook, and Apple Mail. If your client strips remote images, fetch once and attach the file.
- Documentation sites — Next.js docs, VitePress, Docusaurus. Works wherever
<img>works.
Performance
- JS shipped to the host page: 0 KB
- SVG payload: ~2–50 KB depending on widget (cached)
- Cache:
Cache-Control: public, s-maxage=86400, stale-while-revalidate=172800 - Data freshness: refreshed once per day by the GitHub Actions sync job
- CORS:
Access-Control-Allow-Origin: *— embed from any origin
Advanced: JS embed for third-party sites (GitHub strips scripts)
For custom portfolios, blogs, and docs that allow <script> tags, Engive also ships an 11 KB JS bundle (/widget/embed.js) that fetches JSON and renders live. GitHub README does not work with this form — use the SVG <img> above.
<script src="https://www.ankurhalder.com/widget/embed.js" data-username="ankurhalder" data-engive-widget="loader" defer ></script> <div class="engive-github-widget" data-widget="developer-card"></div>
FAQ
Can I use this on a custom domain?
The SVG endpoint is open CORS, so any site can embed it. If you want to host the widget yourself (self-host), proxy the requests through your own CDN.
Can I embed my own GitHub stats?
Yes. Sign in and run the GitHub sync once, then use /api/widget/your-username/stats.svg in your README.
How do I remove the "Made with Engive" footer?
Add &showFooter=false to your SVG URL.
What happens if the API is down?
The endpoint returns the last cached SVG until a fresh one is generated. Your README never breaks.