JSONTreeView
A simple JSON viewer with basic edit capabilities. It has styles similar to Chrome's dev tools, so it's perfect for building dev tools extensions... live example.
Install with NPM
npm i json-tree-view
Build example
./example/build.sh
See ./example/build directory.
Basic usage
index.js
var JSONTreeView = ; var view = 'example' hello : 'world' doubleClick : 'me to edit' a : null b : true c : false d : 1 e : nested : 'object' f : 123; // Listen for change eventsview;view;view;view;view;view;view;view; // Expand recursivelyview; viewwithRootName = false; // Inspect window.data on the console and note that it changes with edits.windowdata = viewvalue; viewvaluefviewvaluefviewvalueea = 'aaa';delete viewvaluec;view; // Do not hide root.viewalwaysShowRoot = true; // Set readonly when filtering words automatically.viewreadonlyWhenFiltering = true;viewfilterText = 'a'; // Remove word filter by setting a false value.viewfilterText = null; // Always show count of object or array.viewshowCountOfObjectOrArray = true; // Cannot change the value of JSON and remove "+" and "x" buttons.viewreadonly = true; document;document;document;document;document;
index.html - (don't forget to include the css)
JSONView Example Options Filter: Always show root Automatically set to readonly when filtering Readonly Show count of Object or Array JSON