https://github.com/constantoduol/jsoneditor

A react visual json editor
https://github.com/constantoduol/jsoneditor

javascript javascript-library json jsoneditor jsonviewer reactjs

Last synced: about 2 months ago
JSON representation

A react visual json editor

• Host: GitHub
• URL: https://github.com/constantoduol/jsoneditor
• Owner: constantoduol
• License: mit
• Created: 2017-08-16T11:56:34.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-03T14:52:52.000Z (over 1 year ago)
• Last Synced: 2024-04-11T01:47:48.611Z (about 1 year ago)
• Topics: javascript, javascript-library, json, jsoneditor, jsonviewer, reactjs
• Language: JavaScript
• Size: 1.83 MB
• Stars: 95
• Watchers: 1
• Forks: 18
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### Getting started

`npm i react-json-editor-viewer`

### Easily view json in react

```javascript

import { JSONViewer } from "react-json-editor-viewer";

;

```

![Alt text](images/jsonviewer.png?raw=true "JSON Viewer")

### Make your json viewer collapsible

```javascript

import { JSONViewer } from "react-json-editor-viewer";

;

```

![Alt text](images/jsonviewer_collapse.png?raw=true "JSON Viewer")

### Edit json easily and listen to changes in the data, hover on elements to add/remove keys

```javascript

import {JSONEditor} from 'react-json-editor-viewer';

constructor(){

  this.onJsonChange = this.onJsonChange.bind(this);

}

onJsonChange(key, value, parent, data){

  console.log(key, value, parent, data);

}

```

![Alt text](images/jsoneditor.png?raw=true "JSON Viewer")

### View both the json editor and viewer side by side

```javascript

import {JSONEditor} from 'react-json-editor-viewer';

constructor(){

  this.onJsonChange = this.onJsonChange.bind(this);

}

onJsonChange(key, value, parent, data){

  console.log(key, value, parent, data);

}

```

![Alt text](images/jsoneditor_dual.png?raw=true "JSON Viewer")

### Configure your optional custom styles

See the source for the [Demo App](src/demo/App.js)

default

![Alt text](images/jsoneditor_unstyled.png?raw=true "Unstyled JSON Editor")

override custom styles

![Alt text](images/jsoneditor_styled.png?raw=true "Styled JSON Editor")

### License: MIT