I built a browser-based document diff tool — here's how and why

이재한 — Wed, 04 Feb 2026 13:43:51 +0000

The Problem
Developers have git diff. But what about everyone else?
I watched coworkers compare two versions of a report by opening them side by side and reading line by line. Word's Track Changes? Too clunky. Online diff tools? Most charge for PDF support or require uploading files to their servers.
So I built Diffnote — a free, browser-based document comparison tool.
What it does

Compare TXT, PDF, and DOCX files
Line, word, and character-level diff
Side-by-side and unified view modes
Color-coded highlights for additions, deletions, and modifications
No signup, no installation

The key decision: 100% client-side processing
Every file is parsed and compared entirely in the browser. Nothing ever hits a server. This was a deliberate choice for both privacy and cost efficiency.

PDF parsing: pdf.js
DOCX parsing: mammoth.js
Diff engine: Google's diff-match-patch

The tradeoff is performance on large files — planning to implement Web Workers to handle heavy PDFs without freezing the UI.
Tech Stack

Next.js 15 (App Router)
TypeScript
Tailwind CSS + shadcn/ui
Zustand for state management
Deployed on Vercel

What's next

Share links (Vercel KV)
Dark mode
Export results as HTML/PDF
3-Way Merge for premium tier

I'd love to hear your thoughts and feedback!
🔗 Try Diffnote
🚀 Support on Product Hunt

DEV Community: 이재한

I built a browser-based document diff tool — here's how and why