Javascript Object to HTML5 pretty-print converter
JSONdrop is an experiment that converts Javascript objects into HTML. Any browser that supports <details> elements properly will display these converted objects as collapsed data with individually expandable entries.
Live preview site | View the package.json as rendered by JSONdrop
The preview site can accept an object to display (object) and a custom configuration object (config) as URL parameters. Naturally, both objects should be URI-encoded to avoid breakage.
If the object cannot be parsed, it shall display an automatically-expanded object containing the error which was caught.
jsondrop.js is an ES6 module which defines one method.
let outputElement = jsondrop(inputValue, config);inputValue
The value to convert to HTML. Object properties must be own, enumerable, and string-keyed to be rendered.
config (Optional)
A configuration object. The following properties are supported:
autoOpenDepth(Optional) -numberspecifying how deep to automatically expand the object properties. Default:0
HTMLElement. A <code> element displaying the data from the input object.
TypeErrorifinputValuehas a circular reference or contains aBigIntvalue.
jsondrop.css is required to display the rendered object with its proper syntax.
It also defines a default colour scheme via CSS variable fallbacks, allowing you to define your own colour scheme easily.
--jsondrop-background(default:black)--jsondrop-text(default:white)--jsondrop-undefined(default:grey)--jsondrop-null(default:grey)--jsondrop-boolean(default:lime)--jsondrop-number(default:lime)--jsondrop-string(default:fuchsia)--jsondrop-function(default:aqua)