@power-elements/json-viewer

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

Usage no npm install needed!

<script type="module">
  import powerElementsJsonViewer from 'https://cdn.skypack.dev/@power-elements/json-viewer';
</script>

README

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