DEV Community

Cover image for Building a High-Performance, Client-Side JSON Diff Checker Using Dynamic Programming (LCS)
kandz
kandz

Posted on

Building a High-Performance, Client-Side JSON Diff Checker Using Dynamic Programming (LCS)

#javascript #webdev #algorithms #json

Comparing nested JSON configuration files across builds or API revisions is a constant necessity in backend development. While standard text diffing utilities exist, semantic JSON comparison requires robust syntax validation combined with clean line-by-line alignment.

To solve this, we built a secure, client-side JSON Diff Checker that parses, formats, and compares JSON documents locally. Here is a technical breakdown of how we engineered its dynamic programming comparison engine and why local validation matters.

The Architecture: JSON Parsing + LCS Line Mapping

A high-fidelity JSON diff utility cannot simply run a raw text string comparison; doing so would highlight harmless differences like varying spacing or reordered properties as false positives. Our engine operates in two clean phases:

Phase 1: Semantic Standardizing

First, both inputs are parsed safely via standard browser JSON libraries. This step validates JSON well-formedness, capturing trailing commas, mismatched braces, or double-quote syntax warnings. Once parsed, the objects are compiled back into formatted string arrays with standard 2-space indentation. This standardizes whitespace and makes comparison line-by-row predictable.

Phase 2: Longest Common Subsequence (LCS)

Second, we run a dynamic programming LCS algorithm over the standardized line arrays to find the shortest edit path. Here is how the recursive traceback matrix computes the state of each line:

// Dynamic programming matrix initialization
const dp: number[][] = Array(n + 1).fill(0).map(() => Array(m + 1).fill(0));

for (let i = 1; i <= n; i++) {
  for (let j = 1; j <= m; j++) {
    if (leftLines[i - 1] === rightLines[j - 1]) {
      dp[i][j] = dp[i - 1][j - 1] + 1;
    } else {
      dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

By traversing the completed matrix, the engine identifies exactly which formatted lines were added (+), removed (-), or kept unchanged (➔), mapping precise line numbers to both columns.

Core Symmetrical Design & Features

  • Instant Syntax Diagnostics: If either JSON input is malformed, the visualizer halts gracefully, displaying clear syntax error messages and pinpointing the structural issue.
  • Symmetrical Layout Sizing: Built with a 5-column control console on the left (for source payloads and presets) and a 7-column highlight scrollbox on the right (height restricted to 450px) to maintain a perfectly balanced layout.
  • Log Snapping with Custom Names: Includes an editable configuration label so you can save your compared datasets with distinct names (e.g., "User Profile Verification") directly to your local History Log.

Try out the interactive comparison sandbox, paste your configurations, and test the dynamic alignment yourself:

👉 Test the Live Tool: https://tools.kandz.me/json-diff

Top comments (0)