Text & Code Diff Checker

Compare two blocks of text or code and highlight differences.

The Text & Code Diff Checker compares two blocks of text side by side and highlights what changed: green for Added, red strikethrough for Removed, plain for untouched context. A Compare Mode selector switches granularity between Words (default — best for prose), Lines (suited to code reviews), and Characters (tiny token tweaks), and the diff recomputes live via useMemo on every keystroke in either pane. No files to upload — just paste into "Original Text" and "Modified Text" and read the "Diff Result" card.

Parts render inline in document order inside a scrollable pane (max height 150), so unchanged context between hunks stays visible instead of being collapsed away. The legend in the card header keeps the color coding obvious, and emptying both fields resets to the italic placeholder "Result will appear here...". Both strings stay in React state — the comparison never touches the network.

How it works

DiffCheckerPage imports the diff npm package and selects diffWords, diffLines, or diffChars based on the Compare Mode (default "words"). The comparison runs inside useMemo keyed on both texts and the mode, so edits recompute without a button click. Result parts are rendered as spans: added uses a green highlight (bg-green-500/20 text-green-700), removed uses red with line-through, and unchanged segments stay plain.

An early guard — if (!originalText && !modifiedText) return [] — keeps the empty state clean. The scroll container is capped at max-h-150 so long diffs scroll instead of stretching the page. There is no upload path: both strings live only in component state for the lifetime of the session.

How to use

Choose "Compare Mode:" — Words, Lines, or Characters.
Paste the baseline into "Original Text" (placeholder "Paste your original text here...").
Paste the changed version into "Modified Text" (placeholder "Paste your modified text here...").
Read "Diff Result" — green = Added, red strikethrough = Removed (legend dots sit in the card header).
Switch modes to see word-level vs line-level vs character-level granularity; the diff recomputes live via useMemo.
Scroll the result pane (max height 150) for long texts, or empty both fields to reset to "Result will appear here...".

Tips

Words mode is the default and best for prose edits; use Lines for code reviews and Characters for tiny token-level tweaks.
Results render inline in document order, so unchanged context between hunks stays visible rather than being summarized away.
No upload happens — both strings stay in React state, so confidential diffs never leave the browser.