rje

react-json-editor-viewer

A react visual json editor

Showing:

Popularity

Downloads/wk

844

GitHub Stars

64

Maintenance

Last Commit

4mos ago

Contributors

8

Package

Dependencies

0

Size (min+gzip)

29.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial