Visual JSON Data Editor With jQuery - JSONedtr

Visual JSON Data Editor With jQuery - JSONedtr

JSONedtr is an easy and lightweight JSON editor to present JSON data in a tree view where the users are able to add, remove, edit the JSON on the client side.

  • Click the ✚ sign to add a row.
  • Click the ✖ sign to delete a row.
  • Click any key or value to edit it.

1. Import the JSONedtr's JavaScript and CSS files into the document.

<script src="" 
<script src="JSONedtr.js"></script>
<link rel="stylesheet" href="JSONedtr.css">

2. Create a container element in which you want to render the JSON editor.

<div id="output"></div>

3. Present your JSON data in the JSON editor.

var data = '{
      "one":"item 3-1",
      "two":"item 3-2",
      "three":"item 3-3"
new JSONedtr( data, '#output' );

4. Possible options for advanced usage:

  • runFunctionOnUpdate contains name of string to be called on change
  • if instantChange is set to true (which it is by default) change function will be called while typing,
  • if it is set to false function will be called on change event (when field will loose focus)
  • for functions which require heavy computing or for large data is recommended to change this to false
function getDataOnChange( data ){
  console.log('DATA WAS CHANGED', data.getData());
new JSONedtr( data, '#output', {
    instantChange: true

5. Get the current JSON strings.


This awesome jQuery plugin is developed by LorincJuraj. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 26.11.2018
  • Source