First Steps to Moving Beyond VSCode with cmux and lazygit: Pane Splitting and Git Visualization

Building a Development Environment with cmux Pane Splitting

In my previous article, I introduced how to set up cmux. In this installment, I will explain how to leverage cmux's native features combined with lazygit to complete the majority of your daily development tasks entirely within the terminal.

The layout we are aiming for is as follows:

┌──────────────────────┬──────────────────────┐
│                      │                      │
│    Claude Code       │    Browser           │
│    (Main work)       │    (localhost check) │
│                      │                      │
├──────────────────────┼──────────────────────┤
│                      │                      │
│    dev server        │    lazygit           │
│    (npm run dev)     │    (Diff/Commit)     │
│                      │                      │
└──────────────────────┴──────────────────────┘

Everything except for lazygit is a built-in cmux feature.

Preparation: Nerd Font

Nerd Font is required to display icons for terminal tools.

brew install --cask font-jetbrains-mono-nerd-font

Specify the font in the cmux (Ghostty) configuration file:

# ~/.config/ghostty/config
font-family = JetBrains Mono Nerd Font
font-size = 14

Restart cmux to apply the changes.

Basic Pane Splitting Operations

Operation	Shortcut
Split Right	⌘ D
Split Down	⌘ ⇧ D
Open Browser	⌘ ⇧ L
Move between panes	⌃ H / J / K / L
Close Pane	⌘ W

Pattern 1: Claude Code + Shell

Simply use ⌘ D to split right. This is the minimal configuration with Claude Code on the left and a shell for manual commands on the right.

Pattern 2: Claude Code + Browser

Use ⌘ ⇧ L to open the built-in browser. By displaying localhost:3000, you can complete the flow of changing code with Claude Code and instantly checking the result in the adjacent browser window—all within one window. While it lacks DevTools, it is sufficient for UI validation.

Pattern 3: 4-Pane Configuration

1. ⌘ D → Run npm run dev in the right pane.
2. In the left pane, ⌘ ⇧ D → Open browser or shell below.
3. In the right pane, ⌘ ⇧ D → Open lazygit below.

You can adjust pane boundaries by dragging with the mouse.

Visualizing Git Operations with lazygit

Claude Code can perform Git operations in addition to writing code. However, there are many situations where you want to visually confirm "what changed" before committing.

brew install lazygit

lazygit is a tool that allows you to see Git diffs, staging, and commits at a glance using a TUI.

Basic Keybindings

Key	Operation
Tab	Switch panels
Space	Stage / Unstage
c	Commit
Enter	Show diff
p / P	Pull / Push
q	Quit

Practical Flow

1. Instruct Claude Code to implement a feature.
2. Open lazygit in the adjacent pane to verify the changes.
3. Use Space to stage, c to commit, and P to push.

If you keep lazygit running, the diffs will update automatically every time Claude Code modifies files. This naturally fosters the habit of "having a human review the code written by AI before committing."

Automation with cmux CLI

Manually splitting panes every time is tedious. You can script it using the cmux CLI.

#!/bin/bash
# dev-layout.sh — Build development layout instantly
cmux new-pane --direction right
cmux send "npm run dev"
cmux send-key Enter

If you prepare scripts for each project, you can start your development day with a single command.

Summary

• Pane splitting: Build layouts with just shortcuts.
• Built-in browser: Verify UI without context switching.
• lazygit: Visualize Git diffs and operate with the keyboard.
• cmux CLI: Automate your layout.

With this configuration, most of your daily development can be completed within the terminal. If you need a file tree or a text editor, I plan to introduce a complete IDE configuration adding Yazi and Neovim in the next article.

This article is based on the detailed version of ZenChAIne. Please check that for the full version with screenshots.