---

Description

Visualise your GitHub commits in real time

"Have you ever wanted to see the work of your entire engineering organization in a visualization as it happens? With this GitHub visualiser, you can! Using GitHub webhooks and Ably's serverless websockets and built with Svelte, VisJS and Netlify serverless functions.

I chose to build the GitHub Visualizer with Svelte because of its simple approach to state management, readable syntax, small size and speed. The app consists of two Svelte components; one that subscribes to an Ably channel and keeps GitHub commit history stored as a variable in the application, and another that can render the GitHub commit history as a "force directed graph".

GitHub offers webhooks which allow integrations to subscribe to events on github.com. Triggering an event by, for example, pushing a commit, will send an HTTP POST payload to a URL configured in your GitHub account. Webhooks can be installed for an entire organization, or per repository, which means that I can get commit data in realtime over HTTP. The next task is setting up a hosting provider to accept the webhook data and provide a callback.

The GitHub Visualizer is hosted on Netlify. Their serverless functions can be bundled with a web application, and are version controlled, built and deployed along with the rest of the app. By binding a serverless function to the web application I could set up that function as the target of a GitHub webhook. Once the data arrives from GitHub I could publish it to the UI using Ably's pub/sub platform.

When a message arrives from Ably, it is pushed to the history variable. Svelte has built in support for reactive variable assignment, which means that when a new value is assigned to that variable, the change will be immediately reflected in the UI.

I used VisJS to graph the data. The VisJS "network component" was exactly what I needed to display a complex diagram of “nodes” and their connecting lines, called “edges”.

When a message arrives the Svelte code will:

• Get the currently displayed nodes
• Find any nodes from incoming messages that are in the data structure that haven't yet been rendered
• Add those nodes to the force directed graph
• Add new edges to the graph to join the added nodes
• Remove any nodes that aren't in the data structure any more"

---

Creator

Jo Franchetti
@thisisjofrank

---

• 
• 📊 Statistics