A self-hosted GitHub profile README card generator built with Next.js. It helps you create elegant, themeable SVG cards for stats, developer ranks, streaks, coding habits, achievements, contribution graphs, trophies, typing banners, pinned repos, and tech stacks for your profile README.
GitStats Studio is a modern card studio for GitHub profiles. It ships with:
- Interactive Card Studio & Full README Composer: Customize individual widgets or compose an entire profile README suite in one click.
- 12 Dynamic SVG Card Endpoints: Profile stats, developer ranks, coding habits, trophies, typing banners, streaks, contribution heatmap, tech stack, pinned repo, top repos, achievements.
- 24+ Curated Themes & Live Custom Color Pickers: Dracula, Cyberpunk, Nord, Catppuccin Mocha/Latte, One Dark, Rosé Pine, Gruvbox, Moonlight, Aurora, Matrix, and more.
- Direct Asset Export: One-click SVG and @2x Retina PNG download via client-side canvas rasterization.
- Multi-PAT Token Load Balancing: Automatic token rotation for high rate-limit resilience.
Important
This deployment is restricted and is not open to everyone by default.
To get access:
- Star this repository
- Open a pull request adding your GitHub username to USERS.md
- Wait for approval and merge
The following 24+ curated themes are supported through the theme parameter:
default, dracula, nord, cyberpunk, synthwave, emerald, sunset, tokyonight, glass, light, catppuccin-mocha, catppuccin-latte, one-dark, rose-pine, gruvbox-dark, moonlight, hyper-neon, midnight-blue, aurora, matrix-green, blood-orange, cobalt, solarized-dark, monokai.
modern, sleek, cyber, classic, minimal, compact.
All 12 card endpoints support responsive auto-scaling and custom pixel dimensions:
| Parameter | Type | Default | Description | Example |
|---|---|---|---|---|
responsive |
Boolean | false |
Enables fluid 100% width auto-scaling with preserved aspect ratio | &responsive=true |
width / card_width |
Number | Auto | Sets custom SVG width in pixels | &width=600 |
height / card_height |
Number | Auto | Sets custom SVG height in pixels | &height=240 |
scale |
Float | 1.0 |
Uniform multiplier scale factor (0.5 to 2.5) |
&scale=1.25 |
border_radius |
Number | 16 |
Corner radius in pixels (0 to 32) |
&border_radius=20 |
username: GitHub handle (required)theme,style,animate,font_familywidth,height,scale,responsive,border_radius
username: GitHub handle (required)theme,style,animate,font_family,hide_borderwidth,height,scale,responsive,border_radius
username: GitHub handle (required)utc_offset: Timezone offset in hours (e.g.6for UTC+6,-5for EST, default0)theme,animate,width,height,scale,responsive,border_radius
username: GitHub handle (required)column: Number of columns for trophy layout (3,4,6,8)theme,animate,width,height,scale,responsive,border_radius
lines: Semicolon-separated or newline-encoded phrases for multi-line typewriter animationtheme,font_family,width,height,scale,responsive,border_radius
username: GitHub handle (required)limit: Number of top languages (1to10, default5)hide: Comma-separated languages to exclude (e.g.html,css,jupyter notebook)layout: Layout style (compact,donut,pie)theme,style,width,height,scale,responsive,border_radius
username: GitHub handle (required)theme,style,animate,width,height,scale,responsive,border_radius
username: GitHub handle (required)repo: Repository name to feature (required)theme,style,animate,width,height,scale,responsive,border_radius
username: GitHub handle (required)limit: Number of repos to list (3to10, default5)sort: Metric sorting (starsorforks)theme,animate,width,height,scale,responsive,border_radius
username: GitHub handle (required)theme,animate,width,height,scale,responsive,border_radius
username: GitHub handle (required)limit: Max badges to display (4for compact,6,8,12, or0for all)cols/per_line: Columns in the grid (3,4,5, default4)- Automatically extracts real unlocked badges with stage tiers (e.g. Gold x4, Silver x3, Bronze x2, or Base Tier) and official high-res assets.
theme,style,width,height,scale,responsive,border_radius
i/icons/skills: Comma-separated list of technology identifiers (e.g.react,next,ts,py,rust,docker,aws)per_line/cols: Items per row for auto-wrapping (e.g.4,5,6,8, defaultauto-wrapping)style:modern(Bento Cards with Icon + Label) orsleek(Compact Icon Chips)theme,width,height,scale,responsive,border_radius
You can override any theme palette colors with direct HEX values (omit # or include url-encoded %23):
| Parameter | Description | Example |
|---|---|---|
bg_color |
Card background color or gradient | &bg_color=0f172a |
title_color |
Header title color | &title_color=38bdf8 |
text_color |
Body and metrics text color | &text_color=f8fafc |
accent_color |
Icons and accent color | &accent_color=818cf8 |
hide_border |
Remove outer card border stroke | &hide_border=true |
font_family |
Typography (Inter, Outfit, JetBrains Mono, Fira Code) |
&font_family=JetBrains+Mono |
animate |
Floating micro-animation | &animate=true |
npm install
cp .env.local.example .env.local
npm run devThen open:
http://localhost:3000GITHUB_TOKEN=your_github_token
WHITELIST=alrifatsabbirGITHUB_TOKENis used to query public GitHub dataWHITELISTcan be used to restrict access to specific usernames
- Fork or push this repository to GitHub
- Import the project in Vercel
- Add environment variables:
GITHUB_TOKENWHITELIST(optional)
- Deploy the project
app/
api/ # Card generation endpoints
page.js # Studio builder UI
assets/
lib/ # Card and helper logic
public/ # Static files like favicon/logo
styles/Contributions are welcome. Please:
- Keep the project easy to self-host
- Preserve the card API compatibility
- Use the whitelist flow when adding access-related changes
This project is distributed under the repository license. See LICENSE.md for details.