Text Diff

Description

The Text Diff Tool is a web-based application for comparing two text strings and highlighting their differences. Users can paste text into two input panels, with differences displayed in a third panel. A dropdown menu provides multiple comparison methods, allowing analysis at the character, word, line, and structural levels. The tool encodes the text strings as base64 in the URL, enabling users to share comparisons simply by copying and sharing the link.

Goals

Offer an intuitive, accessible tool for visually comparing two text strings.
Provide flexibility in comparison methods, enabling detailed analysis at different levels of granularity.
Enable easy sharing of comparisons through URL-based encoding, allowing users to collaborate on or review text differences remotely.

Challenges

Ensuring accurate and efficient difference detection across a range of comparison methods.
Encoding and decoding text strings reliably in the URL to support sharable, persistent comparisons without data loss or corruption.
Balancing usability and readability, particularly when displaying complex or dense differences in the third panel.

Resolutions

Developed a clean, three-panel layout to separate the two input texts and the differences clearly, improving readability and ease of use.
Implemented a dropdown menu for selecting various comparison methods, allowing users to customize their analysis based on specific needs.
Added URL encoding using base64 for the two input texts, making the tool shareable while preserving input data accurately. This feature allows users to create a portable link, facilitating collaboration and review without needing external tools.
Tech

HTML
CSS
JavaScript
Node.js
webpack