The browser demo and reference application for JYCM, jycm-js, and react-jycm-viewer.
Live: https://eggachecat.github.io/jycm-json-diff-viewer/
JYCM compares JSON using business semantics rather than raw text alone. The playground lets developers edit two JSON documents and a versioned business policy or a live JavaScript decision function, then inspect the explanation, executable JSON Patch, machine-readable events, and Git-style visual diff.
JYCM is a family of tools for comparing JSON with explicit business rules.
| Project | Use it for |
|---|---|
| jycm | Python comparisons, CLI reports, and business policies |
| jycm-js | JavaScript / TypeScript comparisons in Node.js and browsers; npm package jycm |
| react-jycm-viewer | Embedding a visual JSON diff or JSON Patch viewer in React |
| jycm-json-diff-viewer | Trying comparisons in the online playground and studying an integration example |
Try the playground · Task guides · Algorithm paper
This README describes the repository's default branch. Package registries and
the deployed playground may contain earlier releases. Before integrating
Business Diff Policy or JSON Patch APIs, confirm that your installed version
exports the APIs used here. For development against this source, follow the
repository's development instructions. Pin the tested package version in your
application; a policy version: 1 identifies the policy format, not a package
version or a guarantee of identical behavior across every Python/JavaScript
input. Validate your own fixtures in both runtimes.
- four editable real-world scenarios, including a custom-JavaScript lab
- all eight declarative business rules: ignore, unordered, match-by identity, numeric tolerance, string normalization, expected change, expected existence, and numeric range
- named rule outcomes, affected paths, event counts, and business-level metrics
- semantic RFC 6902 generation with optional safety tests
- standalone Patch exploration with operation filters, pointer search, copy, download, apply preview, and semantic verification
- an original-style split Before/After renderer directly below the document editors, plus a switchable unified Git diff with line numbers and folding
- collapsible Before, After, policy, JavaScript, and raw-event editors
- path-level JavaScript functions whose boolean or structured decisions change semantic equality, explanations, and generated Patch output immediately
- default aligned before/after navigation with clickable paired-path details
- live validation that keeps the latest valid comparison visible while editing
- Codex, Claude, and project-agent installation commands for the portable JYCM Business Diff Skill
Typical use cases include API regression testing, configuration review, audit logs, approval workflows, catalog changes, and any nested JSON comparison where generated fields or collection ordering would make a text diff noisy.
pnpm install
pnpm startpnpm run checkThe check runs lint, tests, and the optimized webpack build used by GitHub Pages.
GitHub Pages serves docs/ from the gh-pages branch. Build main, copy the
contents of dist/ into that branch's docs/ directory, commit, and push.
Wait for the Pages build to report built before considering a release
complete.
The playground accepts a function expression or arrow function. It receives
path, pointer, left, right, leftExists, and rightExists. Return
true to treat a path as semantically equal, false to require a change, a
structured { equal, reason, severity } decision for explanation output, or
undefined to defer to the declarative policy and normal diff engine.
The function runs in the current browser tab. Only execute code you trust.
jycmis the Python semantic diff engine and CLI.jycm-jscomputes the same style of diff in browsers and Node.js.react-jycm-viewerrenders JYCM paths and operations with Monaco.- this repository is the interactive integration demo and public landing page.
MIT