Embed Options
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
{{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
{{heatStrip}}- Renders default 7-day activity boxes{{lastUpdated}}- Date the SVG was generated{{dayXCount}}- Contrib count for day X (0-6){{dayXLevel}}- Heat level for day X (0-4){{dayXLabel}}- Day of week label (e.g. Mon)
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.
{
"mcpServers": {
"github-streak": {
"url": "https://github-streak.rahuldhole.com/mcp"
}
}
}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.