🔥 GitHub Streak / Customize

Embed Options

Loading...
Loading...

Usage Guide

This editor allows you to fully customize your GitHub Streak SVG by modifying the raw markup. The backend processes your template and dynamically substitutes placeholders with your live GitHub data.

Available Variables

Statistics & Theme
  • {{currentStreak}} - Current streak length
  • {{currentStreakDate}} - Current streak date range
  • {{personalBest}} - Longest streak length
  • {{personalBestDate}} - Longest streak date range
  • {{totalContribs}} - Total lifetime contributions
  • {{totalContribsDate}} - Total contribution date range
  • {{lastUpdated}} - Date the SVG was generated
  • {{theme.bg}}, {{theme.border}} - Theme background and border colors
  • {{theme.text}}, {{theme.textMuted}} - Theme primary and muted text
  • {{theme.accent}} - Theme accent color
Daily Activity & Visuals (0 to 29)
  • {{maxCount}} (or {{max}}) - Peak contribution count in period
  • {{heatStrip}} - Pre-rendered 7-day activity box strip
  • {{dayXCount}} - Contrib count for day X (0 is 29 days ago, 29 is today)
  • {{dayXLevel}} - Heat level 0 to 4 (based on intensity)
  • {{dayXColor}} - SVG fill color corresponding to heat level
  • {{dayXTextColor}} - High-contrast text color for count text
  • {{dayXLabel}} - Day of week initial (e.g. M, T, W)
  • {{dayXDate}} - Day date formatted as YYYY-MM-DD
  • {{dayAgoXCount}} - Relative days (dayAgo0Count is today, dayAgo1Count is yesterday)
  • {{dayAgoXColor}}, {{dayAgoXLevel}}, {{dayAgoXDate}} - Relative color, level, & date

How to Embed

Once you're happy with your design, copy the Markdown or HTML snippet from above and paste it into your README.md. Alternatively, keep your Custom URL safe. Whenever you paste that URL back into the browser bar above, it will instantly load your custom SVG back into the editor!

Having trouble with stale data or GitHub caching? Read our Caching Strategy & Refresh Guide

🤖

Connect via Model Context Protocol (MCP)

Connect your AI assistant (Claude Desktop, Cursor, VS Code, Windsurf, Roo Code, etc.) directly to GitHub Streak to generate and iterate on custom SVG templates using natural language.

MCP Server URL (SSE)
Configuration (Claude Desktop / Cursor / Continue)
{
  "mcpServers": {
    "github-streak": {
      "url": "https://github-streak.rahuldhole.com/mcp"
    }
  }
}
Provided MCP Tools
  • get_template_guide — Returns template variables, theme keys, and design guidelines for AI prompts.
  • generate_widget_url — Accepts a custom SVG template string and returns a live, compressed widget URL with interactive preview.