BlazorTextDiff 2025.8.7.33170

BlazorTextDiff 🔍

A modern Blazor component for displaying side-by-side text differences with syntax highlighting and advanced comparison features. Built on top of the powerful DiffPlex library.

🚀 Features

• Side-by-side comparison with clear visual indicators
• Syntax highlighting for better readability
• Ignore case and whitespace options
• Async diff processing for large texts
• Customizable headers with diff statistics
• Responsive design that works on all devices
• Easy integration with existing Blazor applications

📊 Status

🎮 Live Demo

Try the interactive demo: https://lzinga.github.io/BlazorTextDiff/

📸 Screenshots

Basic text comparison showing additions, deletions, and modifications

Async processing for large text comparisons

📦 Installation

Install the NuGet package:

dotnet add package BlazorTextDiff

You'll also need the DiffPlex library:

dotnet add package DiffPlex

⚙️ Setup

1. Configure Services

Add the required services to your Program.cs:

// Program.cs
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    
    // Register BlazorTextDiff dependencies
    builder.Services.AddScoped<ISideBySideDiffBuilder, SideBySideDiffBuilder>();
    builder.Services.AddScoped<IDiffer, Differ>();

    builder.RootComponents.Add<App>("app");

    await builder.Build().RunAsync();
}

2. Include Styles and Scripts

Add to your index.html or _Host.cshtml:

<link href="_content/BlazorTextDiff/css/BlazorDiff.css" rel="stylesheet" />


<script src="_content/BlazorTextDiff/js/BlazorTextDiff.js"></script>

🎯 Usage

Basic Comparison

<TextDiff OldText="@oldText" NewText="@newText" />

Advanced Features

<TextDiff
    OldText="@oldText"
    NewText="@newText"
    CollapseContent="true"
    ShowWhiteSpace="true"
    IgnoreCase="true"
    IgnoreWhiteSpace="false">
    
    <Header>
        <div class="diff-stats">
            <span class="badge bg-success">+@context.Additions</span>
            <span class="badge bg-warning">~@context.Modifications</span>
            <span class="badge bg-danger">-@context.Deletions</span>
        </div>
    </Header>
</TextDiff>

Async Processing

For large texts, use async processing:

@code {
    private string oldText = "";
    private string newText = "";
    private bool isProcessing = false;

    private async Task ProcessLargeDiff()
    {
        isProcessing = true;
        // Your async logic here
        await Task.Delay(100); // Simulate processing
        isProcessing = false;
    }
}

🔧 Component Parameters

🎨 Customization

The component uses CSS classes that you can override:

.diff-container { /* Main container */ }
.diff-line-added { /* Added lines */ }
.diff-line-deleted { /* Deleted lines */ }
.diff-line-modified { /* Modified lines */ }
.diff-line-unchanged { /* Unchanged lines */ }

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• DiffPlex - The core diffing library
• Blazor - The web framework that makes this possible

<div align="center"> Made with ❤️ for the Blazor community </div>