Git Line Count Visualizer

A zero-dependency 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.

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> | master | Branch to analyze | | --ext <list> | js,scss | Comma-separated file extensions | | --port <number> | 4711 | Local server port |

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

{
  "gitline": {
    "dir": "src",
    "branch": "master",
    "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). Line counts are cached per blob SHA, so files unchanged between commits are counted only once. The cache accumulates across branches — switching from master to develop (and back) only analyzes commits not seen before. Changing the extension set invalidates the cache and triggers a full re-analysis.
4. Update the cache.
5. Start a local http server and open the browser.
6. Render the per-extension line-count chart with ECharts (loaded from CDN).

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.