gitwall / docs Build your Gitwall

GitHub activity, in your colors

Make a Gitwall.
Make it yours.

Put a contribution graph on your website or an office screen. Start with a saved look, bring your team’s colors, and share a link or embed.

Public profile widgets work without an account or API key.

Get started

  1. Open the configurator and enter a GitHub username.
  2. Choose a 3, 6, or 12 month window and a saved look. The preview shows your changes.
  3. Copy the widget link for sharing, or copy the iframe to embed it on a website.

You can also build a widget directly from a URL. Replace octocat with your GitHub login:

https://gitwall.io/w?user=octocat&months=6&theme=tethered
Open this example ↗

Presets & shimmer

Saved looks restore the heatmap, streak palette, tint, direction, speed, and dispersion together. They keep your username, time window, title, and display toggles.

TetherEd twinkles

TetherEd heatmap with violet twinkles, 20% tint, and dispersed right-to-left movement.

Try this look

Ocean twinkles

TetherEd heatmap with blue and teal twinkles, 20% tint, and dispersed right-to-left movement.

Try this look

The streak palette controls change only the shimmer colors. Choose UltraCode violet, Match the theme, Ocean, Ember, or Custom colors. Custom exposes separate body, highlight, and spark colors.

Motion and tint settings
ControlRange / defaultWhat changes
Tint amountfxMix0–1
default 0.2
Lower values reveal more of the original heatmap. Higher values apply more streak color.
SpeedfxSpeed2–20
default 10
Calendar columns traveled per second. A smaller value moves more slowly.
DispersionfxSpread0–1
default 1
0 lines up the rows into a wave. 1 scatters the twinkles while keeping their travel direction.
DirectionfxDirectionrtl / ltr
default rtl
Right to left travels from today into the past. Left to right travels toward today.

The configurator displays tint and dispersion as percentages. In URLs and JSON, use decimals: 0.2 means 20%.

Choose your streak rule

Every day (the default) counts consecutive contribution days. 5 days a week counts consecutive Monday–Sunday weeks with contributions on any five distinct days. Two days off are fine; the days do not have to be weekdays. Counts use GitHub’s contribution calendar dates and the selected time window.

A week qualifies as soon as its fifth active day is recorded. Until the current week ends, it keeps an existing streak alive without adding a week to the count. A completed week with fewer than five active days breaks the streak when Monday starts. A large number of contributions on one day still counts as just one active day.

Choose the rule in the configurator, or set streakMode=weekly in a widget URL, snippet request, or team wall. Agents can use "streakMode": "weekly" in widget creation and updates, or request contribution summaries with that option. Use daily to restore daily streaks. Saved appearance presets keep your streak rule.

Shimmer starts at three consecutive days in daily mode, or the first qualifying week in weekly mode. It continues before today’s first contribution while the streak is active. Days off keep their normal heatmap colors. Reduced-motion preferences, the streak’s pause control, and fx=0 keep it still.

Your brand & design system

Under Heatmap colors → Brand color, choose a seed color and a dark or light background. You can also choose a logo image to extract color suggestions.

For a full palette, choose Design system, paste Gitwall JSON tokens, and click Import tokens. Expand Adjust individual colors to tune the background, text, accent, and five heatmap levels. Use Match the theme for the shimmer to follow your palette.

{
  "colors": {
    "brand": "#5627ff",
    "bg": "#040833",
    "text": "#f7f7fc",
    "textDim": "#9da3c4",
    "accent": "#ff4a87",
    "ramp": [
      "#0f1550",
      "#3e1cc5",
      "#5627ff",
      "#76aaff",
      "#41f8e1"
    ]
  },
  "fxPalette": "theme",
  "fxMix": 0.2,
  "fxDirection": "rtl",
  "fxSpeed": 10,
  "fxSpread": 1
}

The colors object accepts brand, bg, bgElev, line, text, textDim, accent, and ramp. Use six-digit RGB hex colors. The ramp needs exactly five colors, from no activity to the highest activity.

  • A brand color without a ramp generates a fresh palette in the configurator.
  • Other partial color imports keep the current colors you leave out. A color-only import keeps the shimmer settings.
  • Malformed known values reject the entire import and leave the preview unchanged. Unknown metadata is ignored.
  • Flat color JSON also works. Keep color keys either at the top level or inside colors.

Copy design tokens exports the current color snapshot and shimmer settings. Share it with another team or give it to an agent. This uses Gitwall’s JSON format; map tokens from another design tool to these keys first.

Embed & share

Try the live resizing demo ↗ — drag its width slider and watch the iframe’s height follow.

The configurator offers a widget link, an edit link, and iframe snippets. A widget link opens the finished wall. An edit link opens the same settings in the configurator. For a URL widget, replace /w? with /? and keep the query string to make an edit link yourself.

<iframe src="https://gitwall.io/w?user=octocat&months=6&theme=tethered" width="100%" height="405" style="border:0;overflow:hidden" title="GitHub contributions for @octocat"></iframe>

Paste the iframe into a page that allows custom HTML embeds. Use the configurator’s auto-resizing snippet when the available width changes. On narrow screens, a 12 month graph scrolls to keep cells legible; try 3 or 6 months for a smaller embed.

Want to restyle an embed later?

A URL widget stores its settings in the URL. To change it, update the embedded URL. Save as hosted widget stores the configuration on your account and gives you a stable /w/{id} address. Sign in to save and manage hosted widgets.

Teams & office TVs

The configurator’s Team leaderboard accepts up to 50 comma-separated GitHub usernames. It uses the heatmap colors you selected above. Add up to 20 optional public repositories for lines added and removed from GitHub’s contributor statistics.

https://gitwall.io/team?users=octocat,torvalds&months=6&theme=tethered

For a wall display, enable TV mode or add tv=1 to your widget URL.

An organization wall requires a GitHub App configured by the deployment owner. Start with GitHub App setup; if it shows creation steps, the deployment owner must finish the server configuration before anyone can install the app. Once configured, the setup page offers installation for an organization administrator.

The resulting signed /t?k=… link can show the aggregate wall, leaderboard, and projects. Add mode=celebrate to hide rankings or tv=1 to rotate the views. Public profile widgets and team leaderboards work without this setup.

Organization wall links grant access to their wall. Share them only with the intended audience; keep their k token out of public examples and feedback.

Organization data coverage

The organization wall scans up to 60 recently pushed, non-archived repositories, with up to 500 commits and 300 closed pull requests per repository in the selected window. Results are cached for an hour. These limits can make its totals differ from GitHub’s profile graph.

Agents & API

Give an agent your GitHub username and brand tokens. It can discover the available looks and return an embed without an API key.

  1. Read GET /api/v1/appearance for current presets, palettes, supported ranges, and example payloads.
  2. Request GET /api/v1/widget/snippet with a username and the desired settings.
  3. Use the returned url, iframe, or iframeAutoResize. To offer an edit link, replace /w? in the returned URL with /?, keeping all its parameters.
https://gitwall.io/api/v1/widget/snippet?user=octocat&months=6&theme=tethered&fxPalette=ocean&width=800

URL requests use flat query parameters. For colors, omit the # or encode it as %23; pass a ramp as five comma-separated hex values. JSON and MCP accept a nested colors object.

Connect an MCP client

Use https://gitwall.io/mcp as a Streamable HTTP server. Call get_appearance, then get_snippet with arguments like these:

{
  "user": "octocat",
  "months": 6,
  "theme": "tethered",
  "fx": true,
  "fxPalette": "ultracode",
  "fxMix": 0.2,
  "fxDirection": "rtl",
  "fxSpeed": 10,
  "fxSpread": 1
}

To create or update hosted widgets, create an API key in your dashboard and send it in the Authorization: Bearer YOUR_API_KEY header. MCP provides create_widget, list_widgets, and update_widget. REST uses POST /api/v1/widgets and PATCH /api/v1/widgets/{id}.

Restore a saved look on a hosted widget

Discovery returns presets[].config for creation and presets[].patch for updates. The update patch clears old heatmap and custom streak colors, while keeping content settings. For MCP update_widget, add the widget ID:

{
  "id": "YOUR_WIDGET_ID",
  "theme": "tethered",
  "fx": true,
  "fxPalette": "ocean",
  "fxMix": 0.2,
  "fxDirection": "rtl",
  "fxSpeed": 10,
  "fxSpread": 1,
  "colors": null,
  "fxColor": null,
  "fxGlint": null,
  "fxSpark": null
}

For REST, use the widget ID in the request path and send the patch fields as JSON. Omitted fields preserve saved values; partial nested colors merge key by key. A color-only palette patch clears custom streak overrides and keeps your heatmap and motion. Recipe IDs are discovery labels; use their settings in URLs and payloads.

See the complete agent guide and OpenAPI specification for all endpoints, tools, and account requirements.

Troubleshooting

The shimmer is still
Check that the current streak is at least three days (daily rule) or one qualifying week (5 days a week rule), shimmer is enabled, and the streak label is not paused. The graph respects your device’s reduced-motion setting.
The colors look too similar
Lower Tint amount to reveal more of the heatmap ramp. Select Match the theme or adjust the five heatmap levels under Design system.
A custom palette is hiding a preset
Restore a Saved look in the configurator. Agents should apply the discovered preset’s complete patch; changing only fxPalette on a saved widget preserves existing color overrides.
Today’s contributions have not appeared
Contribution data is cached for up to an hour. Check the username and the activity visible on that GitHub profile. Signing in to Gitwall does not automatically connect personal private activity.
The embed is blank or clipped
Open the widget URL directly, confirm the host allows iframes, and use the auto-resizing snippet. Copy the generated snippet as provided.