json-pretty-html
json-pretty-html copied to clipboard
Transforms a JSON object to a pretty piece of HTML
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:
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 Class | Purpose |
|---|---|
| A div grouping several lines, delimited by the start/end of the object or the start/end of the selection | |
| The current selection div, if any. Always associated with the json-pretty class. | |
| Object key, excluding double quotes | |
| String value, excluding double quotes | |
| Number value | |
| Boolean value |