diff --git a/packages/utilities/collection/src/list-collection.ts b/packages/utilities/collection/src/list-collection.ts
index 41a611c816..2e18de5d11 100644
--- a/packages/utilities/collection/src/list-collection.ts
+++ b/packages/utilities/collection/src/list-collection.ts
@@ -274,6 +274,14 @@ export class ListCollection<T extends CollectionItem = CollectionItem> {
 
     this.items.splice(toIndex, 0, removed)
   }
+
+  json() {
+    return {
+      size: this.size,
+      first: this.firstValue,
+      last: this.lastValue,
+    }
+  }
 }
 
 const match = (label: string | null, query: string) => {
diff --git a/packages/utilities/collection/src/tree-collection.ts b/packages/utilities/collection/src/tree-collection.ts
index 89aca3456a..d2f0132cbe 100644
--- a/packages/utilities/collection/src/tree-collection.ts
+++ b/packages/utilities/collection/src/tree-collection.ts
@@ -197,6 +197,19 @@ export class TreeNode {
     parentNode?.insertAfter(target.value, node)
   }
 
+  json(): any {
+    const json: any = {
+      value: this.value,
+    }
+    if (this.hasChildNodes()) {
+      json.children = this.children.map((child) => child.json())
+    }
+    if (this.parentNode) {
+      json.parent = this.parentNode.value
+    }
+    return json
+  }
+
   walk(options: TreeWalkerOptions = {}): TreeWalker {
     return new TreeWalker(this, options)
   }
diff --git a/packages/utilities/collection/tests/tree-collection.test.ts b/packages/utilities/collection/tests/tree-collection.test.ts
index f71e57927e..023ff9efea 100644
--- a/packages/utilities/collection/tests/tree-collection.test.ts
+++ b/packages/utilities/collection/tests/tree-collection.test.ts
@@ -30,35 +30,62 @@ describe("tree collection", () => {
     rootNode.insertChild(new TreeNode({ value: "child3" }), "branch1")
 
     expect(rootNode).toMatchInlineSnapshot(`
-      {
+      TreeNode {
         "children": [
-          {
+          TreeNode {
             "children": [
-              {
-                "parent": "branch1",
+              TreeNode {
+                "children": [],
+                "data": undefined,
+                "expanded": false,
+                "parentNode": [Circular],
+                "selected": false,
                 "value": "child3",
               },
-              {
-                "parent": "branch1",
+              TreeNode {
+                "children": [],
+                "data": undefined,
+                "expanded": false,
+                "parentNode": [Circular],
+                "selected": false,
                 "value": "child1-1",
               },
-              {
-                "parent": "branch1",
+              TreeNode {
+                "children": [],
+                "data": undefined,
+                "expanded": false,
+                "parentNode": [Circular],
+                "selected": false,
                 "value": "child1-2",
               },
             ],
-            "parent": "root",
+            "data": undefined,
+            "expanded": true,
+            "parentNode": [Circular],
+            "selected": false,
             "value": "branch1",
           },
-          {
-            "parent": "root",
+          TreeNode {
+            "children": [],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": [Circular],
+            "selected": false,
             "value": "child1",
           },
-          {
-            "parent": "root",
+          TreeNode {
+            "children": [],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": [Circular],
+            "selected": false,
             "value": "child2",
           },
         ],
+        "data": undefined,
+        "expanded": false,
+        "parentNode": null,
+        "selected": false,
         "value": "root",
       }
     `)
@@ -80,26 +107,59 @@ describe("tree collection", () => {
 
     expect(rootNode.children).toMatchInlineSnapshot(`
       [
-        {
+        TreeNode {
           "children": [
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1-1",
             },
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1",
             },
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1-2",
             },
           ],
-          "parent": "root",
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "branch1",
         },
-        {
-          "parent": "root",
+        TreeNode {
+          "children": [],
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "child2",
         },
       ]
@@ -111,26 +171,73 @@ describe("tree collection", () => {
 
     expect(rootNode.children).toMatchInlineSnapshot(`
       [
-        {
+        TreeNode {
           "children": [
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1-2",
             },
           ],
-          "parent": "root",
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "branch1",
         },
-        {
-          "parent": "root",
+        TreeNode {
+          "children": [],
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "child1",
         },
-        {
-          "parent": "root",
+        TreeNode {
+          "children": [],
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "child1-1",
         },
-        {
-          "parent": "root",
+        TreeNode {
+          "children": [],
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "child2",
         },
       ]
@@ -142,30 +249,74 @@ describe("tree collection", () => {
 
     expect(rootNode.children).toMatchInlineSnapshot(`
       [
-        {
+        TreeNode {
           "children": [
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1-1",
             },
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1-2",
             },
-            {
-              "parent": "branch1",
+            TreeNode {
+              "children": [],
+              "data": undefined,
+              "expanded": false,
+              "parentNode": [Circular],
+              "selected": false,
               "value": "child1-3",
             },
           ],
-          "parent": "root",
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "branch1",
         },
-        {
-          "parent": "root",
+        TreeNode {
+          "children": [],
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "child1",
         },
-        {
-          "parent": "root",
+        TreeNode {
+          "children": [],
+          "data": undefined,
+          "expanded": false,
+          "parentNode": TreeNode {
+            "children": [Circular],
+            "data": undefined,
+            "expanded": false,
+            "parentNode": null,
+            "selected": false,
+            "value": "root",
+          },
+          "selected": false,
           "value": "child2",
         },
       ]
diff --git a/packages/utilities/stringify-state/src/index.ts b/packages/utilities/stringify-state/src/index.ts
index 4dc9e45377..983ff9f130 100644
--- a/packages/utilities/stringify-state/src/index.ts
+++ b/packages/utilities/stringify-state/src/index.ts
@@ -28,7 +28,11 @@ export function stringifyState(state: Dict, omit?: string[]) {
           return value.toString()
         }
 
-        if (value?.toJSON) {
+        if (typeof value?.json === "function") {
+          return value.json()
+        }
+
+        if (typeof value?.toJSON === "function") {
           return value.toJSON()
         }