jph

json-pretty-html

Transforms a JSON object to a pretty piece of HTML

Showing:

Popularity

Downloads/wk

1.7K

GitHub Stars

25

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

3.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Build Status Dependencies NPM Downloads MIT Node.js version

json-pretty-html

Transforms a JSON object into an HTML string. Allows selecting a subset of the object and highlight it with a CSS class.

Usage

var json = {
  "id": 2,
  "name": "An ice sculpture",
  "price": 12.50,
  "tags": ["cold", "ice"],
  "dimensions": {
    "length": 7.0,
    "width": 12.0,
    "height": 9.5
  },
  "warehouseLocation": {
    "latitude": -78.75,
    "longitude": 20.4
  }
};
var prettyHtml = require('json-pretty-html').default;
var html = prettyHtml(json, json.dimensions);

With a nice CSS, the result will be:

Result

CSS

You can use the default 'darcula' like stylesheet.

Or you can define your own styles. See below the list of CSS classes used in the generated HTML:

CSS ClassPurpose
json-prettyA div grouping several lines, delimited by the start/end of the object or the start/end of the selection
json-selectedThe current selection div, if any. Always associated with the json-pretty class.
json-keyObject key, excluding double quotes
json-stringString value, excluding double quotes
json-numberNumber value
json-booleanBoolean value

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100