Diff Checker

A web-based tool for comparing text documents side by side, similar to what you'd see on GitHub when reviewing pull requests. This application helps you visualize differences between two pieces of text with clear highlighting and detailed statistics.

Live Demo: https://diff-checker-wheat.vercel.app/

Features

• Side-by-side comparison of two text documents
• Line-by-line diff visualization with color coding
• Character-level highlighting for subtle changes within lines
• GitHub-style interface with familiar red and green highlighting
• Synchronized scrolling between the two comparison panes
• Live statistics showing added, removed, and unchanged lines
• Interactive controls including swap sides, clear all, and copy diff
• Responsive design that works on different screen sizes
• Real-time updates as you type

How to Use

1. Open the application in your web browser
2. Click the "Code" button to open the input panel
3. Enter your original text in the left textarea
4. Enter the modified text in the right textarea
5. The differences will appear automatically below

Controls

• Swap Sides: Switch the left and right text areas
• Clear All: Remove all text from both areas
• Copy Diff: Copy the diff output to your clipboard in standard format

Understanding the Results

• Red highlighting indicates lines that were removed
• Green highlighting indicates lines that were added
• Gray highlighting shows unchanged lines
• Bold text within lines highlights specific character changes
• Line numbers help you track where changes occur
• Statistics at the top show the total count of each type of change

Installation

If you want to run this application locally:

1. Make sure you have Node.js installed (version 18 or higher)
2. Clone this repository
3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser to http://localhost:5173

Building for Production

To create a production build:

npm run build

You can preview the production build locally:

npm run preview

Technology Stack

This application is built with:

• Svelte 5 - Modern reactive framework with runes
• SvelteKit - Full-stack framework for Svelte
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Shadcn Svelte - Component library for Svelte
• Vite - Fast build tool and development server

Algorithm

The diff comparison uses a sophisticated algorithm based on the Longest Common Subsequence (LCS) to find optimal alignments between texts. This ensures that:

• Large blocks of identical text are properly aligned
• Only actual changes are highlighted
• The results are consistent regardless of text order

Contributing

If you'd like to contribute to this project:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run the linter and type checker:

   npm run check
   npm run lint

5. Test your changes thoroughly
6. Submit a pull request

License

This project is open source and available under the MIT License.