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

theme examples

Example Data:

(1) Basic (2) Diff (3) Circular (4) Tailwind