Generate an embeddable GitHub README SVG card from your public repositories.
Demo | Quick Start | API Reference | Why | Technology | Local Dev | Deploy | Limitations | Thanks | Policies
- README-ready SVG output from
/api/card - Detection mode split:
techstack,languages,all - Section filter:
frontend,backend,tools,mobile,other,all - Theme support:
darkandlight - Optional per-technology project list with links (
show_projects=true) - Optional JSON debug endpoint at
/api/projects
- TypeScript
- React
- Vite
- Node.js
- Vercel Serverless Functions
- GitHub REST API
- Simple Icons
Add this to your README:
GET /api/card?username=<github_username>
Example:
https://github-readme-stack-mapping.vercel.app/api/card?username=RezaFabGET /api/projects?username=<github_username>
Example:
https://github-readme-stack-mapping.vercel.app/api/projects?username=RezaFab&mode=all§ion=all| Name | Type | Default | Description |
|---|---|---|---|
username |
string | required | GitHub username |
mode |
techstack | languages | all |
techstack |
Group source (techstack excludes language-only stacks) |
section |
all | frontend | backend | tools | mobile | other |
all |
Filter stacks by section |
theme |
dark | light |
dark |
Card theme |
hide_border |
boolean | false |
Hide outer border |
title_color |
hex color | auto | Override title color |
text_color |
hex color | auto | Override body text color |
bg_color |
hex color | auto | Override background color |
border_color |
hex color | auto | Override border color |
show_projects |
boolean | false |
Show project list under each stack card |
max_repos_per_stack |
number 1-10 |
5 |
Max repos shown per stack (used when show_projects=true) |
max_stacks |
number 1-40 |
25 |
Max stacks shown |
- Focuses on stack mapping by repository context, not just language statistics.
- Supports section-based filtering (
frontend,backend,tools,mobile,other) to make cards more relevant. - Can show related project names under each technology (
show_projects=true) for better portfolio storytelling.
- Install dependencies:
npm install- Add
.env.local:
GITHUB_TOKEN=your_github_token_here- Run frontend (Vite):
npm run dev- Run API routes (Vercel runtime):
npx vercel dev --listen 3000- Open:
http://localhost:5173The frontend preview should call http://localhost:3000/api/card?... in local dev.
- Import this repository to Vercel.
- Set environment variable
GITHUB_TOKENin Project Settings. - Deploy.
Security notes:
- Keep token server-side only.
- Do not expose token as
VITE_GITHUB_TOKEN.
- Uses only public repositories available from GitHub APIs.
- GitHub API rate limits can affect response time or produce temporary empty results, especially without a token.
- Technology detection is heuristic-based, so some repositories may be categorized imperfectly.
- Very large profiles may need
max_stacksandmax_repos_per_stacktuning to keep output readable.
- Inspired by github-readme-stats by Anurag Hazra.
- Thanks to Simple Icons for the icon dataset used in this project.
- Thanks to Vercel for the serverless platform used to run and deploy this project.
npm run build