I Built a Local Git GUI With Next.js — Meet Git Browse
Part 1 of 4: What it is, why I built it, and a tour of the three-panel layout.
Every developer has a git workflow. Mine kept bouncing between three tools: the terminal for commands, an IDE for diffs, and the GitHub website for comparing branches. Each context switch is small, but they add up — especially during code reviews and release days.
So I built Git Browse: a local git repository browser that runs entirely on your machine. No accounts, no cloud, no sending your code anywhere. Point it at any folder on disk and it gives you a fast, keyboard-friendly UI over the repos you already have.
What it does
Git Browse is a Next.js app that talks to the git binary on your machine through a thin API layer. The feature list has grown into a fairly complete daily driver:
- Browse commit history as a visual graph, with expandable file lists per commit
- Stage, commit, and push without leaving the UI
- Branch management — create, checkout, merge, rebase (including interactive rebase), delete
- Stash support — push, apply, pop, drop
- Tags — create and push tags from the Branches tab
- Compare anything — branches, tags, commits, two folders on disk, two files, or even two clipboard snippets
- Search — grep file contents or find files by name across any directory
- Clone repositories with a built-in directory picker
- Ahead/behind indicators so you always know when to pull or push
The layout: three panels, all collapsible
The main screen is a classic three-panel layout, and every panel earns its place:
Explorer (left). A file browser for your disk. Folders that are git repositories get a GIT badge; click one to load it. You can pin folders you use often — they stay at the top across sessions. The panel collapses with E when you want more room.
Repository (middle). The heart of the app, with tabs for Log, Changes, Branches, and Stash. The Log tab renders the commit graph; Changes shows your working tree with per-file staging; Branches lists local and remote branches with divergence indicators; Stash lists your stashed work.
Get Lijo Jose’s stories in your inbox
Join Medium for free to get updates from this writer.
Diff (right). Click any file or commit anywhere in the app and its diff appears here — unified or side-by-side, with word wrap on demand. Toggle it with D.
Built for the keyboard
Everything important has a key:
KeyAction⌘K / Ctrl+KCommand palette — every action, searchableL / C / BLog, Changes, Branches tabsU / PPull / PushTCreate a tagE / DToggle Explorer / Diff panelRRefresh the repository
The command palette deserves its own mention (and gets one in Part 4): press ⌘K anywhere and type what you want — "pull", "create tag", "theme", or the name of a recent repo. It's the feature that ties the whole app together.
The stack
For the curious:
- Next.js (App Router) with API route handlers as the bridge to git
- simple-git plus raw
gitcommands for the plumbing - Tailwind CSS with CSS variables for theming — four themes including light and three dark variants
- No database — state lives in your git repos and a little localStorage
Because the server component runs locally, the API can do things a hosted tool never could: browse your filesystem, run git rev-list against any repo, clone into any directory. That's the entire trick — it's a web UI with local superpowers.
Getting started
git clone https://github.com/lijo-jose/git-browse
cd git-browse
npm install
npm run devOpen http://localhost:3000, click a folder with a GIT badge, and you're browsing.
Next up — Part 2: a day of real git work inside Git Browse: committing, branching, rebasing, stashing, and the ahead/behind indicators that tell you when to sync.
More details, screenshots, and release notes on
