DiffLens

A fast, fully client-side code and text diff tool. Paste snippets or upload files, pick a view, and compare — nothing leaves your browser.

Live app → ananttripathi.github.io/code-differentiator

Built by Anant Tripathi · LinkedIn · GitHub · Kaggle · Hugging Face

---

Screenshots

Light mode

Dark mode

Char Diff view

---

Features

• Three diff views
  • Side by Side — classic two-column diff
  • Unified — single-column unified patch view
  • Char Diff — shows every line; changed characters highlighted inline
• Paste or upload — each pane has a paste tab and a drag-and-drop upload tab, independently
• Jupyter notebook support — .ipynb files are parsed into readable cell blocks before diffing
• Swap sides — one click to flip left ↔ right
• Live stats badge — shows +N / -N lines changed after each compare
• Dark / light mode — toggle in the header, zero flash
• Zero backend — runs entirely in the browser; no data is sent anywhere

---

Tech stack

Tool	Version	Purpose
React	18	UI
Vite	5	Build tool
diff (jsdiff)	5	Line & character diff engine
diff2html	3	Renders unified/side-by-side diff HTML

No CSS framework, no router, no state management library.

---

Local development

git clone https://github.com/ananttripathi/code-differentiator.git
cd code-differentiator
npm install
npm run dev

Open http://localhost:5173.

npm run build    # production build → dist/
npm run preview  # preview the production build locally

---

Deployment

The app auto-deploys to GitHub Pages on every push to main via GitHub Actions.

To enable on a fresh fork:
Repo → Settings → Pages → Build and deployment → Source → GitHub Actions

---

License

MIT