AN SVG RENDERER FOR REACT

History has a shape.

Turn commit relationships into a graph you can read at a glance. Repository Graph lays out branches, follows merges, and lets your interface decide how every node and edge looks.

Try the live demo Read the API

Open source · React 18+ · SVG output

history / feature-branch LIVE RENDER

Drawing commit history…

Input: commits + parentsOutput: readable paths

01 / EXPLORE THE GRAPHSCROLL TO TRACE THE STORY ↓

THE IDEA01 — 04

Git gives you the relationships. Give them form.

Commits are easy to list. Branches and merges are harder to understand in a plain table.

Repository Graph takes commit IDs and parent IDs, assigns lanes, and draws the connecting paths as SVG. It stays focused on the graph so you can place it inside a repository browser, a build dashboard, or whatever story your product needs to tell.

See the data contract

01Commit data inID, message, author, date, parents

→

02Lanes worked outBranches, merges, lane reuse

→

03SVG paths outStyle the final rendering

LIVE PLAYGROUND02 — 04

A LITTLE HISTORY, IN MOTION

Change the story.
Watch the lines follow.

Switch histories, palettes, and marks. The graph below is rendered by the actual GitGraph component, with sample commits created for this demo.

Loading the interactive graph…

WHAT THE ENGINE HANDLES03 — 04

Keep the logic.
Own the look.

The renderer makes the geometry predictable while leaving the visual language open. A few props can change spacing, colors, nodes, and edges without rewriting graph layout.

01 / STRUCTURE

Branches find their lanes

Follow a line through splits and merges. Active branches get lanes, and lanes can be reused when a branch ends.

02 / CONTROL

Render it your way

Supply a color palette or custom callbacks for nodes, edges, and curves. The output remains ordinary SVG.

03 / FIT

Bring your own interface

Add commit messages, badges, selection, or tooltips beside the graph. The package does not impose a full repository UI.

FROM THE SOURCE REPOSITORY

One history.
More than one style.

The project examples show the same lane and path logic rendered with different node and edge treatments. Custom drawing stays in React callbacks, close to the rest of your interface.

See a custom renderer

RENDERING STUDIESSVG / REACT

Two graph renderings from the Repository Graph source, one with dashed lines and outlined nodes, one with solid paths and nodes

Same commitsDifferent visual language

GET STARTED04 — 04

From package to picture.

Install the package, pass a commit array, and let GitGraph draw the history. The API page has the full short reference and a custom node example.

Open API docs View on npm

Terminal

# Add it to a React project
$ npm install git-graph-svg

# Render your commit history
<GitGraph commits={commits} />

The graph is the engine. Your app supplies the surrounding UI.