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.
<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