title
Json viz
div{ background:red; width:200px; height:200px; } span{ border:2px solid black; }
let json = `{ "config": { "comment": "Cold Dusts is made with été v1.0", "synth": { "note": 200, "type": "sine", "gain": 0.5, "dur": 0.1, "dyn": 0, "env": [ 0, 1, 0 ] }, "itv": 3200, "exe": null, "mode": "rec" }, "patterns": [ { "id": 0, "cycle": [ 1073, 1073 ], "mute": 0, "duration": "itv / 1", "note": 140, "pan": 0, "synth": { "type": "sine", "gain": 0.9, "dur": 0.8, "dyn": [ "note", 0.8, 1 ], "env": [ 1, 0 ] }, "beats": [ { "id": 1, "offset": 50 } ] }, { "id": 5, "cycle": [ 477, 590 ], "mute": 0, "duration": "itv * 2", "note": 330, "pan": 0.4, "synth": { "type": "sine_noise", "gain": 0.5, "dur": 0.9, "dyn": 0, "env": [ 1, 1, 1, 1, 0, 0.9, 0, 0.8, 0, 0.7, 0, 0.6, 0, 0.5, 0, 0.4, 0, 0.3, 0, 0.2, 0, 0.1, 0 ] }, "beats": [ { "id": 6, "offset": 18 } ] }, { "id": 8, "cycle": [ 1086, 1618 ], "mute": 0, "duration": "itv / 2", "note": 200300240, "pan": -0.4, "synth": { "type": "triangle_square", "gain": "sh([0.2])", "dur": 0.4, "dyn": 0, "env": [ 0.7, 1, 0.2, 0, 0, 0, 0.3, 0 ] }, "beats": [ { "id": 9, "offset": 50 } ] }, { "id": 18, "cycle": [ 7148, 7147 ], "mute": 0, "duration": "itv / 16", "note": "sh([200,200,200,200,200,300])", "pan": "r(-1,1)", "synth": { "type": "sh([\"sine\",\"sine_noise\",\"triangle\",\"square_sine\",\"sine_sawtooth\"])", "gain": "eucl(4,r(4,12),.3,0,$)", "dur": "sh([0.04,0.04,0.04,0.3,0.04,0.04,0.04,0.04])", "dyn": 0, "env": [ 0, 1, 0 ] }, "beats": [ { "id": 19, "offset": [ 10, 0 ] } ] }, { "id": 23, "cycle": [ 310, 614 ], "mute": 0, "duration": "itv * 2", "note": 1200, "pan": -1, "synth": { "type": "sine", "gain": 0.2, "dur": 0.04, "dyn": 0, "env": [ 1, 0 ] }, "beats": [ { "id": 24, "offset": 40.12 }, { "id": 25, "offset": 43.3 } ] }, { "id": 26, "cycle": [ 304, 1608 ], "mute": 0, "duration": "itv * 2", "note": [ 100, 94, 100, 100, 100, 100 ], "pan": 0.2, "synth": { "type": "sine", "gain": 0.8, "dur": 0.25, "dyn": 0, "env": [ 1, 1, 1, 0 ] }, "beats": [ { "id": 36, "offset": 0, "note": 72, "synth": { "dur": 0.7 } }, { "id": 28, "offset": 12.2, "synth": { "dur": 0.5 } }, { "id": 29, "offset": 46 }, { "id": 30, "offset": 49 }, { "id": 31, "offset": 52 }, { "id": 32, "offset": 56 } ] }, { "id": 37, "cycle": [ 1, 0 ], "mute": 0, "duration": "itv * 2", "note": 1200, "pan": "-.7", "synth": { "type": "noise", "gain": 0.5, "dur": 0.3, "dyn": 0, "env": [ 0, 1, 0 ] }, "beats": [ { "id": 38, "offset": 33.5, "synth": { "dur": 0.4, "env": [ 0.5, 1, 0.5 ] } }, { "id": 39, "offset": 37 }, { "id": 40, "offset": 74, "synth": { "dur": 0.8, "env": [ 0, 0.5, 0, 0, 0.8 ] } } ] } ] }` // create a container element where the JSON tree will be rendered const container = document.createElement('div'); document.body.appendChild(container) // recursively create elements to represent the JSON tree function createTree(json) { // create a container element for the current JSON branch const branch = document.createElement('div'); // iterate over the keys in the JSON object for (const key of Object.keys(json)) { // create an element to represent the current key const keyElement = document.createElement('span'); keyElement.innerText = key; // create an element to represent the current value const valueElement = document.createElement('div'); // if the value is an object, recursively create tree elements to represent it if (typeof json[key] === 'object') { valueElement.appendChild(createTree(json[key])); } else { // if the value is not an object, create a simple text element to represent it valueElement.innerText = json[key]; } // add the key and value elements to the branch container branch.appendChild(keyElement); branch.appendChild(valueElement); } // return the completed branch container return branch; } // render the JSON tree inside the container element container.appendChild(createTree(json));
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code