react-jycm-viewer example

A runnable React and TypeScript reference for react-jycm-viewer, the synchronized visual viewer for JYCM semantic JSON diffs.

The example includes a compact business summary that separates structural changes from semantic rule checks and failed expectations.

Unlike a plain text diff, JYCM can describe business-aware relationships such as array items matched by an id, path-specific unordered collections, ignored values, additions, removals, and nested value changes. This project shows how to feed that structured result into the low-level provider and renderer APIs using real editable JSON.

Run locally

pnpm install
pnpm start

Open http://localhost:8080. Edit any of the three inputs; temporarily invalid JSON keeps the last valid visualization visible.

Validate a change with:

pnpm run check

Integration pattern

import { JYCMContext, JYCMRender, useJYCM } from "react-jycm-viewer";

function DiffView({ before, after, diffResult }) {
  const viewer = useJYCM({
    leftJsonStr: JSON.stringify(before, null, 2),
    rightJsonStr: JSON.stringify(after, null, 2),
    diffResult,
  });

  return (
    <JYCMContext.Provider value={viewer}>
      <JYCMRender leftTitle="Benchmark" rightTitle="Actual" />
    </JYCMContext.Provider>
  );
}

The complete editable implementation is in src/components/Demo.tsx; Monaco's JSON worker configuration is in configs/webpack/common.js.

Where the diff comes from

• JYCM for Python generates semantic diff results and RFC 6902 patches.
• JYCM for JavaScript generates the same class of structured result in browser or Node.js workflows.
• react-jycm-viewer turns the result into synchronized, navigable source views.

MIT licensed.