Implementing a Git‑like Diff View with jsDiff and diff2html (HTML Demo and React Integration)

Container for the diff output

// Example JSON objects const obj1 = {a: 1, b: 2, c: {d: 3}}; const obj2 = {a: 1, b: 3, c: {d: 4}}; const text1 = JSON.stringify(obj1, null, 2); const text2 = JSON.stringify(obj2, null, 2); document.addEventListener('DOMContentLoaded', function() { const targetElement = document.getElementById('diff-output'); const diffOutput = Diff.createTwoFilesPatch('text1.json', 'text2.json', text1, text2, '', ''); const configuration = { drawFileList: true, fileListToggle: false, fileListStartVisible: false, matching: 'lines', outputFormat: 'side-by-side', synchronizedScroll: true, highlight: true, renderNothingWhenEmpty: false }; const diff2htmlUi = new Diff2HtmlUI(targetElement, diffOutput, configuration); diff2htmlUi.draw(); diff2htmlUi.highlightCode(); });