react-json-editor-viewer

React JSON Editor and JSON Viewer

Usage no npm install needed!

<script type="module">
  import reactJsonEditorViewer from 'https://cdn.skypack.dev/react-json-editor-viewer';
</script>

README

Getting started

npm i react-json-editor-viewer

Easily view json in react

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



<JSONViewer 
  data={{
    the: "men",
    that: "landed",
    on: "the",
    moon: "were",
    maybe: 2,
    i: "think",
    probably: ["neil armstrong", "buzz aldrin"],
    am_i_right: true
  }}
/>

Alt text

Make your json viewer collapsible

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

<JSONViewer 
  data={{
    the: "men",
    that: "landed",
    on: "the",
    moon: "were",
    maybe: 2,
    i: "think",
    probably: ["neil armstrong", "buzz aldrin"],
    am_i_right: true
  }}
  collapsible
/>

Alt text

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

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);
}

<JSONEditor 
  data={{
    the: "men",
    that: "landed",
    on: "the",
    moon: "were",
    maybe: 2,
    i: "think",
    probably: ["neil armstrong", "buzz aldrin"],
    am_i_right: true
  }}
  collapsible
  onChange={this.onJsonChange}
/>

Alt text

View both the json editor and viewer side by side

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);
}

<JSONEditor 
  data={{
    the: "men",
    that: "landed",
    on: "the",
    moon: "were",
    maybe: 2,
    i: "think",
    probably: ["neil armstrong", "buzz aldrin"],
    am_i_right: true
  }}
  collapsible
  onChange={this.onJsonChange}
  view="dual"
/>

Alt text

Configure your optional custom styles

See the source for the Demo App

default

Alt text

override custom styles

Alt text

License: MIT