dlvhdr/diffnav

---

dlvhdr/diffnav.json

{
  "createdAt": "2024-09-18T14:41:16Z",
  "defaultBranch": "main",
  "description": "A git diff pager based on delta but with a file tree, à la GitHub.",
  "fullName": "dlvhdr/diffnav",
  "homepage": "",
  "language": "Go",
  "name": "diffnav",
  "pushedAt": "2026-01-17T17:30:20Z",
  "stargazersCount": 589,
  "topics": [
    "cli",
    "delta",
    "diff",
    "git",
    "github",
    "golang",
    "tui"
  ],
  "updatedAt": "2026-01-19T07:49:03Z",
  "url": "https://github.com/dlvhdr/diffnav"
}

diffnav

A git diff pager based on delta but with a file tree, à la GitHub.

Demo

Installation

Homebrew:

brew install dlvhdr/formulae/diffnav

Go:

go install github.com/dlvhdr/diffnav@latest

[!NOTE] To get the icons to render properly you should download and install a Nerd font from https://www.nerdfonts.com/. Then, select that font as your font for the terminal.

You can install these with brew as well: brew install --cask font-<FONT NAME>-nerd-font

Usage

Pipe into diffnav

• git diff | diffnav
• gh pr diff https://github.com/dlvhdr/gh-dash/pull/447 | diffnav

Set up as global git diff pager

git config --global pager.diff diffnav

Flags

Flag	Description
--side-by-side, -s	Force side-by-side diff view
--unified, -u	Force unified diff view

Example:

git diff | diffnav --unified
git diff | diffnav -u

Configuration

The config file is searched in this order:

1. $DIFFNAV_CONFIG_DIR/config.yml (if env var is set)
2. $XDG_CONFIG_HOME/diffnav/config.yml (if set, macOS only)
3. ~/.config/diffnav/config.yml (macOS and Linux)
4. OS-specific config directory (e.g., ~/Library/Application Support/diffnav/config.yml on macOS)

Example config file:

ui:
  # Hide the header to get more screen space for diffs
  hideHeader: true

  # Hide the footer (keybindings help)
  hideFooter: true

  # Start with the file tree hidden (toggle with 'e')
  showFileTree: false

  # Customize the file tree width (default: 26)
  fileTreeWidth: 30

  # Customize the search panel width (default: 50)
  searchTreeWidth: 60

  # Icon style: "nerd-fonts" (default), "nerd-fonts-alt", "unicode", or "ascii"
  icons: nerd-fonts

  # Color filenames by git status (default: true)
  colorFileNames: false

  # Use side-by-side diff view (default: true, set false for unified)
  sideBySide: true

Option	Type	Default	Description
ui.hideHeader	bool	false	Hide the “DIFFNAV” header
ui.hideFooter	bool	false	Hide the footer with keybindings help
ui.showFileTree	bool	true	Show file tree on startup
ui.fileTreeWidth	int	26	Width of the file tree sidebar
ui.searchTreeWidth	int	50	Width of the search panel
ui.icons	string	nerd-fonts	Icon style: nerd-fonts, nerd-fonts-alt, unicode, or ascii
ui.colorFileNames	bool	true	Color filenames by git status
ui.sideBySide	bool	true	Use side-by-side diff view (false for unified)

Delta

You can also configure the diff rendering through delta. Check out their docs.

If you want the exact delta configuration I’m using - it can be found here.

Keys

Key	Description
j	Next file
k	Previous file
Ctrl-d	Scroll the diff down
Ctrl-u	Scroll the diff up
e	Toggle the file tree
t	Search/go-to file
y	Copy file path
i	Cycle icon style
o	Open file in $EDITOR
s	Toggle side-by-side/unified view
Tab	Switch focus between the panes
q	Quit

Under the hood

diffnav uses:

• Bubble Tea for the TUI
• delta for viewing the diffed file

Screenshots use:

• kitty for the terminal
• tokyonight for the color scheme
• CommitMono for the font