Components

Diff Viewer

A line-based text diff with inline or side-by-side views and add/remove tinting.

php artisan blatui:add diff-viewer

greet.js

Inline diff of greet.js: removed lines are marked with a minus, added lines with a plus.
Original line number	Changed line number	Line
1		Removed: function greet(name) {
2		Removed: return "Hi " + name;
	1	Added: function greet(name, greeting = "Hello") {
	2	Added: return greeting + ", " + name + "!";
3	3	}

{{-- Inline line diff of a small snippet, before to after. --}}
@php
    $before = <<<'TXT'
    function greet(name) {
        return "Hi " + name;
    }
    TXT;

    $after = <<<'TXT'
    function greet(name, greeting = "Hello") {
        return greeting + ", " + name + "!";
    }
    TXT;
@endphp

<x-ui.diff-viewer :old="$before" :new="$after" filename="greet.js" class="w-full max-w-lg" />

Split

greet.js

Side-by-side diff of greet.js: original on the left, changed on the right.
Original line number	Original line	Changed line number	Changed line
1	Removed: function greet(name) {	1	Added: function greet(name, greeting = "Hello") {
2	Removed: return "Hi " + name;	2	Added: return greeting + ", " + name + "!";
3	}	3	}

{{-- Split (side-by-side) view: original on the left, changed on the right. --}}
@php
    $before = <<<'TXT'
    function greet(name) {
        return "Hi " + name;
    }
    TXT;

    $after = <<<'TXT'
    function greet(name, greeting = "Hello") {
        return greeting + ", " + name + "!";
    }
    TXT;
@endphp

<x-ui.diff-viewer mode="split" :old="$before" :new="$after" filename="greet.js" class="w-full" />

API Reference

Props, slots and exposed methods for <x-ui.diff-viewer>.

Props

Prop	Type	Default	Description
`old`	`string`	`''`	The original text. Compared against new with a line-level LCS diff; an empty string is treated as zero lines so pure additions diff cleanly.
`new`	`string`	`''`	The changed text. Added lines are highlighted in green, removed lines in red.
`mode`	`string`	`'inline'`	Layout of the diff. "inline" stacks removals and additions in one column; "split" shows original and changed side by side. `inline` `split`
`filename`	`string`	—	Optional label shown in a header bar above the diff (e.g. the file path).