Skip to content

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

Notifications You must be signed in to change notification settings

ndresgarc/json-viewer

 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.3%
  • HTML 11.7%