A modern, web-based tool to visually compare two code files side-by-side. Built with Next.js and Monaco Editor for a fast and professional experience.
- 📂 File Upload: Easily upload two files via drag-and-drop or file selection.
↔️ Side-by-Side & Inline Views: Toggle between a split view and a unified inline view to inspect differences.- 🎨 Syntax Highlighting: Automatic language detection with manual override for beautiful and accurate code rendering.
- 🌗 Light & Dark Modes: Switch between themes for your viewing comfort.
- 🔍 Diff Navigation: Quickly jump between changes with next/previous buttons.
- 📊 Diff Statistics: Get an instant summary of additions and deletions.
↔️ Swap Files: Instantly swap the original and changed files with a single click.- 🖥️ Fullscreen Mode: Immerse yourself in the code with a distraction-free fullscreen view.
- Framework: Next.js (React)
- Styling: Tailwind CSS
- UI Components: ShadCN UI
- Code Editor: Monaco Editor (The editor that powers VS Code)
- Language: TypeScript
- Icons: Lucide React
To get a local copy up and running, follow these simple steps.
- Node.js (v18 or later)
- npm
- Clone the repository:
git clone https://github.com/Chandu4143/codediffer
- Navigate to the project directory:
cd codediffer - Install NPM packages:
npm install
- Run the development server:
npm run dev
- Open http://localhost:9002 with your browser to see the result.