GitHub Insights

Generate beautiful, customizable GitHub stats cards and 3D contribution profiles for your README

Live Demo • Features • Usage • Insight Cards • 3D Contribution • Self-Hosting

Features

📊 Comprehensive Stats - Commits, PRs, issues, stars, and more
🔥 Streak Tracking - Current and longest contribution streaks
📈 Contribution Graph - 31-day activity line chart card
🃏 Standalone Cards - insight, stats, graph, or streak
🧊 Profile 3D Contribution - 3D calendar with radar & languages (/api/contrib-3d)
🎨 Card Themes - Multiple themes including Aurora Night and Ember Void
🙈 Language Filtering - Hide specific languages from insight cards
🌗 Site Theme Toggle - Light, Dark, and System mode
📥 Download Options - Export as SVG, PNG, or JPG
⚡ Fast & Cached - Smart caching for quick loads
📱 Responsive UI - Mobile-friendly generator studio

Usage

Quick Start

Insight card:

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/insight?username=YOUR_USERNAME" alt="GitHub Insights" />
</p>

3D contribution profile:

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=green" alt="GitHub 3D Contribution" />
</p>

Replace YOUR_USERNAME with your GitHub username.

Insight Cards

Card types

`card`	Description
`insight` (default)	Full analytics card with modular sections
`stats`	Stars, contributions, PRs, issues, contributed-to & rank
`graph`	31-day contribution line chart
`streak`	Total contributions, current streak & longest streak

Parameters

Parameter	Default	Description
`username`	Required	Your GitHub username
`card`	`insight`	Card type: `insight`, `stats`, `graph`, or `streak`
`theme`	`github_dark`	Card theme
`transparent`	`false`	Transparent background (streak card only)
`profile`	`true`	Show name & username
`header`	`true`	Show monthly contribution chart
`summary`	`true`	Show summary info (contributions, repos, join date)
`stats`	`true`	Show GitHub stats section
`languages`	`true`	Show top programming languages
`streak`	`true`	Show streak statistics
`graph`	`true`	Show contribution graph section
`hide_langs`	(none)	Comma-separated languages to exclude (e.g. `HTML,CSS`)

Examples

Full insights

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/insight?username=YOUR_USERNAME&theme=radical&graph=true&languages=true&streak=true&stats=true&header=true&summary=true&profile=true" alt="GitHub Insights" />
</p>

Stats card

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/insight?username=YOUR_USERNAME&card=stats&theme=tokyonight" alt="GitHub Stats" />
</p>

Graph card

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/insight?username=YOUR_USERNAME&card=graph&theme=github_dark" alt="Contribution Graph" />
</p>

Streak card

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/insight?username=YOUR_USERNAME&card=streak&theme=aurora_night" alt="GitHub Streak" />
</p>

Add &transparent=true to the streak card for a transparent background. Example: theme=ember_void&transparent=true.

Hide languages

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/insight?username=YOUR_USERNAME&theme=github_light&languages=true&hide_langs=HTML,CSS" alt="GitHub Insights" />
</p>

Themes

Theme	Preview
`github_dark`
`github_light`
`radical`
`tokyonight`
`dracula`
`synthwave`
`ocean`
`neo_green`
`aurora_night`
`ember_void`

Profile 3D Contribution

Based on github-profile-3d-contrib by SATO Yoshiyuki.
This endpoint generates a 3D contribution calendar plus radar chart and language pie — the same visual styles as the original Action, served live as SVG from our API (no workflow commit required).

Overview

Use it two ways:

Live embed — point an <img> at /api/contrib-3d (updates when GitHub data changes; subject to caching).
Studio UI — open the site, choose 3D Contribution, pick a style, then Generate / download SVG·PNG·JPG.

Note

To include private contributions on the calendar, enable Include private contributions on my profile in GitHub → Settings → Public profile → Contributions & Activity.
Self-hosted instances also need a classic PAT with repo + read:user (see Self-Hosting).

Endpoint

https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=green&animate=true

Parameters

Parameter	Default	Description
`username`	Required	GitHub username
`style`	`green`	Visual style (see demos below)
`animate`	`true`	Enable growing SVG animations (`false` for a static file)
`year`	(rolling year)	Optional calendar year, e.g. `2024` (past calendars)

Styles & demos

Generated images match the original Action’s theme set:

`style`	Description	Demo file
`green`	Classic green contribution blocks	`profile-green(-animate).svg`
`season`	Northern hemisphere seasonal colors	`profile-season(-animate).svg`
`south-season`	Southern hemisphere seasonal colors	`profile-south-season(-animate).svg`
`night-view`	Dark night / city palette	`profile-night-view.svg`
`night-green`	Dark background with green blocks	`profile-night-green.svg`
`night-rainbow`	Rainbow contribution blocks	`profile-night-rainbow.svg`
`gitblock`	Pixel-pattern block style	`profile-gitblock.svg`
`alberto`	Custom Alberto palette (blues & violet)	`profile-alberto.svg`

Example: green version

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=green&animate=true" alt="3D Green" />
</p>

Static (no animation):

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=green&animate=false" alt="3D Green" />

Example: season version (Northern Hemisphere)

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=season&animate=true" alt="3D Season" />

Example: season version (Southern Hemisphere)

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=south-season&animate=true" alt="3D South Season" />

Example: night view version

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=night-view" alt="3D Night View" />

Example: night green version

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=night-green" alt="3D Night Green" />

Example: night rainbow version

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=night-rainbow&animate=true" alt="3D Night Rainbow" />

Example: git block version

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=gitblock" alt="3D Git Block" />

Example: Alberto version

Custom palette from profile-night-view-settings.json (blues + violet radar).

<img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=alberto&animate=true" alt="3D Alberto" />

Add to your profile README

Same idea as the original project — drop the image into your special username/username profile README:

## Contributions

<p align="center">
  <img src="https://github-profiles-insights.vercel.app/api/contrib-3d?username=YOUR_USERNAME&style=green&animate=true" alt="GitHub 3D Contribution" />
</p>

Or download an SVG from the studio and commit it under something like ./profile-3d-contrib/profile-green-animate.svg, then reference the local file:

![](./profile-3d-contrib/profile-green-animate.svg)

Demo assets in this repo

Preview SVGs (from the upstream project) live at:

docs/demo/profile-green-animate.svg
docs/demo/profile-green.svg
docs/demo/profile-season-animate.svg
docs/demo/profile-season.svg
docs/demo/profile-south-season-animate.svg
docs/demo/profile-south-season.svg
docs/demo/profile-night-view.svg
docs/demo/profile-night-green.svg
docs/demo/profile-night-rainbow.svg
docs/demo/profile-gitblock.svg
docs/demo/profile-alberto.svg

Credits

Self-Hosting

Prerequisites

Node.js 20+
GitHub Personal Access Token

Setup

Clone the repository

git clone https://github.com/christianalberto/github-insights.git
cd github-insights

Install dependencies
```
npm install
```
Create environment file
```
cp .env.example .env.local
```
Add your GitHub token (classic PAT)

Create a Classic Personal Access Token
(Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token (classic)).

Enable these scopes:

Scope Required for

repo Full access to private repositories (stars, languages, repo counts, etc.)

read:user Read user profile data

Without repo, private repositories are ignored and only public data is returned.

Optional but recommended for private contribution activity on calendars/streaks: in GitHub go to
Settings → Public profile → Contributions & Activity and enable
Include private contributions on my profile.

Add the token to .env.local:
```
GITHUB_TOKEN=your_token_here
```
Run the development server
```
npm run dev
```
Open http://localhost:3000

Deploy to Diploi

Important: In Diploi, open Deployment Page -> Options -> Next.js -> Environment and add the GITHUB_TOKEN environment variable.

Deploy to Vercel

Important: Add the GITHUB_TOKEN environment variable in your Vercel project settings.

Tech Stack

Framework: Next.js 16 with App Router
Runtime: Node.js API routes (3D contrib) + SVG generators
Language: TypeScript
3D engine: d3 + jsdom (ported from github-profile-3d-contrib)
API: GitHub GraphQL API v4
Image Export: Canvas API for PNG/JPG conversion
Deployment: Vercel

Contributing

Contributions are welcome! Feel free to:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

MIT License. See the LICENSE file for details.

Author / Maintainer: @christianalberto

Copyright holders:

Christian Alberto — author & maintainer of this fork (standalone cards, 3D contribution, UI)
NISHAT MAHMUD (@nishatrhythm) — original GitHub Insights
SATO, Yoshiyuki — github-profile-3d-contrib

GitHub Repository • MIT License • Author: @christianalberto

Name		Name	Last commit message	Last commit date
docs/demo		docs/demo
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Scope	Required for
`repo`	Full access to private repositories (stars, languages, repo counts, etc.)
`read:user`	Read user profile data

Latest commit

History

Folders and files

Repository files navigation

GitHub Insights

Features

Usage

Quick Start

Insight Cards

Card types

Parameters

Examples

Full insights

Stats card

Graph card

Streak card

Hide languages

Themes

Profile 3D Contribution

Overview

Endpoint

Parameters

Styles & demos

Example: green version

Example: season version (Northern Hemisphere)

Example: season version (Southern Hemisphere)

Example: night view version

Example: night green version

Example: night rainbow version

Example: git block version

Example: Alberto version

Add to your profile README

Demo assets in this repo

Credits

Self-Hosting

Prerequisites

Setup

Deploy to Diploi

Deploy to Vercel

Tech Stack

Contributing

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages