A provider fetches history
GitHub REST, an HTTP v1 backend, or local Git — all normalized to the same typed DTOs.
providers/github · providers/http
Web Component · Zero framework dependencies
Git history, on any page.
One embeddable element that renders commit graphs from GitHub, your own backend, or a local repository — with the same UI everywhere.
npm i @web-git-graph/web
0framework dependencies
1custom element
3built-in providers
6read-only protocol endpoints
01Live demo
Try it live.
Search, switch refs, open commit details inline, or Ctrl/Cmd-click two commits to compare. Load any public GitHub repository.
Showing sample history from react/react (offline snapshot). Load a public repository for live data.
Share this graph
The fullscreen page reads the repository from its URL, so a link opens straight into that graph. Drop the badge into a README and readers reach it in one click.
Badge preview
02How it works
Swap the data. Keep the UI.
The component talks to one small provider interface. Change where the commits come from — the layout and interactions stay identical.
Lanes are computed deterministically
The same commits always produce the same graph, and lanes stay stable across pages.
O(V + E)
The element draws the graph
Virtualized rows in an accessible treegrid, themeable with CSS custom properties.
<web-git-graph>
Read-only by design
No checkout, merge, rebase, or reset is exposed. Git commands never pass through a shell.
Any framework
The same element works in plain HTML, React, Vue, Svelte, and Angular.
One shared contract
DTOs, JSON Schemas, and the OpenAPI document live in @web-git-graph/protocol.
03Get started
Install, register, connect.
Two lines of setup, then pick where the commits come from.
Install
npm i @web-git-graph/webRegister the element
import "@web-git-graph/web/register";
<web-git-graph id="history" />Connect a data source
Read public repositories straight from the browser — no server required.
import { GitHubGitGraphProvider } from "@web-git-graph/web/providers/github";
const graph = document.querySelector("#history");
graph.provider = new GitHubGitGraphProvider({
repository: "GIS-Info/web-git-graph"
});Serve history from your own infrastructure — any backend that implements the six read-only endpoints of the HTTP v1 protocol.
import { HttpGitGraphProvider } from "@web-git-graph/web/providers/http";
graph.provider = new HttpGitGraphProvider({
baseUrl: "https://git.example.com",
repositoryId: "app"
});One command serves a local repository over the same protocol. It binds to 127.0.0.1, and filesystem paths never reach the browser.
npx @web-git-graph/node serve --repo . \
--cors-origin http://127.0.0.1:4173graph.provider = new HttpGitGraphProvider({
baseUrl: "http://127.0.0.1:4174",
repositoryId: "local"
});HTTP v1
The protocol behind every backend
Six read-only JSON endpoints, a versioned media type, and a typed error model — documented with examples.
