@power-elements/json-viewer
v2.1.1
Published
Custom Element that shows a JavaScript object's properties as syntax-highlighted JSON.
Downloads
120
Maintainers
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 stringsAttribute is a comma-separated string |
| error
| | Error
| JSON.parse error |
| object
| object
| string\|object
| JavaScript Object to displaySetting 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 |