json-edit-react

A React component for editing or viewing JSON/object data • Docs

Demo

data:{
}
string:"Welcome to the Editor 😀"
number:99
boolean:true
nothing:null
enum:"Option B 🍌"
Usage:[
]
0:"Edit a value by clicking the "edit" icon, or double-clicking the value."
1:"You can change the type of any value"
2:"You can add new values to objects or arrays"
3:"You can edit individual values, or even a whole object node at once (as JSON text)"
4:"You can also drag and drop!"
5:{
3 items
}
}
]
Keyboard interaction:{
}
"Enter" to submit change:"(or Ctrl/Cmd-Enter when editing whole JSON nodes)"
"Escape" to cancel:"👍"
To start a new line:"Shift/Ctrl/Cmd-Enter (or just "Enter" when editing JSON nodes)"
When copying to clipboard:"Hold down "Ctrl/Cmd" to copy path instead of data"
When opening/closing a node:"Hold down "Alt/Option" to open/close ALL child nodes at once"
Tab navigation:"Use "Tab" and "Shift-Tab" to quickly move between values."
}
}

Undo/Redo functionality can be incorporated by using an additional hook, such as use-undo

Options

Demo data

Theme

Data root name

Collapse level

Collapse animation time

Indent level

Show counts

Allow EditAllow Delete

Allow AddEnable clipboard

Show String quotesShow Array indices

Sort Object keys

Custom Text Editor

Default new value

Play around with the JSON structure, and test out various options.

There are a range of different demo data sets to play with, showcasing specific features in each one (over and above the modifiable options above). The definitions for all demo data displays can be found in the repo here.

Incorporate into your own React project:

npm i json-edit-react
or:
yarn add json-edit-react