web components

json-view

Visualise JSON inside a <pre> tag as a tree.

code 
<json-view>
  <pre>{"name":"json-view","id":1234,"awesome":true,"pain":null,"elements":["string",123,false,true,null],"nested":{"taglines":[{"name":"Lorem ipsum","feature":"Lorem ipsum dolor sit amet"},{"name":"Consectetur","feature":"consectetur adipiscing elit"},{"name":"Sed do eiusmod","feature":"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"}],"tutorials":[{"type":"category","label":"1. Introduction","items":[{"id":"basics","label":"a. Basics"},{"id":"adding-data","label":"b. Adding data"},{"id":"dynamic-attributes","label":"c. Dynamic attributes"}]},{"type":"category","label":"18. Debugging","items":[{"id":"debug","label":"a. The debug tag"}]}]}}</pre>
</json-view>

{"name":"json-view","id":1234,"awesome":true,"pain":null,"elements":["string",123,false,true,null],"nested":{"taglines":[{"name":"Lorem ipsum","feature":"Lorem ipsum dolor sit amet"},{"name":"Consectetur","feature":"consectetur adipiscing elit"},{"name":"Sed do eiusmod","feature":"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"}],"tutorials":[{"type":"category","label":"1. Introduction","items":[{"id":"basics","label":"a. Basics"},{"id":"adding-data","label":"b. Adding data"},{"id":"dynamic-attributes","label":"c. Dynamic attributes"}]},{"type":"category","label":"18. Debugging","items":[{"id":"debug","label":"a. The debug tag"}]}]}}

Styling

Use the following CSS variables:

code 
<style>
  .styled {
    --json-view-bg-color: #1e222a;
    --json-view-color: #8cc6fa;
    --json-view-font: var(--monospace);
    --json-view-padding: 1em;
    --json-view-primitive-color: #f4d58a;
    --json-view-string-color: #bde19e;
    --json-view-value-font-weight: bold;
  }
</style>
<json-view class="styled">
  <pre>{"name":"json-view","id":1234,"awesome":true,"pain":null,"elements":["string",123,false,true,null],"nested":{"taglines":[{"name":"Lorem ipsum","feature":"Lorem ipsum dolor sit amet"},{"name":"Consectetur","feature":"consectetur adipiscing elit"},{"name":"Sed do eiusmod","feature":"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"}],"tutorials":[{"type":"category","label":"1. Introduction","items":[{"id":"basics","label":"a. Basics"},{"id":"adding-data","label":"b. Adding data"},{"id":"dynamic-attributes","label":"c. Dynamic attributes"}]},{"type":"category","label":"18. Debugging","items":[{"id":"debug","label":"a. The debug tag"}]}]}}</pre>
</json-view>

{"name":"json-view","id":1234,"awesome":true,"pain":null,"elements":["string",123,false,true,null],"nested":{"taglines":[{"name":"Lorem ipsum","feature":"Lorem ipsum dolor sit amet"},{"name":"Consectetur","feature":"consectetur adipiscing elit"},{"name":"Sed do eiusmod","feature":"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"}],"tutorials":[{"type":"category","label":"1. Introduction","items":[{"id":"basics","label":"a. Basics"},{"id":"adding-data","label":"b. Adding data"},{"id":"dynamic-attributes","label":"c. Dynamic attributes"}]},{"type":"category","label":"18. Debugging","items":[{"id":"debug","label":"a. The debug tag"}]}]}}