Skip to content

Latest commit

 

History

History
51 lines (34 loc) · 2.49 KB

README.md

File metadata and controls

51 lines (34 loc) · 2.49 KB
Raw

JSONdrop

Javascript Object to HTML5 pretty-print converter

About

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.

Preview

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.

Syntax

jsondrop.js is an ES6 module which defines one method.

let outputElement = jsondrop(inputValue, config);

Parameters

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) - number specifying how deep to automatically expand the object properties. Default: 0

Return value

HTMLElement. A <code> element displaying the data from the input object.

Exceptions

  • TypeError if inputValue has a circular reference or contains a BigInt value.

Styling

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)