json-viewer

Custom Element that shows a JavaScript object's properties as syntax-highlighted JSON.

The element will respect prefers-color-scheme by default, but if you use the CSS Custom Properties listed below, you should customize both light and dark themes.

❤️ Proudly uses open-wc tools and recommendations.

Examples

import '/path/to/json-viewer.js';
const viewer = document.createElement('json-viewer');
      viewer.allowlist = ['foo', 'bar'];
      viewer.object = {
        foo: 'foo',
        bar: 'bar',
        baz: 'baz',
      };

<script type="module" src="/path/to/json-viewer.js"></script>

<json-viewer allowlist="meenie,minie">
  <script type="application/json">
    {
      "eenie": 1,
      "meenie": true,
      "minie": [{ "mo": "catch a tiger by the toe" }]
    }
  </script>
</json-viewer>

Properties

Property	Attribute	Type	Description
allowlist	allowlist	string[]	User-defined allowlist of top-level keys for the object. Optional for plain objects, Required when setting object to a non-serializable object (e.g. an HTMLElement) Property is an Array of strings Attribute is a comma-separated string
error		Error	JSON.parse error
object	object	string|object	JavaScript Object to display Setting this property will override <script type="application/json"> children

Events

Event	Type	Description
json-parse-error	CustomEvent<any>	when JSON parse fails

Slots

Name	Description
	JSON scripts or JSON strings appended as text nodes will be parsed and displayed

CSS Shadow Parts

Part	Description
boolean	boolean property values
code	the wrapping <code> element
key	property keys
null	null property values
number	number property values
string	string property values

CSS Custom Properties

Property	Description
--json-viewer-background	Color for generic text. Light #212121, Dark white
--json-viewer-boolean-color	Color for booleans. Light #f76707, Dark #22b8cf
--json-viewer-color	Color for generic text. Light white, Dark #212121
--json-viewer-key-color	Color for keys. Light #f76707, Dark #ff922b
--json-viewer-null-color	Color for nulls. Light #e03131, Dark #ff6b6b
--json-viewer-number-color	Color for numbers. Light #0ca678, Dark #51cf66
--json-viewer-string-color	Color for strings. Light #0c8599, Dark #22b8cf