render JSON differences and custom your styles
two choices:
# react component, easy to start
npm install react-diff-viz
# function, flexible and extendable
npm install diff-vizhttps://littlewhite-hai.github.io/diff-viz/
- 🔍 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
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% |
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)
