https://github.com/bennypowers/json-viewer

Custom Element that shows a JavaScript object's properties as syntax-highlighted JSON.
https://github.com/bennypowers/json-viewer

customelements hacktoberfest json json-viewer syntax-highlighting webcomponents

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/bennypowers/json-viewer
• Owner: bennypowers
• Created: 2019-12-18T17:20:44.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T20:22:40.000Z (over 1 year ago)
• Last Synced: 2024-10-05T07:54:56.991Z (3 months ago)
• Topics: customelements, hacktoberfest, json, json-viewer, syntax-highlighting, webcomponents
• Language: JavaScript
• Homepage:
• Size: 1.42 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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](https://open-wc.org) tools and recommendations.

## Examples

```javascript

import '/path/to/json-viewer.js';

const viewer = document.createElement('json-viewer');

      viewer.allowlist = ['foo', 'bar'];

      viewer.object = {

        foo: 'foo',

        bar: 'bar',

        baz: 'baz',

      };

```

```html

  

    {

      "eenie": 1,

      "meenie": true,

      "minie": [{ "mo": "catch a tiger by the toe" }]

    }

  

```

## 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 `` 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   |