TextDiffy

TextDiffy is a private, browser-based tool for comparing two text or code variants. Both variants are editable and equal: give them names, add an optional model/prompt note, paste or copy either one, and swap them when needed.

The comparison runs entirely in the browser. A draft is kept in sessionStorage only, so it survives a page refresh but is removed when the browser session ends. Monaco Editor and its language workers are bundled with the application, so the editor does not depend on a third-party CDN at runtime and entered text is not sent to a backend.

• Start with empty Variant A and Variant B text areas; Text is the default format, with code formats available when useful. Paste directly, import a local .txt, .md, .json, or code file, or drag it onto a variant card.
• Review line changes, changed-line totals, word/line/character counts, and the match indicator.
• Navigate changes with the Previous/Next controls or Alt + ↑ / ↓; swap variants with Alt + S.
• Enable Ignore spaces for leading/trailing whitespace or Hide unchanged to focus on changed regions. Monaco shows inline word-level highlights within changed lines.
• Select a winning variant and add a decision note, then export the complete comparison as Markdown or self-contained HTML. Select any highlighted block in the editor and use Copy selection to copy it.

• Node.js 20.19+ or 22.12+
• npm 10+

npm ci
npm run dev

Open the local URL printed by Vite.

npm run lint
npm test
npm run build
npm audit

npm run build performs the TypeScript project build before creating the production bundle.

npm run build
npm run preview

• React 19 and TypeScript
• Vite
• Monaco Editor
• Lucide icons
• Plain responsive CSS

• src/App.tsx — application state and controls
• src/comparison.ts — comparison model, metrics, and persisted-draft validation
• src/hooks/useComparison.ts — session-only draft persistence and comparison updates
• src/components/CodeDiffViewer.tsx — Monaco diff editor integration and change navigation
• src/monaco.ts — local Monaco instance and worker configuration
• src/index.css — layout, responsive behavior, and visual states