GitHub Heat

Generate customizable GitHub contribution heatmaps with SVG rendering, dark mode, visual effects, and extensive styling options. Fully mobile-optimized.

Deployed at: gh-heat.anishroy.com

Quick Start

Replace username with any GitHub username:

https://gh-heat.anishroy.com/api/username/svghttps://gh-heat.anishroy.com/api/username/svg?theme=purple&darkMode=true

API Endpoints

SVG Image API

GET /api/[username]/svg

Returns an SVG image of the contribution graph. Supports extensive customization via query parameters.

JSON Data API

GET /api/[username]

Returns raw contribution data as JSON with total count, date range, and daily contributions.

Canvas Page (for iframes)

GET /[username]/canvas

HTML page optimized for iframe embedding with horizontal scrolling support.

Query Parameters

Colors & Themes

Parameter	Values	Description
`theme`	accent, green, blue, purple, red	Color theme (default: green)
`darkMode`	true, false	Enable dark mode
`colors`	5 hex codes (no #)	Custom palette (comma-separated)
`v`	year (e.g., 2024)	Filter by year

Visual Styling

Parameter	Values	Description
`shape`	square, circle	Cell shape (default: square)
`radius`	number	Border radius in px (default: 2)
`borderWidth`	number	Border width in px (default: 1)
`borderColor`	hex or rgba	Border color
`shadow`	true, false	Add drop shadow

Typography

Parameter	Values	Description
`font`	font family	Custom font (default: system)
`fontSize`	number	Font size in px (default: 10)
`fontWeight`	100-900	Font weight (default: 400)
`textColor`	hex color	Label text color

Background & Layout

Parameter	Values	Description
`bg`	hex color	Background color
`transparent`	true, false	Transparent background
`gradient`	from,to,direction	Background gradient (horizontal, vertical, diagonal)

Dimensions

Parameter	Values	Description
`cellSize`	number	Cell size in px (default: 11)
`cellGap`	number	Gap between cells in px (default: 2)
`width`	number	Total SVG width (auto if not set)
`height`	number	Total SVG height (auto if not set)
`padding`	number	Padding in px (default: 10)
`mobile`	true, false	Apply mobile-optimized defaults

Labels & Legend

Parameter	Values	Description
`showMonthLabels`	true, false	Show month labels (default: true)
`showDayLabels`	true, false	Show day labels (default: true)
`showLegend`	true, false	Show legend (default: true)
`legendPos`	top, bottom, left, right	Legend position (default: bottom)

Visual Effects

Parameter	Values	Description
`blur`	number (e.g., 0.5)	Blur effect strength
`brightness`	number (e.g., 1.2)	Brightness multiplier
`saturate`	number (e.g., 1.5)	Saturation multiplier

Usage Examples

Embedding in HTML

<img src="https://gh-heat.anishroy.com/api/username/svg" /><img src="https://gh-heat.anishroy.com/api/username/svg?theme=purple&darkMode=true" />

Embedding in Markdown

![GitHub Contributions](https://gh-heat.anishroy.com/api/username/svg?theme=accent)

Embedding in iframe

<iframe src="https://gh-heat.anishroy.com/username/canvas?theme=accent" width="800" height="200"></iframe>

Example Configurations

Dark Mode with Purple Theme

?theme=purple&darkMode=true

Circular Cells with Shadow

?shape=circle&shadow=true&theme=green

Mobile Optimized

?mobile=true&theme=accent

Transparent Background

?transparent=true&theme=blue

Compact View (No Labels)

?showMonthLabels=false&showDayLabels=false&showLegend=false&padding=5

Custom Colors

?colors=ffe4e6,fecdd3,fb7185,e11d48,9f1239

Large Cells with Custom Styling

?cellSize=15&cellGap=4&borderWidth=2&radius=6

Tips & Best Practices

Use mobile=true for smaller screens (automatically sets smaller cell sizes and gaps)
Combine transparent=true with darkMode=true for flexible dark backgrounds
For README files, use the theme parameter to match your branding
Use shape=circle for a modern, rounded look
Combine multiple parameters: ?theme=purple&darkMode=true&shape=circle&shadow=true
For compact embeds, hide labels: showMonthLabels=false&showDayLabels=false&showLegend=false
Images are cached for 1 hour, so changes may take time to reflect

Available Themes

All themes support both light and dark modes via darkMode=true:

green - GitHub green (default)
accent - Blue accent theme
blue - Blue theme
purple - Purple theme
red - Red theme

Or create custom 5-color palettes with the colors parameter (5 hex codes representing intensity levels 0-4)

Built with Next.js 15, TypeScript, and Cheerio. Data fetched from GitHub contribution calendar.

Created by Anish Roy