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

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

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

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