Back to Devoured - September 15, 2026
DEVOURED
Git-Based Visual Diffing, Made Easy (Website)

Git-Based Visual Diffing, Made Easy (Website)

Design devopswebgit Sidebranch
Sidebranch allows developers to switch between Git branches and visually compare UI changes in isolated environments without modifying their local working tree.
What: Sidebranch is a zero-dependency tool that spins up isolated dev servers for multiple branches simultaneously, enabling side-by-side visual diffing within the browser. It supports any framework that runs over HTTP and requires a simple .sidebranch.json configuration file to manage build processes.
Why it matters: This represents a shift toward more sophisticated, branch-aware local development workflows, moving beyond simple code-based diffing to visual testing of actual running components.
Takeaway: Run 'npx sidebranch init' in your repository to begin setting up side-by-side branch comparisons.
Deep dive
  • Isolates branch environments into separate dev servers.
  • Offers side-by-side, blend, and onion-skin diffing modes.
  • Framework-agnostic as long as the project exposes an HTTP port.
  • Implemented using only Node.js built-ins.
  • Includes a 'doctor' command to debug environment and daemon status.
  • Uses 'clean' to prune stale worktrees.
Decoder
  • Worktree: A Git feature that allows you to have multiple branches checked out in different directories simultaneously, preventing the need to stash or commit work to switch context.
Original article

Git-based visual diffing, made easy

Switch back and forth between branches and visually compare UI changes side by side — without ever touching your own working tree.

Features

In-page branch switching

Pick any branch from the pill and it builds in an isolated worktree on its own dev server.

Side-by-side diffs

Both panes live, plus blend and onion diff modes where UI changes are highlighted.

Framework agnostic

Next, Vite, Django, Rails, everything supported as long as it answers HTTP on a port.

Zero dependencies

The entire tool is Node builtins, with no external packages or dependencies.

Installation

Add the extension:

Install sidebranch from the Chrome Web Store (Chrome or Edge), then:

$ cd your-repo
$ npx sidebranch init     # writes a starter .sidebranch.json

Tell it how to run your app (.sidebranch.json):

{
  "dev": "npm run dev",        // start command, run inside each pane
  "install": "npm install",   // runs only when lockfiles change
  "copy": [".env", ".env.local"]
}

Start the daemon:

$ npx sidebranch start    # http://127.0.0.1:49400, loopback only

Then click the pill, pick a branch, and compare. Full configuration reference, recipes for complex apps, and more live in the README.

If you want to install the package yourself instead:

$ npm install --save-dev sidebranch

Then add the widget to your app, in dev builds only — gate it however your stack gates dev-only code:

<script src="http://localhost:49400/widget.js" defer></script>

Commands

Run these from the repo you are reviewing — sidebranch resolves the project from your working directory, exactly like git.

Check the environment, config, and daemon status:

$ npx sidebranch doctor

Stop the daemon and its pane dev servers:

$ npx sidebranch stop

Remove pane worktrees when you are done reviewing:

$ npx sidebranch clean              # all panes, with a prompt
$ npx sidebranch clean --pane a     # just pane A

Run on a different port:

$ npx sidebranch start --port 5000  # match it in the extension options
Explore all 47 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi