new
The real time chat demo: Ping →

Diff

This component is a wrapper around diff2html with a simpler API to quickly show diff between two strings.

Install

<head>
...
 
{{-- DIFF2HTML --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
</head>

Examples

@php
$old = '{"age": 24, "name": "Mary"}';
 
$new = '{"age": 27, "name": "Marian"}';
@endphp
 
{{-- The `file-name` determines highlight language --}}
<x-diff :old="$old" :new="$new" file-name="extra.json" />

maryUI
Sponsor