diff-viz

![ts][ts-badge]
![version][version-badge]
[![download-badge]][download-link]
![license][license-badge]
![test][test-badge]
![coverage][coverage-badge]
![官网](https://littlewhite-hai.github.io/diff-viz/)

render JSON differences and custom your styles

Install

two choices:

``bash

`react component, easy to start`


npm install react-diff-viz
function, flexible and extendable

npm install diff-viz

Demo And Usage

https://littlewhite-hai.github.io/diff-viz/

!demo

Features

- 🔍 Precise diff detection between complex JSON objects
- ⚡ Efficient array alignment using LCS (Longest Common Subsequence) algorithm
- 🔄 Support for nested arrays and objects with any level of complexity
- 🎨 Customizable styling of diff results
- 🧪 Well-tested with comprehensive test cases

Test Coverage

The library is thoroughly tested to ensure reliability and correctness:

| File | % Statements | % Branches | % Functions | % Lines |
| ----------------- | ------------ | ---------- | ----------- | ------- |
| diff-algorithm.ts | 97.24% | 94.19% | 100% | 97.24% |

$3

We test various scenarios to ensure robust diff detection:

- ✅ Simple object differences
- ✅ Nested object structures
- ✅ Array handling with different alignment strategies
- ✅ Multi-dimensional arrays
- ✅ Special value comparisons (null, undefined, dates)
- ✅ Custom equality functions
- ✅ Data2-based array alignment (preserving second array structure)

License