# GitHub Isometric Contributions: an isometric pixel art view of your contribution graph

> A browser extension for Chrome, Brave, Firefox and Edge that swaps the flat GitHub contribution chart for an isometric pixel art rendering built with obelisk.js. It reads better as a visualisation than as a replacement for the standard graph.

**jasonlong/isometric-contributions** — Browser extension for rendering an isometric pixel art version of your GitHub contribution graph.

- Repository: https://github.com/jasonlong/isometric-contributions
- Stars: 3,696 · Forks: 175
- Language: JavaScript
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/jasonlong-isometric-contributions

## The contribution graph GitHub does not draw

GitHub's contribution chart is a grid of small squares. It answers one question well: did this day have contributions or not. It answers a second question badly: how much did the days differ. A day with two commits and a day with forty commits produce squares that are hard to tell apart at a glance. Isometric Contributions takes the same daily counts and extrudes each one into a bar on an isometric grid, so the height carries the number. The README is direct about the trade-off: the view "highlights the differences between the number of contributions with more granularity", but it "isn't meant to completely replace the standard 2D graph", because "in most ways it is actually less useful". That is an unusually honest framing from the author, and it should set expectations for anyone deciding whether to install it. The audience is narrow and specific: people who want to look at their own contribution history as an object rather than as data, and developers who want to read the source of a small extension that draws isometric graphics in a content script.

## How obelisk.js turns daily counts into a pixel skyline

The rendering is handled by obelisk.js, a library for isometric graphics on canvas. The extension does not invent its own projection. It maps the contribution grid onto an isometric plane and draws each day as a box whose height comes from the contribution count, which is why the result reads as a city skyline rather than as a chart. The extension is a toggle, not a replacement page: the README describes it as letting you "toggle between your regular GitHub contribution chart and an isometric pixel art version", so the standard graph stays one click away. The repository layout supports this reading of the architecture. The extension source lives in src/, the manifest is src/manifest.json, and Parcel builds through @parcel/config-webextension, which means the same source tree produces the Chrome, Edge and Firefox bundles. There is a separate safari/ directory and a dedicated build script for Safari, so Safari is treated as its own target rather than as a variant of the others. The README ships two preview images, one light and one dark, which implies the rendering accounts for GitHub's theme rather than drawing on a fixed background.

## Installing the extension and seeing the toggle for yourself

For everyday use, the README points at three store listings rather than at a build. Chrome and Brave users install from the Chrome Web Store, Firefox users from Mozilla Add-ons, and Edge users from the Microsoft Edge Add-ons site. After installation, open a GitHub profile page and use the extension's toggle to switch the contribution chart to the isometric view. The README does not document where the toggle control appears in the page, so treat the store listing screenshots as the reference for that.

If you want to modify the code rather than use the published build, the README gives a manual path. Clone or fork the repository, then load the src directory as an unpacked extension. Developer mode has to be checked on the Chrome extensions page first:

```bash
git clone https://github.com/jasonlong/isometric-contributions.git
cd isometric-contributions
```

On the Chrome Extensions page, enable Developer mode and click "Load unpacked extension...", then browse to the src directory of the clone. The README does not list a build step for that path, because the unpacked src directory is what gets loaded.

The package.json adds a watch-based development flow through Parcel, which is the route to take if you are changing the manifest or the bundled modules:

```bash
npm install
npm start
```

The start script runs parcel watch src/manifest.json --host localhost. Node 22 or newer is required, per the engines field. After changing files, the README says to return to the Extensions page and click the Reload link under the extension entry. The repository also exposes npm run build:chrome, build:edge, build:firefox, build:safari and build:all, plus npm test, which runs biome check followed by vitest run.

## What you give up: no axes, no tooltips, hidden bars

The README lists the limitations itself, and they are not cosmetic. There are no axis labels, so the height of a bar has no printed scale. Shorter bars can be hidden behind taller ones, which means a low-contribution day can disappear entirely depending on where it sits in the grid. You cannot hover over a bar to see the day and the count, so the isometric view cannot answer the question the standard graph answers on hover. Anyone who needs to read exact numbers, or who needs to point at a specific date, should stay on the standard chart. The second constraint is maintenance. The README carries a note in the contributing section stating that the author does not currently have plans for adding new features and asking contributors to make contact before submitting a PR with new functionality. The repository is not archived and the last push was on 2026-09-21, but the stated intent is that the surface area stays as it is. A fork exists for people who want more: isometric-contributions-plus is listed under Community Forks as an extended version with GitCode integration and additional features.

## How it differs from the standard graph and from the fork

The most direct alternative is the thing the extension toggles away from: GitHub's own contribution chart. The difference is not decoration. The standard graph encodes contribution count in colour intensity across a fixed grid, which keeps every day in the same place and lets you hover for the exact figure. The isometric view encodes count in bar height on a projected plane, which makes small differences in daily counts easier to see but costs you position stability and the hover readout. If your goal is to spot a change in your own habits over a month, the isometric view can surface it; if your goal is to check what you did on a specific Tuesday, the standard graph wins. The second alternative is the fork, isometric-contributions-plus. The README describes it as an extended version with GitCode integration and additional features, so the difference is scope: the upstream project is deliberately frozen in feature terms, while the fork adds integrations. Choosing between them is a question of whether you want the original rendered view alone or a version that pulls in another platform.

## Licence, upgrade cost and what the repository does not promise

The project is MIT licensed, which permits reuse and modification with the licence and copyright notice kept in place. That matters here because the README actively discourages new features upstream while the code stays open to forks, and the community fork listed in the README is the visible result of that arrangement. This is a description of the licence terms, not legal advice; check the LICENSE file in the repository for the exact wording. On upgrade cost, the repository is set up for repeatable releases rather than manual ones. package.json includes version:patch, version:minor and version:major scripts, per-browser submit scripts for Chrome, Edge and Firefox, a submit:dry-run variant, and a release script that chains build:all with submit:all. That is a heavier toolchain than the extension's size suggests, and it means a contributor needs Node 22 or newer and the Parcel, Biome, Vitest and Puppeteer dependencies installed before touching anything. The README does not document a rollback path for a published extension version, and it does not describe how the Safari build is submitted. If you plan to ship your own fork, that gap is worth resolving before you start.

## Conclusion

Adopt it if you want a second reading of your contribution history that shows small differences in daily counts more sharply than the flat chart, and you are fine with no axis labels, no hover tooltips and bars that can hide behind taller ones. Do not adopt it if you need an accurate, readable chart of contribution counts, or if you expect new features: the README states the author has no plans for adding features and asks contributors to make contact before submitting a PR with new functionality. Before installing, verify that the store listing for your browser is the one linked from the README, and check whether the fork isometric-contributions-plus covers anything you need.

## FAQ

### What is a GitHub contribution?

The extension does not define the term, but the README treats contributions as the daily counts behind the standard GitHub contribution chart, which the isometric view re-renders as bars whose height reflects the number for each day.

### How do you see your contributions on GitHub with the isometric view?

Install the extension from the Chrome Web Store, Mozilla Add-ons or the Microsoft Edge Add-ons site, open GitHub, and use the extension's toggle to switch between the regular contribution chart and the isometric pixel art version.

### Which browsers does the GitHub Isometric Contributions extension support?

The README gives installation links for Chrome and Brave via the Chrome Web Store, Firefox via Mozilla Add-ons, and Microsoft Edge via the Edge Add-ons site. The repository also contains a safari/ directory and a build:safari script.

### Can I hover over a bar in the isometric view to see the day and count?

No. The README states that you cannot hover over a bar to see the day and count, and it also notes that there are no axis labels and that shorter bars can be hidden behind taller ones.

### Can I load the GitHub Isometric Contributions extension from source?

Yes. The README says to clone or fork the repository, enable Developer mode on the Chrome Extensions page, click "Load unpacked extension..." and select the src directory. After edits, click the Reload link under the extension entry.

### Is the GitHub Isometric Contributions extension still getting new features?

The README states that the author does not currently have plans for adding new features and asks contributors to make contact before submitting a PR with new functionality. A community fork, isometric-contributions-plus, is listed for an extended version with GitCode integration.

## Sources

- [Issues](https://github.com/jasonlong/isometric-contributions/issues)
- [jasonlong/isometric-contributions on GitHub](https://github.com/jasonlong/isometric-contributions)
- [License: MIT](https://github.com/jasonlong/isometric-contributions/blob/main/LICENSE)
- [README](https://github.com/jasonlong/isometric-contributions/blob/main/README.md)
- [Releases](https://github.com/jasonlong/isometric-contributions/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/jasonlong-isometric-contributions
