Generate beautiful, customizable GitHub stats cards for your profile README

Live Demo • Features • Usage • Themes • Self-Hosting

• 📊 Comprehensive Stats - Commits, PRs, issues, stars, and more
• 🔥 Streak Tracking - Current and longest contribution streaks with accurate consecutive day detection
• 📈 Contribution Graph - Visual representation of your activity with monthly breakdowns
• 🗣️ Top Languages - Most used programming languages with visual percentages
• 🙈 Language Filtering - Hide specific languages from your stats so percentages only reflect what matters to you
• 🎨 Multiple Themes - 8 beautiful card themes to choose from (GitHub Light, GitHub Dark, Radical, Tokyo Night, Dracula, Synthwave, Ocean, Neo Green)
• 🌗 Site Theme Toggle - Switch the web UI between Light, Dark, and System mode with persistent preference
• 📥 Download Options - Export your stats card as SVG, PNG, or JPG directly from the UI
• ⚡ Fast & Optimized - Edge runtime with intelligent caching for quick loads
• 📱 Responsive Design - Looks great on any device with a fully mobile-friendly interface
• 🔄 Smart Regeneration UX - The Generate button and a banner highlight automatically when your settings have changed since the last card was generated, and clear automatically if you revert to the previously generated configuration

Add this to your GitHub profile README:

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

Replace YOUR_USERNAME with your GitHub username.

<p align="center">
  <img src="https://yourinsights.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>

You can exclude certain languages so they don't appear in the languages section and their percentages are redistributed among the remaining ones:

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

Theme	Preview
github_dark
github_light
radical
tokyonight
dracula
synthwave
ocean
neo_green

• Node.js 20+
• GitHub Personal Access Token

1. Clone the repository

   git clone https://github.com/nishatrhythm/GitHub-Insights.git
   cd GitHub-Insights

2. Install dependencies

   npm install

3. Create environment file

   cp .env.example .env.local

4. Add your GitHub token

   Create a Personal Access Token with the following scopes:

   • repo (Full control of private repositories)
   • read:user (Read all user profile data)

   Add it to .env.local:

   GITHUB_TOKEN=your_token_here
   

5. Run the development server

   npm run dev

6. Open http://localhost:3000

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

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

• Framework: Next.js 16 with App Router
• Runtime: Edge Runtime for optimal performance
• Language: TypeScript for type safety
• Styling: Inline SVG with dynamic theming
• Font: Inter for consistent cross-platform rendering
• API: GitHub GraphQL API v4
• Image Export: Canvas API for PNG/JPG conversion
• Deployment: Vercel with automatic edge caching

Contributions are welcome! Feel free to:

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

This project is licensed under the MIT License - see the LICENSE file for details.

Free and open source
Made with ❤️ by nishatrhythm and other contributors