{"id":17180105,"url":"https://github.com/rexskz/json-diff-kit","last_synced_at":"2025-04-08T10:33:08.807Z","repository":{"id":41457426,"uuid":"455034480","full_name":"RexSkz/json-diff-kit","owner":"RexSkz","description":"A better JSON differ \u0026 viewer, support LCS diff for arrays and recognise some changes as \"modification\" apart from simple \"remove\"+\"add\".","archived":false,"fork":false,"pushed_at":"2025-02-25T15:25:55.000Z","size":850,"stargazers_count":165,"open_issues_count":14,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T09:34:02.868Z","etag":null,"topics":["diff","json","view"],"latest_commit_sha":null,"homepage":"https://json-diff-kit.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RexSkz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-03T04:54:53.000Z","updated_at":"2025-03-26T14:49:12.000Z","dependencies_parsed_at":"2023-09-26T21:44:33.416Z","dependency_job_id":"d15f48e8-e0e8-43ff-962c-baebf40af1ad","html_url":"https://github.com/RexSkz/json-diff-kit","commit_stats":{"total_commits":111,"total_committers":2,"mean_commits":55.5,"dds":0.009009009009009028,"last_synced_commit":"858b4ca58049404d2551209515859ad139150ea0"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RexSkz%2Fjson-diff-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RexSkz%2Fjson-diff-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RexSkz%2Fjson-diff-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RexSkz%2Fjson-diff-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RexSkz","download_url":"https://codeload.github.com/RexSkz/json-diff-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247824035,"owners_count":21002194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diff","json","view"],"created_at":"2024-10-15T00:28:44.405Z","updated_at":"2025-04-08T10:33:08.780Z","avatar_url":"https://github.com/RexSkz.png","language":"TypeScript","readme":"# JSON Diff Kit\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][download-badge]][npm-url]\n[![Codecov](https://codecov.io/gh/RexSkz/json-diff-kit/branch/main/graph/badge.svg?token=8YRG3M4WTO)](https://codecov.io/gh/RexSkz/json-diff-kit)\n\nA better JSON differ \u0026 viewer library written in TypeScript. [Try it out in the playground!](https://json-diff-kit.js.org/)\n\n## Install\n\nYou can install `json-diff-kit` via various package managers.\n\n```sh\n# using npm\nnpm i json-diff-kit --save\n\n# using yarn\nyarn add json-diff-kit\n\n# using pnpm\npnpm add json-diff-kit\n```\n\n## Quick Start\n\nTo generate the diff data:\n\n```ts\nimport { Differ } from 'json-diff-kit';\n// or if you are using vue, you can import the differ only\nimport Differ from 'json-diff-kit/dist/differ';\n\n// the two JS objects\nconst before = {\n  a: 1,\n  b: 2,\n  d: [1, 5, 4],\n  e: ['1', 2, { f: 3, g: null, h: [5], i: [] }, 9],\n  m: [],\n  q: 'JSON diff can\\'t be possible',\n  r: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n  s: 1024,\n};\nconst after = {\n  b: 2,\n  c: 3,\n  d: [1, 3, 4, 6],\n  e: ['1', 2, 3, { f: 4, g: false, i: [7, 8] }, 10],\n  j: { k: 11, l: 12 },\n  m: [\n    { n: 1, o: 2 },\n    { p: 3 },\n  ],\n  q: 'JSON diff is possible!',\n  r: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed quasi architecto beatae incididunt ut labore et dolore magna aliqua.',\n  s: '1024',\n};\n\n// all configs are optional\nconst differ = new Differ({\n  detectCircular: true,    // default `true`\n  maxDepth: Infinity,      // default `Infinity`\n  showModifications: true, // default `true`\n  arrayDiffMethod: 'lcs',  // default `\"normal\"`, but `\"lcs\"` may be more useful\n});\n\n// you may want to use `useMemo` (for React) or `computed` (for Vue)\n// to avoid redundant computations\nconst diff = differ.diff(before, after);\nconsole.log(diff);\n```\n\nYou can use your own component to visualize the `diff` data, or use the built-in viewer:\n\n```tsx\nimport { Viewer } from 'json-diff-kit';\nimport type { DiffResult } from 'json-diff-kit';\n\nimport 'json-diff-kit/dist/viewer.css';\n\ninterface PageProps {\n  diff: [DiffResult[], DiffResult[]];\n}\n\nconst Page: React.FC\u003cPageProps\u003e = props =\u003e {\n  return (\n    \u003cViewer\n      diff={props.diff}          // required\n      indent={4}                 // default `2`\n      lineNumbers={true}         // default `false`\n      highlightInlineDiff={true} // default `false`\n      inlineDiffOptions={{\n        mode: 'word',            // default `\"char\"`, but `\"word\"` may be more useful\n        wordSeparator: ' ',      // default `\"\"`, but `\" \"` is more useful for sentences\n      }}\n    /\u003e\n  );\n};\n```\n\nThe result is here:\n\n![The result (using LCS array diff method).](./preview.png)\n\n## Other Version of Viewer\n\nHere is an experimental [Vue version](https://github.com/RexSkz/json-diff-kit-vue) of the `Viewer` component.\n\n## More Complex Usages\n\nPlease check the [playground page](https://json-diff-kit.js.org/), where you can adjust nearly all parameters and see the result.\n\n## CLI Tool\n\nYou can use the CLI tool to generate the diff data from two JSON files. Please install the package `terminal-kit` before using it.\n\n```bash\npnpm add terminal-kit # or make sure it's already installed in your project\n\n# Compare two JSON files, output the diff data to the terminal.\n# You can navigate it using keyboard like `less`.\njsondiff run path/to/before.json path/to/after.json\n\n# Output the diff data to a file.\n# Notice there will be no side-by-side view since it's not a TTY.\njsondiff run path/to/before.json path/to/after.json -o path/to/result.diff\n\n# Use a custom configuration file and output the diff data to a file.\njsondiff run path/to/before.json path/to/after.json -c path/to/config.json -o path/to/result.diff\n\n# Print the help message.\njsondiff --help\njsondiff run --help\n```\n\n![A screenshot when using CLI.](./preview-cli.png)\n\n## Algorithm Details\n\nPlease refer to the article [JSON Diff Kit: A Combination of Several Simple Algorithms](https://blog.rexskz.info/json-diff-kit-a-combination-of-several-simple-algorithms.html?cc_lang=en).\n\n## Features \u0026 Roadmap\n\n- [x] Provide a `Differ` class and a `Viewer` component\n- [x] Merge \"remove \u0026 add\" at the same place as a modification\n- [x] Support inline diffing by word instead of by character\n- [x] Generate code directly in the demo page (covered by playground)\n- [x] Optimise `Viewer` performance by adding virtual scrolling\n- [x] Add CLI tool\n- [x] Provide a Vue version of `Viewer`\n- [ ] Improve unit tests\n\n## License\n\nMIT\n\n[npm-url]: https://npmjs.org/package/json-diff-kit\n[npm-image]: https://img.shields.io/npm/v/json-diff-kit.svg\n\n[download-badge]: https://img.shields.io/npm/dm/json-diff-kit.svg\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexskz%2Fjson-diff-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frexskz%2Fjson-diff-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexskz%2Fjson-diff-kit/lists"}