GitHub - vsmutok/github-metrics: One image, your whole GitHub story. Live SVG cards for your profile README — 32 themes, charts, trophies and competitive-programming stats. No widgets, no client scripts.

One image. Your whole GitHub story.
A live SVG card for your profile README — themes, charts, trophies, and competitive-programming stats. No widgets, no client scripts.

Open the studio · Embed in 30 seconds · Gallery · Parameters

Gallery

The card is one SVG. Theme changes the palette. Style changes the charts and trophies. Hidden sections reflow — there are no empty gaps.

_{theme=github-light · classic}	_{theme=tokyonight&style=modern}
_{theme=dracula&style=grid}	_{theme=catppuccin&style=modern}
_{theme=nord · classic}	_{theme=github-dark · default}

Tune username, theme, style and sections in the interactive demo, then copy the snippet.

What it is

github-metrics turns a GitHub username into a single crisp SVG. Embed one <img>. The card is regenerated on every view, cached in memory, and safe to drop into a profile README.

Why github-metrics

One image, zero friction. Nothing to add to your profile repo except a URL.
GitHub-native by default. Ships GitHub's own palettes (github-dark, github-light, github-dimmed, high-contrast) and renders them flat.
32 themes and 3 card styles (Classic, Modern, Grid).
Every section is toggleable. Hidden sections reflow, so there are no empty gaps.
More than GitHub. LeetCode, Codeforces and CodeChef appear when at least two of those platforms return data.
Fast and accessible. In-memory caching and WCAG-minded contrast checks.

Sections

Section	What it shows
GitHub activity	Contributions, pull requests opened, issues opened
Streak stats	Current streak, longest streak, total contribution days
Repository stats	Public repos, stars, forks and related repo totals. Hidden when a valid LeetCode profile is shown
Contribution chart	Last 30 days of contribution activity
Top languages	Language breakdown across public repositories
Achievement trophies	Commits, PRs, reviews, issues, repos, stars, followers, open-source impact, forks, discussions
Competitive programming	LeetCode, Codeforces and CodeChef — only when at least two platforms resolve

Embed it

Host the API (see Deployment), then paste this into your profile README.md:

![github-metrics](https://your-domain.com/api/profile?username=YOUR_USERNAME)

A tighter card — modern style, centered header, no trophies:

![github-metrics](https://your-domain.com/api/profile?username=YOUR_USERNAME&theme=github-dark&style=modern&align=center&hide_trophies=true)

Boolean flags accept true / false, 1 / 0 and yes / no. Unknown themes and styles fall back to the defaults instead of failing the request.

Static previews

The repo also ships pre-rendered SVGs (served statically by Vercel), one per theme:

![github-metrics](https://ghmetric.vercel.app/previews/github-dark.svg)

These are fixed (demo data). For your own live card, use the /api/profile endpoint above.

Themes

Pass ?theme= with any of these. The default is github-dark. github is an alias for github-dark; high-contrast is an alias for hc-light.

GitHub — github-dark · github-light · github-dimmed · hc-dark · hc-light · dark · light

Editor — dracula · nord · monokai · gruvbox · tokyonight · solarized · catppuccin · rose-pine · onedarkpro · one-dark · material · cobalt2 · androidstudio · xcode · oceanicnext

Atmosphere — aurora · midnight-sunset · synthwave84 · forestnight · emberglow · midnightneon · pasteldream · webdev · aiml · gamedev

Custom colors override any theme: bg, text, accent, card_bg, border, sec_text, muted_text (3- or 6-digit hex).

Card styles

Style	Look
`classic`	Bars, language bars, circular trophies. The default.
`modern`	Smoothed contribution line and a language donut. Hex trophies.
`grid`	Contribution heatmap and a stacked language bar. Squared trophies.

Query parameters

Parameter	Type	Default	Description
`username`	string	`vsmutok`	Target GitHub username (`DEFAULT_USERNAME` overrides the built-in fallback)
`theme`	string	`github-dark`	Visual theme palette
`style`	string	`classic`	Card style: `classic`, `modern`, `grid`
`align`	string	`left`	Header alignment: `left`, `center`, `right`
`hide_header`	boolean	`false`	Hide the profile header
`hide_activity`	boolean	`false`	Hide the GitHub Activity card
`hide_streak`	boolean	`false`	Hide the Streak Stats card
`hide_repos`	boolean	`false`	Hide the Repository Stats card
`hide_contribution`	boolean	`false`	Hide the Contribution Activity chart
`hide_languages`	boolean	`false`	Hide the Top Languages chart
`hide_trophies`	boolean	`false`	Hide the Achievement Trophies row
`leetcode`	string	–	LeetCode username (solved + rating). Replaces repository stats when the profile loads
`codeforces`	string	–	Codeforces handle (rating + rank)
`codechef`	string	–	CodeChef username (rating, division, stars)
`bg`, `text`, `accent`, `card_bg`, `border`, `sec_text`, `muted_text`	hex	–	Custom color overrides

Competitive-programming handles are optional. The CP row is drawn only when at least two of LeetCode, Codeforces and CodeChef return data. A single handle is ignored rather than leaving a half-empty row.

Deployment

The app is a small Express server that renders SVG on demand. It runs without a token: a public fallback fills contributions and streaks. A token improves accuracy (PRs, issues, reviews) and raises GitHub rate limits.

зр### Vercel — API + demo, auto-deploy

Import the repo at vercel.com/new. The included vercel.json serves the demo from public/ and the API as a serverless function.
In Project → Settings → Environment Variables, add GITHUB_TOKEN (create one here; no extra scopes needed for public data).
Deploy. Every push to main re-deploys automatically.

Your embed URL is then:

![github-metrics](https://your-project.vercel.app/api/profile?username=YOUR_USERNAME)

Other hosts

Prefer to run it yourself? Docker works anywhere:

docker compose up -d

See the Dockerfile. npm start builds the renderer bundle, then listens on PORT (default 3000). Use GET /health as the liveness probe.

Run locally

Requires Node.js 20 or newer.

git clone https://github.com/vsmutok/github-metrics.git
cd github-metrics
npm install
cp .env.example .env      # optional, but recommended
npm run dev               # http://localhost:3000

Open the demo at http://localhost:3000, or request a card directly:

http://localhost:3000/api/profile?username=YOUR_USERNAME

Environment

Copy .env.example. Every variable is optional.

Variable	Default	Purpose
`PORT`	`3000`	HTTP port
`NODE_ENV`	`development`	`development` or `production`
`GITHUB_TOKEN`	–	Public-scope token. Higher rate limits and more accurate PR / issue / review stats. Create one with no extra scopes
`DEFAULT_USERNAME`	`vsmutok`	Used when `?username` is omitted
`CACHE_MAX_SIZE`	`1000`	In-memory cache entries. TTL is 5 minutes in development and 30 minutes in production
`MONGODB_URI`	–	Optional analytics. Omitted means analytics stay off
`MONGODB_DB`	from the URI	Database name override
`ANALYTICS_DISABLED`	–	Set to `true` to skip logging even when MongoDB is configured
`ADMIN_API_KEY`	–	When set, `GET /api/cache/stats` requires this key. When unset, cache stats are public

Scripts

Command	What it does
`npm run dev`	Watch mode (`node --watch`)
`npm start`	Production server
`npm test`	Unit tests
`npm run test:coverage`	Coverage report
`npm run test:visual`	Visual workflow tests
`npm run check`	Lint / quality gate
`npm run previews`	Rebuild static theme SVGs
`npm run build:previews`	Bundle the engine and regenerate previews

API endpoints

Endpoint	Description
`GET /api/profile`	Dashboard SVG for a username
`GET /api/profile/loading`	Loading spinner SVG (honors `theme` and color overrides)
`GET /api/theme-preview/:theme`	Mock dashboard preview for a theme
`GET /health`	Liveness probe
`GET /api/cache/stats`	Cache statistics. Protected when `ADMIN_API_KEY` is set

Project structure

src/
├── routes/       # Express routes
├── services/     # GitHub, LeetCode, Codeforces, CodeChef
├── renderers/    # SVG dashboard renderer
├── themes/       # Color palettes
├── utils/        # Cache, validation, sanitizers, accessibility
└── server.js     # Express entry point
public/           # Interactive demo and README photos
previews/         # Static theme SVGs

Contributing

Contributions are welcome — bug fixes, themes, docs and renderer work. See CONTRIBUTING.md and the Code of Conduct.

Security issues and SVG injection reports should go to the maintainers privately, not to a public issue.

License

MIT © vsmutok.

Name		Name	Last commit message	Last commit date
.github		.github
api		api
public		public
scripts		scripts
src		src
.dockerignore		.dockerignore
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
docker-compose.yml		docker-compose.yml
jest.config.js		jest.config.js
package-lock.json		package-lock.json
package.json		package.json
vercel.json		vercel.json

Navigation Menu

Repository navigation

About

Repository files navigation

Contents

Gallery

What it is

Why github-metrics

Sections

Embed it

Static previews

Themes

Card styles

Query parameters

Deployment

Other hosts

Run locally

Environment

Scripts

API endpoints

Project structure

Contributing

License

About

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Contents

Gallery

What it is

Why github-metrics

Sections

Embed it

Static previews

Themes

Card styles

Query parameters

Deployment

Other hosts

Run locally

Environment

Scripts

API endpoints

Project structure

Contributing

License

About

Topics

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Contributors

Languages