{"id":24448870,"url":"https://github.com/constantoduol/jsoneditor","last_synced_at":"2025-04-07T12:07:32.911Z","repository":{"id":24051457,"uuid":"100484222","full_name":"constantoduol/JSONEditor","owner":"constantoduol","description":"A react visual json editor","archived":false,"fork":false,"pushed_at":"2023-11-03T14:52:52.000Z","size":1923,"stargazers_count":95,"open_issues_count":14,"forks_count":18,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-11T01:47:48.611Z","etag":null,"topics":["javascript","javascript-library","json","jsoneditor","jsonviewer","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/constantoduol.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":"2017-08-16T11:56:34.000Z","updated_at":"2024-06-18T16:45:17.376Z","dependencies_parsed_at":"2024-06-18T16:44:41.293Z","dependency_job_id":"dcf6e69e-0543-46b1-aeb0-a0d4909a8a02","html_url":"https://github.com/constantoduol/JSONEditor","commit_stats":{"total_commits":78,"total_committers":9,"mean_commits":8.666666666666666,"dds":0.5512820512820513,"last_synced_commit":"8454c6330608a11526f11444055c71d97e78878f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constantoduol%2FJSONEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constantoduol%2FJSONEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constantoduol%2FJSONEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/constantoduol%2FJSONEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/constantoduol","download_url":"https://codeload.github.com/constantoduol/JSONEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"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":["javascript","javascript-library","json","jsoneditor","jsonviewer","reactjs"],"created_at":"2025-01-21T00:35:11.909Z","updated_at":"2025-04-07T12:07:32.895Z","avatar_url":"https://github.com/constantoduol.png","language":"JavaScript","readme":"### Getting started\n\n`npm i react-json-editor-viewer`\n\n### Easily view json in react\n\n```javascript\nimport { JSONViewer } from \"react-json-editor-viewer\";\n\n\u003cJSONViewer\n  data={{\n    the: \"men\",\n    that: \"landed\",\n    on: \"the\",\n    moon: \"were\",\n    maybe: 2,\n    i: \"think\",\n    probably: [\"neil armstrong\", \"buzz aldrin\"],\n    am_i_right: true,\n  }}\n/\u003e;\n```\n\n![Alt text](images/jsonviewer.png?raw=true \"JSON Viewer\")\n\n### Make your json viewer collapsible\n\n```javascript\nimport { JSONViewer } from \"react-json-editor-viewer\";\n\n\u003cJSONViewer\n  data={{\n    the: \"men\",\n    that: \"landed\",\n    on: \"the\",\n    moon: \"were\",\n    maybe: 2,\n    i: \"think\",\n    probably: [\"neil armstrong\", \"buzz aldrin\"],\n    am_i_right: true,\n  }}\n  collapsible\n/\u003e;\n```\n\n![Alt text](images/jsonviewer_collapse.png?raw=true \"JSON Viewer\")\n\n### Edit json easily and listen to changes in the data, hover on elements to add/remove keys\n\n```javascript\nimport {JSONEditor} from 'react-json-editor-viewer';\n\nconstructor(){\n  this.onJsonChange = this.onJsonChange.bind(this);\n}\n\nonJsonChange(key, value, parent, data){\n  console.log(key, value, parent, data);\n}\n\n\u003cJSONEditor\n  data={{\n    the: \"men\",\n    that: \"landed\",\n    on: \"the\",\n    moon: \"were\",\n    maybe: 2,\n    i: \"think\",\n    probably: [\"neil armstrong\", \"buzz aldrin\"],\n    am_i_right: true\n  }}\n  collapsible\n  onChange={this.onJsonChange}\n/\u003e\n```\n\n![Alt text](images/jsoneditor.png?raw=true \"JSON Viewer\")\n\n### View both the json editor and viewer side by side\n\n```javascript\nimport {JSONEditor} from 'react-json-editor-viewer';\n\nconstructor(){\n  this.onJsonChange = this.onJsonChange.bind(this);\n}\n\nonJsonChange(key, value, parent, data){\n  console.log(key, value, parent, data);\n}\n\n\u003cJSONEditor\n  data={{\n    the: \"men\",\n    that: \"landed\",\n    on: \"the\",\n    moon: \"were\",\n    maybe: 2,\n    i: \"think\",\n    probably: [\"neil armstrong\", \"buzz aldrin\"],\n    am_i_right: true\n  }}\n  collapsible\n  onChange={this.onJsonChange}\n  view=\"dual\"\n/\u003e\n```\n\n![Alt text](images/jsoneditor_dual.png?raw=true \"JSON Viewer\")\n\n### Configure your optional custom styles\n\nSee the source for the [Demo App](src/demo/App.js)\n\ndefault\n\n![Alt text](images/jsoneditor_unstyled.png?raw=true \"Unstyled JSON Editor\")\n\noverride custom styles\n\n![Alt text](images/jsoneditor_styled.png?raw=true \"Styled JSON Editor\")\n\n### License: MIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconstantoduol%2Fjsoneditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconstantoduol%2Fjsoneditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconstantoduol%2Fjsoneditor/lists"}