sidebranch

Product Introduction

1. Definition: Sidebranch is a developer tool and Chrome extension designed for visual regression testing and code review. It is a Git-based visual diffing tool that operates as a local daemon, enabling developers to compare live application states across different Git branches directly within their browser.
2. Core Value Proposition: It exists to streamline the frontend code review process by allowing developers to visually inspect and compare UI changes from pull requests in real-time, without disrupting their local development environment. This enhances the efficiency of visual testing and UI review workflows.

Main Features

1. In-page Branch Switching: The tool injects a widget (a "pill") into the running development application. From this widget, developers can select any Git branch. Sidebranch then automatically creates an isolated Git worktree for that branch, builds it on a separate local development server (on a unique port), and serves it. This allows for instant context switching between the main branch and feature branches.
2. Side-by-Side and Visual Diff Modes: It provides a multi-pane interface (labeled A and B) to view two branches simultaneously. Beyond simple side-by-side comparison, it offers advanced visual diffing modes like "blend" and "onion skin," which overlay the two UIs and highlight opacity-based differences, making subtle CSS or layout changes immediately apparent.
3. Framework-Agnostic & Zero-Dependency Architecture: Sidebranch works with any web development framework (Next.js, Vite, Django, Rails, etc.) as long as the dev server responds to HTTP. Its entire backend is built using Node.js built-in modules, requiring no external npm dependencies, which minimizes conflicts and simplifies installation.

Problems Solved

1. Pain Point: It addresses the cumbersome and error-prone process of manually switching Git branches, restarting dev servers, and visually comparing UI changes during code review. Traditional methods often lead to context loss, state contamination, or incomplete visual regression testing.
2. Target Audience: Primary users are frontend developers, UI/UX engineers, and full-stack developers working on web applications. It is particularly valuable for development teams practicing continuous integration/continuous deployment (CI/CD) who need efficient visual validation of pull requests. Quality Assurance (QA) engineers performing manual visual testing also benefit.
3. Use Cases: Essential for reviewing pull requests that involve CSS changes, component styling, layout shifts, or responsive design tweaks. It is also critical for conducting visual regression testing before merging features, enabling developers to catch unintended UI side effects introduced by new code.

Unique Advantages

1. Differentiation: Unlike cloud-based visual testing platforms (e.g., Percy, Chromatic), Sidebranch runs entirely locally (loopback-only), ensuring code privacy and faster execution without network latency. Compared to manually running multiple dev servers or using git stash, it provides an automated, integrated, and visual workflow.
2. Key Innovation: Its core innovation is the combination of isolated Git worktrees with parallel, on-demand development servers, controlled via a lightweight browser extension. The "zero-dependency" design using pure Node.js builtins is a significant technical differentiator that reduces toolchain complexity and potential version conflicts.

Frequently Asked Questions (FAQ)

1. Is Sidebranch a cloud service or a local tool? Sidebranch is a 100% local, loopback-only tool. All Git operations, worktree management, and development servers run on your local machine; no code or screenshots are sent to an external service, ensuring maximum privacy and security for proprietary codebases.
2. How does Sidebranch handle project dependencies and environment variables? It intelligently runs the install command (e.g., npm install) only when it detects changes in lockfiles (like package-lock.json). You can specify files to copy into each worktree pane (like .env) via the .sidebranch.json configuration file, ensuring each isolated environment has the correct configuration.
3. Can I use Sidebranch with a backend API or a monorepo? Yes, Sidebranch is framework-agnostic and can work with full-stack applications. For complex setups like monorepos or apps requiring a separate backend, you can configure custom start commands in .sidebranch.json to launch multiple services, ensuring both frontend and backend are running for each pane.
4. What happens to the worktrees created by Sidebranch? The tool creates temporary Git worktrees for the compared branches. You should run npx sidebranch clean to remove these worktrees once your review is complete, which helps manage disk space and keeps your repository tidy. The command can clean all panes or target a specific one (e.g., --pane a).
5. Does the Sidebranch extension work in browsers other than Chrome? The primary extension is distributed via the Chrome Web Store and is compatible with any Chromium-based browser, including Microsoft Edge, Brave, and Vivaldi. It is not currently available for Firefox or Safari.