- fuzzy search (with regex support)
- folding
- keyboard-only friendly
- highlighting
- lightweight
- hackable (src/index.js)
- browser support okay (not that I care about IE users any more)
- Unprefixed flexbox is probably the limiting factor
<script src="dist/simple-json-viewer.js"></script>
<div id="json-viewer-container"></div>
<script>
var container = document.querySelector('#json-viewer-container');
// var json = '{"jsonArgCanBeJsonString": true}';
var json = { jsonArgCanBeJsonObject: true };
var options = {
fontFamily: '"Fira Mono", monospace',
colors: ['gray', '#090', '#c00', 'purple', '#00c', '#ccc', '#333', 'yellow', 'rgb(240,240,240)']
};
var viewer = createJSONViewer(container, json, options);
viewer.changeJSON({ youCanAlsoChangeTheJSON: 'after the viewer is created' });
</script>
JSONViewer.changeJSON(json<String|Object>, path<Array> {optional, default: []})
var viewer = createJSONViewer(el, json, opts); setTimeout(function () { // without path, replaces all of the json viewer.changeJSON({ "array": [ { "i-have-been-modified": false } ] }); }, 1000); setTimeout(function () { // with path, replaces specific part of the json viewer.changeJSON(true, ["array", 0, "i-have-been-modified"]); }, 2000);
fontFamily
{default:'monospace'
}
If you want to use a custom font (you'll have to load it yourself).colors
{default:['#999', '#090', '#c00', '#c0c', '#00c', '#ccc', '#333', '#ff0', '#eee']
}
An array of 9 CSS colors as strings. To see what each one does, look here (numbers beforevmax
corresponds to the index, socolor: 3vmax
meanscolor: #c0c
with defaults)onValueClick
{default: none}
onValueClick allows you to pass a handler when a value is clicked. It will be the closest ancestor that is either a key-value pair from an object, or an item from an array.var json = { "someArray": [ "clickMe" ] }; var viewer = createJSONViewer(el, json, { onValueClick: function (valueOfClicked, pathToClicked, element) { console.log(valueOfClicked); // "clickMe" console.log(pathToClicked); // ["someArray", 0] console.log(element); // div.json-viewer-array-value } });
If you want to contribute, create a pull request :D
Also, it's a small library of a few hundred lines, so if it's missing something why not modify it.
:thumbs-up: