A lightweight, browser-based text comparison tool built using jsdiff.
It allows you to compare two pieces of text by characters, words, lines, or patches, with instant visual feedback and optional file upload support — all on the client side.
- 🔤 Character-level diff
- 🧩 Word-level diff
- 📄 Line-level diff
- 🧵 Patch (unified diff) view
- 📂 Upload
.txtfiles for comparison - ⚡ Live updates as you type or upload
- 🌐 Runs entirely in the browser (no backend required)
- HTML5
- CSS3
- Vanilla JavaScript
- jsdiff
Type or paste text into the two input boxes, or upload files, and instantly see what changed on the right.
Added text is highlighted
Removed text is struck through
text-diff-viewer/
├── index.html
├── style.css
├── diff.js
├── LICENSE
└── README.md
diff.jsis provided by the jsdiff library.
-
Clone the repository:
git clone https://github.com/Abhrankan-Chakrabarti/text-diff-viewer.git
-
Open
index.htmlin your browser.
That’s it — no build steps, no dependencies.
- Click Load File A to load the first text file
- Click Load File B to load the second text file
- The diff updates automatically
Supported formats:
.txt
| Mode | Description |
|---|---|
| Chars | Highlights differences character by character |
| Words | Compares text word by word |
| Lines | Compares text line by line |
| Patch | Shows a unified diff similar to git diff |
Works in all modern browsers:
- Chrome
- Firefox
- Edge
- Brave
(No special permissions required)
This project is licensed under the MIT License. See the LICENSE file for details.
- jsdiff by Kevin Decker
Abhrankan Chakrabarti GitHub: @Abhrankan-Chakrabarti
Pull requests are welcome. If you have ideas for improvements (drag & drop, syntax highlighting, dark mode), feel free to open an issue or PR.
- Drag & drop file support
- Syntax highlighting for code diffs
- Dark mode
- Support for more file types
- Side-by-side diff view
If you find this useful, consider giving the repo a ⭐