JSON value viewer. Demo.
Alternative to state debugger. In case if you want to see a value, but don't want to write decoder and presentation.
In the times of continuous delivery we often encounter unknown data structures even on production (think of rich error details object, which may contain information about the context of an error).
<json-viewer value='{ "foo": "bar" }'></json-viewer>
There are two ways of using this component:
<script src="//unpkg.com/json-viewer-custom-element"></script>
<json-viewer value='{ "foo": "bar" }'></json-viewer>
Currently there's only one attribute supported: value
which should be a valid JSON value, more attributes will be added in future releases in order to support additional feature, such as copying node to clipboard. See demo of web-component usage.
Example styling using colors from dark theme of chrome devtools
--font-family: menlo, monospace;
--preview-background: transparent;
--key-color: #e36eec;
--string-value-color: #e93f3b;
--numeric-value-color: #9980ff;
--null-value-color: #7f7f7f;
--boolean-value-color: #9980ff;
--toggle-color: #bbb;
Slots:
-
by default)+
by default)elm-package install 1602/json-viewer