A modern, 100% client-side web application for comparing text differences in real-time. Built with Next.js 13 (App Router), TypeScript, and Tailwind CSS, featuring unified and side-by-side diff views with multiple customization options.
- Real-time Diff Calculation: See differences instantly as you type or paste text
- Dual View Modes:
- Unified view (Git-style single column)
- Side-by-Side view (two column comparison)
- Multiple Granularities: Compare by lines, words, or characters
- Smart Normalization: Optional case-insensitive and whitespace-ignoring comparisons
- Line Numbers: Toggle line number display for easier navigation
- Collapse Unchanged: Automatically collapse large blocks of unchanged content
- Debounced Updates: 200ms debouncing prevents lag during typing
- Persistent State: All inputs and settings saved to localStorage
- Clipboard Integration: Quick paste buttons for both text inputs
- Swap Function: Instantly swap left and right content
- Toast Notifications: User-friendly feedback for all actions
- Copy as Text: Export diff in unified text format
- HTML Export: Download fully-styled HTML file with embedded diff
- Offline Support: Progressive Web App (PWA) functionality
- Multi-language Support: English and Portuguese (Brazil)
- Persistent Language Selection: Your language choice is remembered
- Framework: Next.js 13+ with App Router
- Language: TypeScript
- Styling: Tailwind CSS with dark theme
- Diff Engine:
difflibrary for accurate comparison - UI Components: Custom components with Radix UI primitives
- Icons: Lucide React
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd text-diff-viewer- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
npm run build
npm run startThe application will be optimized and ready to deploy.
- Enter Text: Type or paste text into the left and right input areas
- Configure Options:
- Choose between Unified or Side-by-Side view
- Select granularity (Lines, Words, or Characters)
- Enable normalization options (Ignore case, Ignore whitespace)
- Toggle line numbers and collapsed sections
- View Diff: The comparison updates automatically as you type
- Export: Use toolbar buttons to copy diff as text or export as HTML
- Use Tab key to navigate between inputs
- Paste directly into inputs with Ctrl+V (Cmd+V on Mac)
The application uses the industry-standard diff library to compute differences between texts. It supports:
- Line-by-line comparison (default)
- Word-by-word comparison
- Character-by-character comparison
- Ignore Case: Treats uppercase and lowercase letters as identical
- Ignore Whitespace: Normalizes multiple spaces and trims lines before comparison
- Green background: Added content
- Red background: Removed content
- Gray/neutral: Unchanged content
- Border accent: Color-coded left border for quick scanning
- Text: Unified diff format with +/- prefixes
- HTML: Self-contained HTML file with inline styles, perfect for sharing or archiving
- Debouncing: 200ms delay prevents excessive recalculations during typing
- Memoization: React hooks optimize re-renders
- Lazy Calculation: Diff only computed when inputs or options change
- Efficient Rendering: Virtual DOM minimizes actual DOM updates
- Very large texts (>100,000 lines) may impact performance
- Side-by-Side view automatically switches to Unified on mobile devices
- Browser clipboard API requires HTTPS in production (or localhost in development)
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS Safari, Chrome Android)
PWA features require modern browser support for Service Workers.
Contributions are welcome! Please feel free to submit issues or pull requests.