`<pretty-json>` HTML Custom Element

See the live demo

<pretty-json> is an HTML custom element that allows you to render JSON objects in HTML documents with human-readable formatting and expandable interaction for browsing deep JSON structures.

Usage

Include pretty-json-custom-element/index.js in your HTML page and use the HTML custom element as follows:

<script defer src="https://unpkg.com/pretty-json-custom-element/index.js"></script>
<pretty-json>
{
  "hello": "world",
  "value": 42,
  "enabled": true,
  "extra": null,
  "nested": { "key": "value" }
}
</pretty-json>

Your JSON will be rendered as a human-readable format:

Features

Outputs a valid JSON string that can be copied and pasted into a JSON file
HTML Custom Element without any dependencies, works in any modern browser
No need to install any dependencies or build tools, just drop the script in your HTML and start using it
Allows a high level of customization using CSS variables
Display large JSON objects with expandable and collapsible sections
Supports truncating very large strings and arrays with an ellipsis

To-do List

Support grouping very large arrays

Attributes

You can customize the rendering of the JSON object by setting the following attributes on the <pretty-json> element:

`expand`

By default, the JSON object is rendered expanded up to 1 level deep. You can set the expand attribute to a number to expand the JSON object up to that level deep:

<pretty-json expand="2">{"hello": {"world": "!"}}</pretty-json>

Collapsed by default

You can set the expand attribute to 0 to render the JSON object collapsed by default:

<pretty-json expand="0">{"hello": {"world": "!"}}</pretty-json>

`truncate-string`

By default, strings longer than 500 characters are truncated with an ellipsis. You can set the truncate-string attribute to a number to truncate strings longer than that number of characters:

<pretty-json truncate-string="10">
  {"hello": "long string that will be truncated"}
</pretty-json>

Customization

You can customize the appearance of the rendered JSON using CSS variables:

pretty-json {
  --key-color: #cc0000;
  --arrow-color: #737373;
  --brace-color: #0030f0;
  --bracket-color: #0030f0;
  --string-color: #009900;
  --number-color: #0000ff;
  --null-color: #666666;
  --boolean-color: #d23c91;
  --comma-color: #666666;
  --ellipsis-color: #666666;

  --indent: 2rem;
}

/* Also handle the dark mode */
@media (prefers-color-scheme: dark) {
  pretty-json {
    --key-color: #f73d3d;
    --arrow-color: #6c6c6c;
    --brace-color: #0690bc;
    --bracket-color: #0690bc;
    --string-color: #21c521;
    --number-color: #0078b3;
    --null-color: #8c8888;
    --boolean-color: #c737b3;
    --comma-color: #848181;
    --ellipsis-color: #c2c2c2;
  }
}

Development

To run the development server:

yarn install
yarn start

Running tests

This repository uses Playwright for testing.

To run the tests:

yarn test

mohsen1/pretty-json

<pretty-json> HTML Custom Element