diff-viz

render JSON differences and custom your styles

Install

two choices:

# 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/

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% |

Test Scenarios

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

MIT