Git Line Count Visualizer

A dev tool that analyzes a git branch history and visualizes how the line counts of selected file types (e.g. *.js, *.scss) change over time, rendered as an interactive browser chart. Requires Node.js 20 or newer.

Install

Install as a dev dependency (recommended) and run it with npx:

npm install -D git-line-visualizer

A local install is recommended over a global one (npm i -g). The CLI command is gitline, a name other globally-installed packages might also use; installing locally keeps the command isolated to your project's node_modules/.bin and avoids any conflict.

Usage

Run it from the root of the target project (a git repository):

npx gitline

Your default browser opens automatically with the time-series chart.

Options

Option	Default	Description
--dir <path>	src	Directory to analyze
--branch <name>	detected (see below)	Branch to analyze
--ext <list>	js,scss	Comma-separated file extensions
--port <number>	4711	Local server port

When --branch is omitted, the branch is detected from the repository: the remote's default branch (origin/HEAD), else a local main or master, else whatever is currently checked out.

You can also configure these via the gitline field in the target project's package.json (CLI arguments take precedence):

{
  "gitline": {
    "dir": "src",
    "ext": "js,scss",
    "port": 4711
  }
}

Examples:

# Track TypeScript and CSS on the develop branch
npx gitline --ext ts,tsx,css --branch develop

# Analyze a different directory on a custom port
npx gitline --dir packages/web/src --port 5050

How it works

1. Load the .gitline-cache.json cache.
2. List commits via git log <branch>.
3. Analyze only newly-seen commits (incremental). Each batch of commits is read through a single git cat-file --batch call rather than one git process per file, and line counts are cached per blob SHA, so files unchanged between commits are counted only once. The cache accumulates across branches — switching from main to develop (and back) only analyzes commits not seen before. Changing the extension set recomputes per-commit totals, but the blob cache survives, so only files never seen before are read again.
4. Update the cache.
5. Start a local http server and open the browser.
6. Render the per-extension line-count chart with ECharts, served from the installed package so the chart works with no internet access.

The chart shows one line series per configured extension. Use zoom/scroll to navigate, and click a commit point to see its full hash, message, author, date, and per-extension line counts (with the delta vs. the previous commit) in the side panel. Navigate between commits with the left/right arrow keys, copy the full hash from the detail panel, switch between dark and light themes, and toggle alternating month background bands — all from the header. Theme and month-shading preferences are persisted to localStorage.

Add .gitline-cache.json to your .gitignore.