Git Branch Visualizer

<GitBranchVisualizer variant="minimal" />Clean surfaces and measured motion.

Installation

Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion, plus the Ovio theme, world, motion, keys, format, toy, auto-height items.

npx shadcn add JanaSundar/ovio/git-branch-visualizer

↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.

Usage

Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.

TSXvariant="minimal"

import { GitBranchVisualizer } from "@/components/ovio/git-branch-visualizer/git-branch-visualizer"

<GitBranchVisualizer
  variant="minimal"
  commits={commits}
  head="main"
/>

Built with: SVG · Motion for React
Motion in Minimal: Small springs, opacity and layout shifts that show state.

Data

Fetch it on the server with getCommitGraph("owner/name", { limit }) and pass the result as props. The helper is lib/github.ts, added with the CLI.

npx shadcn add JanaSundar/ovio/github

Source	GitHub's GraphQL API: the default branch's last 100 commits with their parents. The newest merges are kept with every commit their branch brought in, up to limit (14); commits pushed straight to the default branch between them are skipped so the branches fit. Merged branches keep the name their merge commit records.
Auth	Required. GraphQL rejects anonymous requests; any GITHUB_TOKEN works.
Limits	One query per refresh, against 5,000 points an hour per token.
Caching	Cached for an hour by default (revalidate: 3600), so traffic adds no API calls. A failed refresh keeps serving the last good data, and a spent limit throws RateLimitError with the time it resets.
This demo	Live data from JanaSundar/ovio, through the same helper. If the API fails, the sample shows instead.

Props

Control the data, selected world, animation behavior, and callbacks.

Prop	Type	Description
commits	{ id; branch; message; author; date; parents?; tag? }[]	History, oldest first. Two parents make a merge; tag draws a release label.
variant	\| "minimal" \| "craft" \| "retro" \| "toy"	Which world to render. Defaults to the nearest OvioProvider, then minimal.
head	string	Checked-out branch. Defaults to the first commit's branch.
repo	string	Header label, e.g. "ada-dev/lumen".
value / defaultValue	string	Selected commit id, controlled or not. Defaults to the newest.
onValueChange	(id: string, commit) => void	Fires when the selected commit changes.
actions	boolean	Shows Merge, Branch from and Reset, played out locally. Default true.
onMerge	(commit) => void	Fires with the merge commit.
onBranch	(branch: string, from) => void	Fires with the new branch and the commit it starts from.
className	string	Merged onto the root.