A modern, browser-based text comparison tool that highlights differences between two text inputs with line-level and character-level diff visualization.
More Screenshots
Try it now: https://aforemendude.github.io/text-diff-tool/
- Side-by-side comparison – View original and modified text in a split display
- Line-level diffing – Highlights added, removed, and modified lines
- Character-level diffing – Shows exact character changes within modified lines
- Collapsible unchanged sections – Automatically hides large blocks of identical lines to focus on changes
- Edit/Compare toggle – Switch between editing text and viewing differences
- JSON Mode – Normalizes JSON by sorting keys and formatting with consistent indentation before comparison
- Static deployment – Builds to static files
- Local Processing – All data processing happens locally in your browser. No data is ever sent to a remote server.
- No Trackers – This tool is free of ads and trackers.
- Node.js
^20.19.0 || ^22.12.0 || >=24.0.0 - npm 11 (the reproducible package-manager version is recorded as npm 11.17.0)
The Node.js range is the intersection of the Vite 8 and Vitest 4 requirements, the strictest constraints in the
installed dependency tree. The same range and the npm major are enforced for repository commands through devEngines.
npm installPlaywright also needs its browser binaries. Choose the command for your environment:
# macOS or Windows
npm run playwright:install
# Supported Linux distributions and Linux CI/container environments
npm run playwright:install -- --with-depsThe Linux command installs both the browsers and their required system packages, and may prompt for sudo. If the
browsers are already installed and you only need the system packages, run:
npm run playwright:install-depsStart the development server:
npm run devRegenerate the README screenshots with Playwright at a 1280×720 viewport:
npm run screenshotsA full run clears the screenshots/ directory first. Pass an output basename or filename to recreate only that image
without deleting the other files, for example:
npm run screenshots -- settings_modalBuild for production (outputs to docs/ for GitHub Pages):
npm run buildPreview the production build:
npm run previewRun the Playwright end-to-end tests (the production build runs first, then a fresh preview server starts automatically):
npm run integrationThis command never reuses a process already listening on the preview port (4173); an occupied port is reported as an
error so the tests cannot accidentally run against an unrelated build.
To test against an already-running development server, set BASE_URL and use the development integration script. This
skips both the production build and preview server. Extra arguments can select a focused spec or browser:
BASE_URL=http://localhost:5173 npm run integration:dev -- playwright/comparison.spec.ts --project=chromiumRun the Vitest unit tests:
npm run testSee Testing strategy and catalog for the boundary between unit and browser coverage and the complete Playwright inventory.
npm run formatInstall dependencies, verify the lockfile, run all checks, and rebuild the tracked docs/ deployment without committing
or pushing it:
npm run deploy- Enter or paste text in the Original and Modified text areas
- Click the Compare button to view the diff
- Click Edit to return to editing mode
TextDiffTool is licensed under the MIT License.
The TextDiffTool logo is original artwork created for this project and is distributed under the same MIT License.
Copyright and license terms for the JavaScript libraries shipped in the browser bundle are collected in the third-party software notices.
The interface uses Inter, and editable and compared text uses JetBrains Mono. Both font families are self-hosted and licensed under the SIL Open Font License 1.1. The required copyright and license notices are distributed beside the font files: