@buildninja/git-graph-svg

React component for rendering Git commit histories as SVG graphs. It draws commit nodes, parent connections, branches, and merges. The package exports GitGraph and the earlier GitGraphSVG component.

Examples

Use in a React application

The consuming application needs React 18 or later and react-dom 18 or later.

Install the package from npm:

npm install @buildninja/git-graph-svg

To test an unpublished change locally, build and pack this repository:

npm install
npm run build
npm pack

This creates a buildninja-git-graph-svg-<version>.tgz file. In the consuming application, install that file using its actual path:

npm install /path/to/buildninja-git-graph-svg-<version>.tgz

The package is published publicly under the @buildninja npm organization.

Basic example

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

const commits: ICommitItem[] = [
  {
    id: "b2",
    message: "Add feature",
    author: "Developer",
    date: "2026-02-18T10:30:12Z",
    parents: ["a1"],
  },
  {
    id: "a1",
    message: "Initial commit",
    author: "Developer",
    date: "2026-02-18T09:12:45Z",
    parents: [],
  },
];

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

Each commit needs a unique id, message, author, parseable date, and parents array. Parent IDs refer to other commits in the input; use an empty array for a root commit. The graph sorts commits by date from newest to oldest and adds layout data to each commit's optional meta field. It mutates the input array and commit objects, so pass a copy if the application needs to preserve the original data.

const graphCommits = commits.map((commit) => ({
  ...commit,
  parents: [...commit.parents],
  meta: commit.meta
    ? { ...commit.meta, prev: [...(commit.meta.prev ?? [])] }
    : undefined,
}));

<GitGraph commits={graphCommits} />;

Configuration

| Prop | Purpose | | --- | --- | | commits | Required array of ICommitItem records. | | colorPalette | Colors assigned to branches. | | padding | SVG padding as one number or { left, right, top, bottom }. | | rowHeight | Vertical spacing between commits. Default: 35. | | laneWidth | Horizontal spacing between branch lanes. Default: 35. | | style | CSS properties applied to the SVG element. | | renderNode | Custom node renderer: (x, y, color, commit) => ReactNode. | | renderEdge | Custom edge renderer: (from, to, path, color) => ReactNode. | | getMergeCurve | Custom SVG path segment for a merge. | | getBranchSplitCurve | Custom SVG path segment for a branch split. |

For example, customize nodes and edges:

<GitGraph
  commits={commits}
  rowHeight={40}
  colorPalette={["#3a86ff", "#8338ec", "#ff006e"]}
  renderNode={(x, y, color, commit) => (
    <circle key={commit.id} cx={x} cy={y} r={5} fill={color} />
  )}
  renderEdge={(from, to, path, color) => (
    <path
      key={`${from.id}-${to.id}`}
      d={path}
      stroke={color}
      strokeWidth={2}
      fill="none"
    />
  )}
/>

Work on this package

npm install
npm run dev

Run npm run build to generate the distributable files in dist, and npm run lint to check the source.

Repository

Source and issue tracking: BuildNinja-CICD/buildninja-git-graph-svg.