Visual text comparison tool with word-level precision highlighting.
A clean, fast, client-side diff viewer for comparing text documents. Perfect for code review, document versioning, or spotting changes between any two text blocks.
Unlike basic line-by-line diff tools, Diff Viewer highlights exactly which words changed within modified lines:
- The quick brown fox jumps
+ The quick red fox leapsShows brown → red and jumps → leaps highlighted inline, not just the full lines in red/green.
Diff updates as you type. No "Compare" button needed. Instant visual feedback.
- No server uploads - All processing happens in your browser
- No tracking - Zero analytics, zero data collection
- No accounts - Just open and use
- Works offline - Save the HTML file, use anywhere
Uses the industry-standard jsdiff library (same algorithm as git diff) with a fallback for environments where the CDN is blocked.
- Open
index.htmlin any modern browser - Paste your original text in the left box
- Paste your modified text in the right box
- Visual diff appears automatically below
git clone https://github.com/clarkezyz/diff-viewer.git
cd diff-viewer
# Open index.html in your browserNo build process. No dependencies to install. Just open the file.
Compare versions of a function before/after refactoring:
// Original
function getUserData(id) {
return fetch('/api/users/' + id).then(r => r.json());
}
// Modified
async function getUserData(userId) {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}What Diff Viewer shows:
- Parameter renamed:
id→userId - Template literal instead of concatenation
async/awaitinstead of.then()
All highlighted at the word level, not just "line changed."
Track changes to contracts, specifications, or documentation:
Original: "Contractor shall deliver within 30 days"
Modified: "Contractor must deliver within 15 business days"Highlights:
shall→must(legal language strengthening)30 days→15 business days(timeline change)
Compare production vs. development config:
// Dev
{"timeout": 5000, "retries": 3, "debug": true}
// Prod
{"timeout": 30000, "retries": 5, "debug": false}See exactly which values changed without mental diffing.
Writers, editors, journalists comparing article drafts:
- See which sentences were added or removed
- Track word-level edits within paragraphs
- Verify copy edits didn't change meaning
- Line-Level Diff: Split both texts into lines, compare using Myers diff algorithm (via jsdiff)
- Modification Detection: When a line is removed AND a line is added consecutively, treat as modification
- Word-Level Diff: For modified lines, run word-level diff to show inline changes
- Rendering: Display with color coding:
- Green = Added content
- Red = Removed content
- Gray = Unchanged content
- Inline highlighting = Word-level changes
If the jsdiff CDN is unavailable (blocked, offline, etc.), Diff Viewer uses a simple line-by-line comparison. Less precise, but still functional.
- Real-time diffing - No lag on typical documents (< 10,000 lines)
- Client-side only - No network latency
- Lightweight - ~250 lines of JavaScript, ~200 lines of CSS
- jsdiff v5.1.0 (CDN) - Professional diff algorithm
- URL:
https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.1.0/diff.min.js - Fallback mode if unavailable
- URL:
- Google Fonts (Inter, JetBrains Mono) - Typography
- Can be replaced with local fonts for offline use
- Chrome/Edge - Full support
- Firefox - Full support
- Safari - Full support
- Mobile browsers - Works, but desktop recommended for side-by-side view
Requirements:
- ES6 JavaScript support (any browser from 2017+)
- No backend required
diff-viewer/
├── index.html # Main application
├── diff.js # Diff algorithm and logic
├── diff.css # Styling
└── README.md # This file
- Line-level only: Show full lines as changed, not which words
- Require uploads: Send your text to a server (privacy concern)
- Cluttered UI: Ads, tracking, complex interfaces
- No real-time: Need to click "Compare" button repeatedly
- Word-level precision: See exactly what changed
- No uploads: Everything in your browser
- Clean interface: Two text boxes, one result. That's it.
- Real-time: Updates as you type
Built for developers, writers, and anyone who needs to compare text quickly and privately.
- ❌ Upload your text to any server
- ❌ Store your text in cookies/localStorage (unless you save the page)
- ❌ Track your usage
- ❌ Collect analytics
- ❌ Show ads
- ❌ Require accounts or login
- ✅ Process everything locally in your browser
- ✅ Work completely offline (after first load)
- ✅ Let you save the HTML file and use it anywhere
- ✅ Use only one external CDN (jsdiff) with a fallback
For maximum privacy: Download the repo, host it locally, and replace the jsdiff CDN with a local copy.
- No build process - Open the HTML file, it works
- Vanilla JavaScript - No frameworks, no npm packages
- Progressive enhancement - Works without jsdiff (fallback mode)
- Responsive design - Mobile-friendly (though desktop is ideal)
- ES6 class-based architecture
- Inline comments for algorithm steps
- Clean separation: HTML structure, CSS styling, JS logic
- Professional diff algorithm with fallback
- Quick comparisons: No need to commit files or open an IDE
- Non-code text: Works on contracts, articles, documentation
- Visual interface: Easier to read than terminal output
- Shareable: Send someone the HTML file, they can use it instantly
Yes, but you'll need to copy/paste the code into the text boxes. This tool doesn't read files from disk (browser security limitation).
Alternative workflow:
cat file1.js | pbcopy # macOS - copy to clipboard
# Paste into left box
cat file2.js | pbcopy
# Paste into right boxYes, after the first load. The only external resource is the jsdiff CDN. If that's blocked, the fallback algorithm activates.
For 100% offline:
- Download jsdiff.min.js locally
- Change the script src in index.html to
<script src="jsdiff.min.js"></script> - Now it works with zero network access
Line-level diff:
- The quick brown fox
+ The quick red foxYou see two lines changed. You mentally parse which words are different.
Word-level diff:
- The quick brown fox
+ The quick red fox
(brown → red highlighted)You immediately see brown → red is the only change.
Practical limit: ~10,000 lines before performance degrades. For massive files (100k+ lines), use command-line tools like diff or git diff.
Why the limit: Real-time diffing on every keystroke requires fast processing. For huge files, disable real-time and add a "Compare" button.
Yes! MIT license. Use it however you want:
- Embed in your app
- Customize the UI
- Add features
- Remove features
Attribution appreciated but not required.
Contributions welcome! This project values:
- Simplicity - No complex build processes
- Privacy - No tracking, ever
- Performance - Fast diffing, real-time updates
- Accessibility - Clean, readable output
- Character-level diff mode (for tiny changes)
- Copy diff output to clipboard (formatted)
- Dark/light theme toggle
- Syntax highlighting for code
- File upload support (drag/drop)
- Diff statistics (lines added/removed/changed)
- Export diff as patch file
- Keyboard shortcuts (Ctrl+1/2 to focus text boxes)
MIT License - See LICENSE file for details
Free for personal and commercial use. Attribution appreciated but not required.
Built by Clarke Zyz - 2025
Because comparing text shouldn't require uploading your data to someone else's server.
- The excellent jsdiff library
- GitHub's diff viewer
- Developers debugging config file changes at 2am
- Writers tracking article edits
If Diff Viewer doesn't fit your needs, check out:
- command-line:
diff,git diff,vimdiff - web-based (server): diffchecker.com, text-compare.com
- IDE-integrated: VSCode diff, IntelliJ diff viewer
- advanced: Beyond Compare, WinMerge, Meld
Diff Viewer's niche: Quick, visual, private, client-side text comparison.
Diff Viewer - Because sometimes you just need to see what changed.
Compare • Highlight • Understand