sidebranch
A Git-based visual tool for comparing branch UIs side by side in isolated worktrees
About sidebranch
sidebranch is a Git-based visual diff tool. Choose any branch on the page, and it builds a development server for that branch in an isolated worktree; then view the interfaces side by side in two live panes or highlight UI changes with blend and onion diff modes. It is framework agnostic: apps such as Next, Vite, Django, and Rails can use it as long as they respond to HTTP through a port. The tool uses Node built-ins and has no external package dependencies; for a local install, use npm install --save-dev sidebranch and add widget to the development build.
Best for
Best use cases
Switch between Git branches and compare their UIs
Inspect differences between two live interfaces side by side
Highlight interface changes with blend or onion mode
Run a branch development server in an isolated worktree
Features
In-page branch switching
Choose a branch on the page and start its development server in an isolated worktree.
Side-by-side diff viewing
Keep both panes live and use blend or onion mode to highlight UI changes.
Framework agnostic
Works with Next, Vite, Django, Rails, and other apps as long as they respond to HTTP through a port.
Zero external dependencies
The tool is built entirely with Node built-ins and has no external package dependencies.
Pros
- Supports many frameworks and HTTP apps
- Offers side-by-side, blend, and onion diff views
- Does not touch the current worktree
- Requires no external package dependencies
Cons
- The app must respond to HTTP on a port