svelte-tree-view
Copy-paste JSON objects to view them.
Available props
--tree-view-left-indent
--tree-view-li-line-height
--tree-view-font-family
--tree-view-font-size
--tree-view-key-margin-right
showLogButton
showCopyButton
treeNode
See Diff and Tailwind
recursionOpts
{ maxDepth: 16, omitKeys: [], stopCircularRecursion: false, isCircularNode(node, iteratedValues) { if (node.type === "object" || node.type === "array") { const existingNodeWithValue = iteratedValues.get(node.getValue()); if (existingNodeWithValue && node.id !== existingNodeWithValue.id) { node.circularOfId = existingNodeWithValue.id; return true; } iteratedValues.set(node.getValue(), node); } return false; }, shouldExpandNode(node) { return true; }, mapChildren(value, type, parent) { switch (type) { case "array": return value.map((v, i) => [i.toString(), v]); case "map": const entries = Array.from(value.entries()); return entries.map(([key, value2], i) => [ `[map entry ${i}]`, { "[key]": key, "[value]": value2 } ]); case "set": return Array.from(value.values()).map((v, i) => [`[set entry ${i}]`, v]); case "object": return Object.entries(value); default: return []; } }, }
valueFormatter
(val, node) => { switch (node.type) { case "array": return `${node.circularOfId ? "circular" : ""} [] ${val.length} items`; case "object": return `${node.circularOfId ? "circular" : ""} {} ${Object.keys(val).length} keys`; case "map": case "set": return `${node.circularOfId ? "circular" : ""} () ${val.size} entries`; case "date": return `${val.toISOString()}`; case "string": return `"${val}"`; case "number": return val; case "boolean": return val ? "true" : "false"; case "symbol": return String(val); default: return node.type; } }
theme
examples
{ scheme: 'monokai', base00: '#363755', // main blue bg base01: '#604D49', base02: '#6D5A55', base03: '#D1929B', // red text base04: '#B79F8D', base05: '#F9F8F2', base06: '#F7F4F1', base07: '#FAF8F5', base08: '#FA3E7E', // purple (null, undefined) base09: '#FD993C', // orange (number, boolean) base0A: '#F6BF81', base0B: '#B8E248', // main green text base0C: '#B4EFE4', base0D: '#85D9EF', // main blue text base0E: '#BE87FF', base0F: '#D6724C' }
Example Data:
basic
diff
circular
tailwind
(1) Basic
(2) Diff
(3) Circular
(4) Tailwind