What this Text Diff tool compares
Text Diff Checker compares two pasted strings: Original text and Changed text. Both start empty. There is no file input. Comparison is line-based and positional: after splitLines, line 1 of the left panel is tested against line 1 of the right panel, line 2 against line 2, and so on through the longer side.
The page is not a Git client, merge tool, or language-aware reviewer. A “JSON change” example exists, but compareLines does not parse JSON. It compares the example as plain lines.
How its actual matching model works
splitLines replaces CRLF (\r\n) with LF, then splits on \n. Lone \r is not treated as a line break. compareLines takes max(leftLines.length, rightLines.length) and, for each index i, reads leftLines[i] ?? "" and rightLines[i] ?? "".
- If i is past the end of the left array, the row is added (extra right-hand lines, typically at the end).
- Else if i is past the end of the right array, the row is removed (extra left-hand lines).
- Else if left !== right (JavaScript string inequality, including spaces and case), the row is changed.
- Else the row is unchanged.
There is no longest-common-subsequence, Myers diff, word split, or character-level edit distance. Matching is only this equal-index loop.
What added, removed, changed, and unchanged output means
- Added
- Index exists only on the right (i >= leftLines.length). Side-by-side uses emerald; unified shows “+ ” plus the right line.
- Removed
- Index exists only on the left. Side-by-side uses red; unified shows “− ” plus the left line.
- Changed
- Both sides have a line at i and the strings differ. Side-by-side uses amber on both cells. Unified prints − left then + right. The whole line is marked; there is no inner highlight.
- Unchanged
- Same index, identical strings. Side-by-side keeps a white row. Unified hides these rows. If every row is unchanged, unified shows “No differences found.”
Line numbers are i + 1 on both columns—the padded index, not independent original/new file numbers. Empty cells render a space so the row still has height. Sidebar “Added/Removed/Changed” match those classifications; “Original lines” and “Changed lines” are the two panels’ split line counts.
How line order, inserted lines, whitespace, blank lines, and line endings affect results
Because pairing is by index, inserting or deleting a line in the middle usually marks later lines changed even when the content only shifted. Reordering two lines looks like two changed rows, not a detected move. Extra lines at the end are the added/removed cases.
- Whitespace and case: compared as-is. Leading/trailing spaces make a line changed. There is no ignore-whitespace or case-insensitive option.
- Blank lines: "" versus "" is unchanged; "" versus text is changed. A trailing newline adds an extra empty line after split.
- CRLF vs LF: CRLF is normalized to LF before split, so that pair alone should not differ. Lone CR stays inside the line string and can make lines unequal.
- handleCompare requires both trim() values to be non-empty, but it does not trim the lines it then stores for compareLines.
How to use the real controls
- Paste into Original text. The counter under the box uses splitLines for line count and text.length for characters (empty input shows 0 lines · 0 characters).
- Paste into Changed text. The right counter uses the same line and character rules.
- Click Compare text. The button is not disabled when a panel is empty; empty trim() sets the amber “Paste text in both boxes to compare.” message and hasCompared false.
- Click Side by side (default) or Unified after Comparison result appears. That switch only changes rendering of the current stored rows.
- Click Load example to fill JSON change (EXAMPLES[0]) and compare immediately.
- Click a Quick examples button — JSON change, Config change, Text edit, or Code snippet — to fill that sample and compare immediately.
- Click Swap to exchange the two textarea values and clear the error. It does not update comparedLeft/comparedRight. Click Compare text again to refresh the table. Swap is disabled while both boxes are empty.
- Click Clear to reset both inputs, the stored comparison, hasCompared, and the error. Clear is disabled while both boxes are empty.
Good uses for this tool
This model is most readable when the two texts already share line structure: a one-line edit in a config file, a JSON document that was pretty-printed the same way on both sides, or a short snippet where you expect the same line count. It is a poor fit when one side gained a heading at the top and everything else scrolled down—you will see a long run of changed rows.
What this tool does not do
- No Git integration, commit history, or three-way merge.
- No Myers/LCS/semantic alignment and no move detection.
- No word- or character-level highlighting inside a line.
- No JSON, code, or syntax-aware comparison (examples are plain text).
- No file upload or binary comparison.
- No ignore-whitespace, ignore-case, or regex filter.
- No copy or download of a patch/unified file.
- No implemented character ceiling in TextDiff.jsx (very large pastes are still bounded by the browser).
Privacy and browser-processing boundaries
TextDiff.jsx compares in the browser. It does not call trackToolEvent and does not POST the two panels to a diff API. That is not a confidentiality guarantee: the rest of the page can still load site assets and advertising; the privacy policy describes first-party analytics for event metadata (not designed to store tool contents); shared devices and browser extensions remain outside this component.
Do not treat a local string compare as a vault for secrets. The texts stay in React state and in the DOM while the tab is open.
Output-review checklist
- If many later lines are Changed after one insertion, that is the positional model, not a missed LCS match.
- Confirm you compared after the latest edits; typing and Swap do not refresh the stored result.
- Read “Changed lines” as the right panel’s line count, not as the amber Changed total.
- If unified says “No differences found,” side-by-side should be all unchanged rows.
- Keep your own copy of the texts; this page does not download a diff.
When a related DevToolKit tool is more appropriate
- JSON Formatter — when the inputs are JSON. Pretty-print both sides first so positional lines are more likely to correspond. This diff does not parse JSON.
- JWT Decoder — when the input is a three-segment token. Text Diff will not Base64URL-decode header/payload or check a signature.
- Base64 Encoder/Decoder — when you need to decode Base64 to text before comparing. Text Diff compares whatever you paste, encoded or not.
- Code Minifier — not a next step for this algorithm. Minifying would usually increase positional mismatches.