# @power-elements/json-viewer

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

Latest version **2.1.1** (published 2020-09-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @power-elements/json-viewer
pnpm add @power-elements/json-viewer
yarn add @power-elements/json-viewer
bun add @power-elements/json-viewer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2020-09-26 |
| First published | 2019-12-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 63.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Benny Powers |
| Maintainers | bennyp |
| Keywords | json, viewer, javascript, custom element, zero-dependency, web component |

## Links

- npm: https://www.npmjs.com/package/@power-elements/json-viewer
- Repository: https://github.com/bennypowers/json-viewer
- Homepage: https://bennypowers.dev/json-viewer
- Issues: https://github.com/bennypowers/json-viewer/issues
- npm.io page: https://npm.io/package/@power-elements/json-viewer

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.1.1 (latest) — 2020-09-26
- 2.1.0 — 2020-07-31
- 2.0.3 — 2020-07-16
- 2.0.2 — 2020-07-16
- 2.0.1 — 2020-07-16
- 2.0.0 — 2020-06-09
- 1.3.0 — 2020-05-16
- 1.2.1 — 2020-05-16
- 1.2.0 — 2020-05-16
- 1.1.1 — 2020-02-09
- 1.1.0 — 2020-02-09
- 1.0.1 — 2019-12-18
- 1.0.0 — 2019-12-18

## 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
<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.<br />Optional for plain objects,<br />Required when setting `object` to a non-serializable object (e.g. an HTMLElement)<br />Property is an Array of strings<br />Attribute is a comma-separated string |
| `error`     |             | `Error`          | JSON.parse error                                 |
| `object`    | `object`    | `string\|object` | JavaScript Object to display<br />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   |

---
_Source: https://npm.io/package/@power-elements/json-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._