GIT-GRAPH-SVG / REFERENCE

A small API for complex histories.

Bring commit data. The renderer handles lanes and paths. Use the callbacks when your product needs its own visual language.

01 / START

Install & render

Use the package in a React 18+ app. The main component is GitGraph.

npm install git-graph-svg

import { GitGraph, type ICommitItem } from "git-graph-svg";

const commits: ICommitItem[] = [
  { id: "c2", message: "Add search", author: "Akshay",
    date: "2026-02-18T10:30:12", parents: ["c1"] },
  { id: "c1", message: "Initial commit", author: "Akshay",
    date: "2026-02-18T09:12:45", parents: [] },
];

export function History() {
  return <GitGraph commits={commits} />;
}

The package renders the graph SVG. Add message rows, badges, selection, or other interface elements around it in your app.

02 / DATA

Commit model

interface ICommitItem {
  id: string;
  message: string;
  author: string;
  date: string;
  parents: string[];
  meta?: any;
}

parents contains the IDs of earlier commits. A merge commit can have more than one parent. Use parseable date strings; the current renderer sorts commits newest first.

03 / OPTIONS

Component props

Prop	What it changes
`commits`	Required array of `ICommitItem`.
`colorPalette`	Colors assigned to branch lines and nodes.
`rowHeight`, `laneWidth`	Vertical commit spacing and horizontal lane spacing. Both default to `35`.
`padding`	A number for every side, or `{ left, right, top, bottom }`. Default is `25`.
`style`	CSS styles applied to the root SVG.
`renderNode`	React node for `(x, y, color, commit)`.
`renderEdge`	React node for `(from, to, path, color)`.
`getMergeCurve`, `getBranchSplitCurve`	Optional curve path functions receiving `(x1, y1, x2, y2)`.

04 / VISUALS

Customize a mark or line

The callback result is rendered inside the SVG. Return SVG elements such as g, circle, and path.

<GitGraph
  commits={commits}
  colorPalette={["#6d5efc", "#f46b7c", "#4cc7ad"]}
  rowHeight={42}
  laneWidth={32}
  renderNode={(x, y, color, commit) => (
    <g key={commit.id}>
      <circle cx={x} cy={y} r={6} fill="#fff"
        stroke={color} strokeWidth={3} />
      <title>{commit.message}</title>
    </g>
  )}
  renderEdge={(from, to, path, color) => (
    <path key={`${from.id}-${to.id}`} d={path}
      stroke={color} strokeWidth={2} strokeDasharray="5 4"
      fill="none" />
  )}
/>

05 / GOOD TO KNOW

A few notes

The current implementation sorts the supplied commits array and adds layout data to meta. Pass a clone when your original objects must remain unchanged.
GitGraph is the current component used here. The package also exports the older GitGraphSVG API.
The graph is SVG, and the package does not provide a full repository browser around it.

More in the source

Read the repository README for additional examples and implementation details.

GitHub repository ↗npm package ↗