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" />