Getting Started with Text Diff

The Text Diff tool provides an intuitive interface for comparing two text files or text content. This guide will walk you through the basic usage steps.

Step-by-Step Guide

1. Access the Tool

Navigate to the Text Diff tool from the main page or use the direct link: /text-diff

2. Input Your Content

Method 1: Manual Text Input

1. In the File A section, enter or paste your first text content
2. In the File B section, enter or paste your second text content
3. Optionally, customize the file names in the input fields

Method 2: File Upload

1. Click the Load File button next to File A
2. Select a text file from your device
3. Repeat for File B if needed
4. The file content will be automatically loaded

3. Configure Diff Options

Choose your comparison preferences:

• Ignore Whitespace: Check this to ignore differences in whitespace (spaces, tabs, line endings)
• Ignore Case: Check this to perform case-insensitive comparison

4. View the Results

The diff results will appear automatically in the right panel, showing:

• Diff Output: Formatted comparison with line numbers and change indicators
• Statistics: Summary of changes (added, removed, modified, unchanged lines)

5. Copy Results

Click the Copy button to copy the diff results to your clipboard for sharing or documentation.

Understanding the Output

Diff Format

The diff output uses a standard format:

+ 1   1 | Added line content
- 2     | Removed line content
  3   2 | Unchanged line content

Where:

• + indicates added lines
• - indicates removed lines
• (space) indicates unchanged lines
• Numbers show line numbers in each file

Statistics Panel

The statistics show:

• Added: Number of new lines in File B
• Removed: Number of lines deleted from File A
• Modified: Number of lines that were changed
• Unchanged: Number of lines that remained the same

Quick Actions

Load Example

Click Load Example to see a sample comparison with pre-filled content.

Clear All

Click Clear All to reset all input fields and results.

File Management

• Use the file name inputs to label your comparisons
• Upload files using the Load File buttons
• Supported formats: .txt, .md, .js, .ts, .vue, .html, .css, .json, .xml, .yaml, .yml

Tips for Better Results

1. Use Descriptive File Names

Give your files meaningful names to make comparisons easier to track.

2. Choose Appropriate Options

• Use Ignore Whitespace when comparing code that may have formatting differences
• Use Ignore Case when case sensitivity doesn't matter for your comparison

3. Organize Your Content

• Ensure your text is properly formatted
• Use consistent line endings
• Consider the context of your comparison

Common Use Cases

Code Comparison

// File A: original.js
function greet(name) {
  return 'Hello, ' + name;
}

// File B: modified.js
function greet(name) {
  return 'Hello, ' + name + '!';
}

Configuration Files

// File A: config.json
{
    "debug": false,
    "port": 3000
}

// File B: config.json
{
    "debug": true,
    "port": 3000,
    "database": "mongodb://localhost:27017"
}

Documentation

# File A: README.md

# My Project

A simple project

# File B: README.md

# My Project

A simple project with advanced features

Troubleshooting

No Differences Shown

• Ensure both files have content
• Check if your options are hiding differences (e.g., ignore whitespace)
• Verify the content is actually different

File Upload Issues

• Check file format is supported
• Ensure file is not corrupted
• Try smaller files if upload fails

Performance with Large Files

• The tool works best with files under 10,000 lines
• For very large files, consider splitting them into smaller sections

Next Steps

Now that you understand the basics, explore Advanced Features to learn about more powerful capabilities of the Text Diff tool.