Text Diff and Merge
Two versions in, one merged result out, conflicts and all.
AdvancedWeb appDev tool14–28hAI-buildable 3/5no setup
Implement a real diff algorithm and present it as a side-by-side comparison where you choose which side wins per hunk. Writing the longest-common-subsequence diff yourself rather than reaching for a library is the point of the exercise.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Two text panes with a computed line diff
- Added, removed and changed lines are visually distinct
- Changes group into hunks that can be accepted from either side
- A merged result pane updates as choices are made
- Word-level highlighting within changed lines
- The two panes scroll in sync
- Whitespace-only differences can be ignored
The interesting part
- Implementing LCS diff efficiently enough for large inputs
- Word-level diff nested inside line-level diff
- Synchronised scrolling when the two sides have different line counts
Once it works
- Add three-way merge with a common ancestor
- Add a unified diff view alongside side-by-side
- Export the result as a patch file
Suggested stack
reacttypescripttailwind