A Web Component to visualize JSON data in a tree view

---

• Installation
  • From CDN
  • From NPM
• Usage
  • Attributes
  • Properties
  • Methods
  • CSS Parts
  • CSS custom properties
  • Basic Usage
  • Load the JSON dynamically
  • Basic interactions
  • Custom renderer
• Demo

Installation

From CDN

The package contains a bundled version of the component which includes also the Lit library. It can be useful in case you want to import the package using a CDN.

1<script src="https://unpkg.com/@alenaksu/json-viewer@2.1.0/dist/json-viewer.bundle.js"></script>

From NPM

Install the component through NPM:

1npm i @alenaksu/json-viewer

Import the package to your project, this way the component will be automatically defined in the custom elements registry with its default tag name json-viewer.

1import '@alenaksu/json-viewer';

If you want to extend the component or if you just need to use it in scoped registries with a different tag name, then you can import the component class from the package:

1import { JsonViewer } '@alenaksu/json-viewer/JsonViewer.js';
2
3class MyJsonViewer extends JsonViewer {
4    ...
5}
6
7customElements.define('my-json-viewer', MyJsonViewer);

---

Usage

1<json-viewer></json-viewer>

Attributes

• data - the string representation of JSON object to load

Properties

• data - get/set the JSON object

Methods

• filter (regexOrPath: RegExp|string) => void | Maintains only the nodes that match the given criteria
• resetFilter () => void | Clear the filter
• expand (regexOrPath: RegExp|string) => void | Expand all the nodes that match the given criteria
• expandAll () => void | Alias for expand('**')
• collapse (regexOrPath: RegExp|string) => void | Collapse all the nodes that match the given criteria
• collapseAll () => void | Alias for collapse('**')
• search (regexOrPath: RegExp|string) => Iterator | Return and iterator with which is possible to go through all the matched nodes. It scrolls the page to the node and highlights it.

CSS Parts

• object - The object wrapper element.
• property - The wrapper element of a property.
• key - The key element of a property.
• primitive - The primitive value.
• primitive--string - Applied when the primitive is a string.
• primitive--number - Applied when the primitive is a number.
• primitive--boolean - Applied when the primitive is a boolean.
• primitive--null - Applied when the primitive is a null.
• preview - The value preview of a property.
• highlight - The highlighted value.

CSS custom properties

The appearance of the component can be modified by changing the CSS custom properties

1json-viewer {
2    /* Background, font and indentation */
3    --background-color: #2a2f3a;
4    --color: #f8f8f2;
5    --font-family: Nimbus Mono PS, Courier New, monospace;
6    --font-size: 1rem;
7    --line-height: 1.2rem;
8    --indent-size: 0.5em;
9    --indentguide-size: 1px;
10    --indentguide-style: solid;
11    --indentguide-color: #333;
12    --indentguide-color-active: #666;
13    --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);
14    --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);
15    --outline-color: #e0e4e5;
16    --outline-width: 1px;
17    --outline-style: dotted;
18
19    /* Types colors */
20    --string-color: #a3eea0;
21    --number-color: #d19a66;
22    --boolean-color: #4ba7ef;
23    --null-color: #df9cf3;
24    --property-color: #6fb3d2;
25
26    /* Collapsed node preview */
27    --preview-color: #deae8f;
28
29    /* Search highlight color */
30    --highlight-color:  #c92a2a;
31}

Basic Usage

Put the JSON inside the element

1<json-viewer>
2    { "quiz": { "sport": { "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls",
3    "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" } }, "maths": { "q1": {
4    "question": "5 + 7 = ?", "options": [ "10", "11", "12", "13" ], "answer": "12" }, "q2": { "question": "12 - 8 = ?",
5    "options": [ "1", "2", "3", "4" ], "answer": "4" } } } }
6</json-viewer>

Load the JSON dynamically

1<json-viewer id="json"></json-viewer>
2
3<script>
4    document.querySelector('#json').data = { prop1: true, prop2: 'test' };
5</script>

Basic interactions

1const viewer = document.querySelector('#json');
2
3// Expand/collapse/filter
4viewer.expand('**.name');
5viewer.collapse(/name/);
6viewer.filter('test.*.name');
7
8// Search
9const searchIterator = viewer.search('value');
10// Scrolls to the node and highlight the value
11searchIterator.next();

Custom renderer

This is an experimental feature and it may change in the future

The rendering of the values can be customized by defining a static method customRenderer in the custom element class. The function receives the value and the path of the node and it should return a HTML node or a Lit's TemplateResult object.

1import { JsonViewer } from '@alenaksu/json-viewer/JsonViewer.js';
2
3customElements.define(
4    'json-viewer',
5    class extends JsonViewer {
6        static styles = [
7            JsonViewer.styles,
8            css`
9                a {
10                    color: white;
11                    text-decoration: underline;
12                }
13            `
14        ];
15
16        static customRenderer(value, path) {
17            if (typeof value === 'string') {
18                if (URL.canParse(value)) {
19                    return html`<a href="${value}" target="_blank">${value}</a>`;
20                } else if (Date.parse(value)) {
21                    return new Date(value).toLocaleString();
22                }
23            } else if (typeof value === 'number') {
24                return value.toFixed(2);
25            }
26
27            return super.customRenderer(value);
28        }
29    }
30);
31

Demo

The demo can also be run locally with

1npm run start