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

Package detail

@power-elements/json-viewer

readme