Blazor side-by-side text diff with collapsible unchanged regions, gutter collapse, and context menu.
$ dotnet add package TextCompareForBlazorTextCompareForBlazor is a lightweight, client-side Blazor (WebAssembly or Server) component for visually comparing two text blobs side-by-side with selectable diff granularity (Character / Word / Line), optional whitespace normalization, synchronized scrolling, line alignment (with gap placeholders), and customizable theming.
Control the font family and size for the entire compare surface (both gutters and text areas). These parameters can be set directly or via toolbar dropdowns when ShowToolbar is true.
IgnoreWhitespace)UseTokenPadding)Add a project/package reference to TextCompareForBlazor (project reference or NuGet, if published). Then:
Set originalText / modifiedText in your page/component C# code.
.razor)<TextCompareForBlazor.Components.SideBySide UserStyle="width:calc(100vw - 320px); height:calc(100vh - 180px);" LeftText="@OriginalText" RightText="@ModifiedText" />
@code {
string OriginalText = "...";
string ModifiedText = "...";
}
| Name | Type | Default | Description |
|---|---|---|---|
LeftCaption | string | Original | Caption above left panel. |
RightCaption | string | Modified | Caption above right panel. |
LeftText | string | "" | Source/original content. |
RightText | string | "" | Target/modified content. |
ShowGranularitySelector | bool | true | Shows the Character/Word/Line dropdown. |
ShowIgnoreWhitespace | bool | true | Toggle to collapse whitespace runs. |
ShowSyncToggle | bool | true | Toggle for scroll sync. |
ShowLineNumbers | bool | true | Displays gutter line numbers. |
SyncScrolling | bool | true | Initial sync state (can be toggled). |
IgnoreWhitespace | bool | false | Collapses all whitespace to single spaces for comparison. |
UseTokenPadding | bool | false | Pads deleted/inserted word tokens with NBSPs to retain horizontal alignment. |
ShowFooter | bool | true | Shows metrics footer. |
Granularity | DiffGranularity | Character | Current diff level: Character, Word, or Line. |
UserStyle | string? | width:auto; height:auto; | Inline style appended to root container. |
ShowToolbar | bool | true | Shows the toolbar containing Search, Granularity/Whitespace, Font controls, and Sync toggle. |
ShowSearch | bool | true | Displays the search box, match count, navigation buttons, and clear action. |
ShowCaseSensitiveToggle | bool | true | Displays the case-sensitive search toggle in the search group. |
CaseSensitiveSearch | bool | false | When true, search uses case-sensitive matching. |
FontFamily | string | e.g., "Consolas, 'Courier New', monospace" or your project default | Unified font family applied to both gutter line numbers and text content. |
FontSize | int | 14 | Unified font size (pixels) applied to both gutter and text content. |
FontFamilies | IEnumerable<string>? | null | Optional list of font stacks to populate the Font dropdown in the toolbar. |
FontSizes | IEnumerable<int>? | null | Optional list of font sizes to populate the Size dropdown in the toolbar. |
Tip: Font settings are propagated via CSS variables --tcb-font-family and --tcb-font-size to kee
| Param | Purpose | CSS Variable |
|---|---|---|
CaptionBackground | Caption background | --caption-bg |
CaptionTextColor | Caption text color | --caption-text |
FooterBackground | Footer background | --footer-bg |
FooterTextColor | Footer text | --footer-text |
GutterBackground | Line number gutter | --gutter-bg |
GutterNumberColor | Line number color | --gutter-number-color |
LeftDiffColor | Highlight for left diffs | --left-diff |
RightDiffColor | Highlight for right diffs | --right-diff |
EmptyLineBackground | Placeholder line background | --empty-line-bg |
EmptyLineBorder | Placeholder line border | --empty-line-border |
SearchHitBackground | Background for non-active matches | --search-hit-bg |
SearchHitColor | Text color for non-active matches | --search-hit-color |
SearchHitBorder | Border for non-active matches | --search-hit-border |
SearchHitActiveBackground | Background for the active match | --search-hit-active-bg |
SearchHitActiveColor | Text color for the active match | --search-hit-active-color |
SearchHitActiveBorder | Border for the active match | --search-hit-active-border |
Override by passing parameter values or extend with a wrapping CSS class via UserStyle.
Font settings propagate to both gutter and text content via these variables:
--tcb-font-family--tcb-font-sizeCharacter: Fine-grained semantic diff (uses DiffMatchPatch) on each line.Word: Tokenizes into whitespace + word runs; preserves spacing; optional NBSP padding.Line: Each aligned line treated as a single segment (modified vs equal).Lines are normalized (optionally whitespace collapsed), then encoded into tokens for diffing. Deletes followed immediately by inserts are paired as modified lines; pure inserts/deletes create blank counterpart placeholders for visual alignment.
aria-label regions.tabindex="0"), enabling keyboard navigation.title for context.Scroll synchronization uses a tiny JS module (tsCompareSync) injected inline. No external script file needed. If you bundle scripts separately, you may extract that <script> block.
IgnoreWhitespace or Granularity changes�cache externally if needed.
<SideBySide Text="@textA" Text2="@textB"
LeftCaption="Before" RightCaption="After"
IgnoreWhitespace="true" Granularity="Word"
UserStyle="--caption-bg:#f0f0f0; --footer-bg:#f8f8f8;"
Width="800px" Height="600px" />
@code {
string textA = "...";
string textB = "...";
}
Lines = aligned line pair countWords / characters refer to right side counts (you can extend to show both)Differences = number of non-equal segments under current granularityUse @using TextCompareForBlazor.Components (or add in _Imports.razor).
Uses DiffMatchPatch via NuGet (DiffMatchPatch 3.0.0). Ensure compliance with its license (Apache 2.0).
Questions or improvements? Extend SideBySideTextCompareBase in your own partial class for additional behaviors.