Display a JSON object with keys and simple values (strings, numbers, and booleans), with an expanded/collapsed state

Example input:

{"id":"8947b61f-4386-4ead-ab52-00200a446140","title":"Hello, world!","version":4.1,"public":true}

Example output:

▼ {
"id": "8947b61f-4386-4ead-ab52-00200a446140"
"title": "Hello, world!"
"version": 4.1
"public": true
}{...}

Values can also be objects which can be collapsed/expanded too

Example input:

{"id":"8947b61f-4386-4ead-ab52-00200a446140","title":"Hello, world!","version":4.1,"public":true,"properties":{"icon":"🎉","width":"full","typeface":"sans-serif"}}

Example output:

▼ {
"id": "8947b61f-4386-4ead-ab52-00200a446140"
"title": "Hello, world!"
"version": 4.1
"public": true
"properties": ▶ {
"icon": "🎉"
"width": "full"
"typeface": "sans-serif"
}{...}
}{...}

Values can be deeply nested objects

Example input:

{"id":"8947b61f-4386-4ead-ab52-00200a446140","title":"Hello, world!","version":4.1,"history":{"597b41a1-1e31-4f7d-8763-01f244eaf5f7":{"date":"3 Feb 2022","changes":{"title":"Hello, world! v2"}},"3d4a2ceb-e787-479e-8087-3aaaf0d16e61":{"date":"29 Jan 2022","changes":{"icon":"🚧"}},"678f83a8-230d-4c3c-92cf-b3cacafb0a0a":{"date":"22 Jan 2022","changes":{"public":false}}},"public":true,"properties":{"icon":"🎉","width":"full","typeface":"sans-serif"}}

Example output:

▼ {
"id": "8947b61f-4386-4ead-ab52-00200a446140"
"title": "Hello, world!"
"version": 4.1
"history": ▶ {
"597b41a1-1e31-4f7d-8763-01f244eaf5f7": ▶ {
"date": "3 Feb 2022"
"changes": ▶ {
"title": "Hello, world! v2"
}{...}
}{...}
"3d4a2ceb-e787-479e-8087-3aaaf0d16e61": ▶ {
"date": "29 Jan 2022"
"changes": ▶ {
"icon": "🚧"
}{...}
}{...}
"678f83a8-230d-4c3c-92cf-b3cacafb0a0a": ▶ {
"date": "22 Jan 2022"
"changes": ▶ {
"public": false
}{...}
}{...}
}{...}
"public": true
"properties": ▶ {
"icon": "🎉"
"width": "full"
"typeface": "sans-serif"
}{...}
}{...}

Values can be arrays

Bonus: What style tweaks would you make to this component?

Example input:

{"id":"8947b61f-4386-4ead-ab52-00200a446140","title":"Hello, world!","version":4.1,"collaborators":["ecb5c324-6e4c-4348-940d-19b9d9d42e78","6a1401e9-a878-4eac-98fd-5eeabf414332","8fa9f385-3e65-4899-a7d0-206b3f4b28bf","328bd6d9-eb59-45df-a230-be32ebd003b7","032bba7f-2ee5-4518-946f-955ada6fdc34","09941c45-17b8-431d-a86c-d578484ec261"],"history":{"597b41a1-1e31-4f7d-8763-01f244eaf5f7":{"date":"3 Feb 2022","changes":{"title":"Hello, world! v2"}},"3d4a2ceb-e787-479e-8087-3aaaf0d16e61":{"date":"29 Jan 2022","changes":{"icon":"🚧"}},"678f83a8-230d-4c3c-92cf-b3cacafb0a0a":{"date":"22 Jan 2022","changes":{"public":false}}},"public":true,"properties":{"icon":"🎉","width":"full","typeface":"sans-serif"}}

Example output:

▼ {
"id": "8947b61f-4386-4ead-ab52-00200a446140"
"title": "Hello, world!"
"version": 4.1
"collaborators": ▶ [
"0": "ecb5c324-6e4c-4348-940d-19b9d9d42e78"
"1": "6a1401e9-a878-4eac-98fd-5eeabf414332"
"2": "8fa9f385-3e65-4899-a7d0-206b3f4b28bf"
"3": "328bd6d9-eb59-45df-a230-be32ebd003b7"
"4": "032bba7f-2ee5-4518-946f-955ada6fdc34"
"5": "09941c45-17b8-431d-a86c-d578484ec261"
][...]
"history": ▶ {
"597b41a1-1e31-4f7d-8763-01f244eaf5f7": ▶ {
"date": "3 Feb 2022"
"changes": ▶ {
"title": "Hello, world! v2"
}{...}
}{...}
"3d4a2ceb-e787-479e-8087-3aaaf0d16e61": ▶ {
"date": "29 Jan 2022"
"changes": ▶ {
"icon": "🚧"
}{...}
}{...}
"678f83a8-230d-4c3c-92cf-b3cacafb0a0a": ▶ {
"date": "22 Jan 2022"
"changes": ▶ {
"public": false
}{...}
}{...}
}{...}
"public": true
"properties": ▶ {
"icon": "🎉"
"width": "full"
"typeface": "sans-serif"
}{...}
}{...}