Text Diff and Merge Tool with Side-by-Side View

Comparing two versions of a file is a daily task in software work: reviewing a pull request, auditing a config change before deployment, or reconciling two edited copies of a document. Plain text editors cannot show what changed between versions, and while command-line diff exists, its output is hard to read for students and its merge workflows are intimidating. This project builds a visual diff and merge tool that runs entirely in the browser: paste two texts (or load the included sample pairs — a Python service config across two releases, an nginx staging-vs-production config, or a changelog), and the tool computes a line-level diff with word-level highlighting of exactly which tokens changed. A split side-by-side view aligns both versions row by row; a unified view shows a single-column +/- listing with collapsible unchanged regions. Each changed block becomes a merge card where you keep the original, keep the revised, or take both, and the merged preview updates live. The whole tool is one self-contained HTML file with no server, so it runs offline and demonstrates a complete string-algorithms application.

1. You paste the original text into the left editor and the revised text into the right editor (or pick one of the three sample pairs); the diff recomputes live as you type.
2. The engine runs a line-level longest-common-subsequence comparison on the two line arrays (with optional whitespace/case normalization) and groups the result into equal runs and changed blocks.
3. For each changed block, a word-level comparison on paired lines marks exactly which tokens were added, removed or altered, rendered as inline highlights.
4. In split view the block's lines are row-aligned (the shorter side padded with blanks); in unified view the block is shown as -/+ lines with an @@ header and long unchanged runs collapsed behind a click-to-expand gap row.
5. Switching to the merge tab turns every changed block into a conflict card; clicking keep-original / keep-revised / take-both records the resolution for that block.
6. The merged output is assembled from unchanged lines plus each block's chosen content (unresolved blocks get standard conflict markers) and can be copied or downloaded.

Tech stack:

• HTML5, CSS3 (single-file app, no build step)
• Vanilla JavaScript (diff engine, merge state, live rendering)
• LCS-based line diff with word/token-level refinement
• Browser Clipboard API + Blob download (result export)
• Chromium/any modern browser (runs fully offline)

• [Split side-by-side diff view] The two versions are shown in aligned columns with per-line numbering, changed blocks grouped with headers, and word-level highlighting so you see exactly which tokens differ inside a modified line.
• [Unified +/- view] A single-column diff with -/+ markers and @@ block headers, collapsible unchanged regions with adjustable context lines (3, 5, 10 or all), and the same word-level highlighting.
• [Block-by-block merge] Every changed block becomes a conflict card with three resolution actions — keep original, keep revised, or take both — and a badge showing whether the block is resolved.
• [Live merged-output preview] The merged result recomputes on every resolution; unresolved blocks render with standard <<<<<<</=======/>>>>>>> conflict markers, and the result can be copied to the clipboard or downloaded as a .txt file.
• [Compare options] Ignore-whitespace and ignore-case modes change the comparison semantics, useful for diffing reformatted code or case-insensitive text.
• [Live diff statistics] Additions, deletions, unchanged lines and changed-block counts update as you type, giving an instant summary of how much actually changed.
• [Three realistic sample pairs] Preloaded comparisons — a Python service config across two releases, an nginx staging-vs-production config, and a changelog — so the tool is demonstrable in seconds.
• [Fully offline single file] The entire app, including the diff engine and UI, is one HTML file with no backend and no build step — it opens in any modern browser.

• Single-file diff and merge web app (DiffLens) with all three views
• Diff engine source (line LCS + word-level highlighting) with comments
• Three realistic sample file pairs for demonstration
• Project report PDF (background, diff-algorithm explanation, methodology, usage guide)
• PPT presentation for final review
• Viva Q&A preparation document (diff algorithms, LCS complexity, merge strategies, conflict markers)

• The comparison is text-based: it diffs lines and words, not syntax trees, so moved code blocks appear as delete+insert rather than "moved".
• Very large files (tens of thousands of lines) will feel slow because the LCS table is O(n*m) memory — the tool is designed for config/code files of a few hundred lines, typical of student use.
• Three-way merge (common ancestor + two branches) is out of scope; the tool merges two versions pairwise.
• Merge resolution is manual per block — there is no automatic conflict resolution or AI suggestion.
• The app compares text only; binary files, images and formatted documents are not supported.