Implementing a Git‑like Diff View with jsDiff and diff2html (HTML Demo and React Integration)
This article explains how to create a Git‑style code comparison view using jsDiff and diff2html, demonstrates a functional HTML/JS MVP, and shows how to integrate the solution into a React component with proper dependencies and styling.
Background – The author wanted a Git‑style diff view to clearly see JSON changes when updating forms, and chose the jsDiff + diff2html combination after reviewing existing plugins.
Technical solution – The selected stack is jsDiff for generating patches and diff2html for rendering them as side‑by‑side HTML.
HTML Demo – A minimal MVP is built with plain HTML and JavaScript. The full source code is shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>diff2html Example</title>
<!-- Include diff2html CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
<!-- Include diff2html JS -->
<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
<!-- Include jsdiff JS -->
<script src="https://cdn.jsdelivr.net/npm/diff/dist/diff.min.js"></script>
</head>
<body>
<!-- Container for the diff output -->
<div id="diff-output"></div>
<script>
// 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();
});
</script>
</body>
</html>The resulting diff view is displayed in the page, as illustrated by the accompanying screenshot.
React Integration – To use the diff view in a real project, the author outlines the steps:
Install dependencies: yarn add diff diff2html.
Import the required modules and CSS files:
import { createTwoFilesPatch } from 'diff';
import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui';
import 'highlight.js/styles/googlecode.css';
import 'diff2html/bundles/css/diff2html.min.css';Use a ready‑made component, e.g.:
<DiffComponent
prevData={code1}
curData={code2}
prevFileName={code1Name}
curFileName={code2Name}
/>The author also suggests wrapping the DiffComponent inside a modal or drawer for better UI integration, noting that styling adjustments may be required.
Finally, the article ends with a friendly reminder to like the post if it was helpful.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.