<json-custom> JSON viewer/editor Custom HTML Element

<json-custom> 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, edit values and sort arrays.

It uses only plain HTML/CSS/JS with no dependencies.

It was originally based on mohsen1's pretty-json custom viewer element.

Installation

npm install json-custom-element

Usage

CDN

<script type="module" src="https://unpkg.com/json-custom-element/JSONCustomElement.min.js"></script>

NPM

import 'json-custom-element';

Example

<json-custom>
{
  "hello": "world",
  "value": 42,
  "enabled": true,
  "extra": null,
  "nested": { "key": "value", "array": [0, 1 ,2 ,"a"] }
}
</json-custom>

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

Features

• 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
• Display large JSON objects with expandable and collapsible sections
• Supports truncating very large strings and arrays with an ellipsis
• Allows some customization using CSS variables
• All JSON intrinsic formating symbols (quotes, colon, comma) are delegated to HTML pseudo elements ::before/after and CSS managed
• Show element count on arrays if requested
• Edit values and sort array elements
• Updates textContent property and emits an InputEvent when edited

To-do List

• [X] Edit boolean values
• [X] Hide (index) keys for array of objects
• [ ] Add/Delete keys

Attributes

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

array-size

Show element count on arrays

<json-custom array-size>{a: [0, 1, 2, "foo"]}</json-custom>

rw

By default, the JSON object is only a viewer, set the rw attribute (to "" or "true") to allow modification:

<json-custom rw>{"hello": {"world": "!"}}</json-custom>

expand

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

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

Collapsed by default

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

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

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:

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

Customization

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

json-custom {
  --symbol-color: #737373;
  --string-color: #009900;
  --number-color: #0000ff;
  --null-color: #666666;
  --boolean-true-color: #d23c91;
  --boolean-false-color: #d23c91;
  --indent: 2rem;
  --font-family: monospace;
  --font-size: 1rem;
}

/* Also handle the dark mode */
@media (prefers-color-scheme: dark) {
  json-custom {
    --symbol-color: #6c6c6c;
    --string-color: #21c521;
    --number-color: #0078b3;
    --null-color: #8c8888;
    --boolean-true-color: #c737b3;
    --boolean-false-color: #c737b3;
    --indent: 2rem;
    --font-family: monospace;
    --font-size: 1rem;
  }
}