diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
index aac0e13b91..f15e0bd5a2 100644
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
@@ -260,287 +260,37 @@ exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
 </div>
 `;
 
-exports[`RunDataJsonSchema.vue > renders schema with spaces 1`] = `
-<div>
-  <div
-    class="_schemaWrapper_1mtap_1"
-  >
-    <div
-      class=""
-    >
-      <div
-        class="_schema_1mtap_1"
-      >
-        <div
-          class="_item_14xdy_1"
-        >
-          <!---->
-          <!---->
-          <!---->
-          <!---->
-          <div
-            class="_sub_14xdy_14"
-          >
-            <div
-              class="_item_14xdy_1"
-              style="transition-delay: 0s;"
-            >
-              <div
-                class="_pill_14xdy_51 _mappable_14xdy_70"
-                title="array"
-              >
-                <span
-                  class="_label_14xdy_89"
-                  data-depth="1"
-                  data-name="hello world"
-                  data-path="[\\"hello world\\"]"
-                  data-target="mappable"
-                  data-value="{{ $json[\\"hello world\\"] }}"
-                >
-                  <font-awesome-icon-stub
-                    icon="list"
-                    size="sm"
-                  />
-                  <!---->
-                  <span
-                    class=""
-                  >
-                    hello world
-                  </span>
-                </span>
-              </div>
-              <!---->
-              <input
-                checked="checked"
-                id="array-0-0"
-                type="checkbox"
-              />
-              <label
-                class="_toggle_14xdy_20"
-                for="array-0-0"
-              >
-                <font-awesome-icon-stub
-                  icon="angle-up"
-                />
-              </label>
-              <div
-                class="_sub_14xdy_14"
-              >
-                <div
-                  class="_item_14xdy_1"
-                  style="transition-delay: 0s;"
-                >
-                  <div
-                    class="_pill_14xdy_51 _mappable_14xdy_70"
-                    title="object"
-                  >
-                    <span
-                      class="_label_14xdy_89"
-                      data-depth="2"
-                      data-name="object[0]"
-                      data-path="[\\"hello world\\"][0]"
-                      data-target="mappable"
-                      data-value="{{ $json[\\"hello world\\"][0] }}"
-                    >
-                      <font-awesome-icon-stub
-                        icon="cube"
-                        size="sm"
-                      />
-                      <span>
-                        hello world
-                      </span>
-                      <span
-                        class="_arrayIndex_14xdy_94"
-                      >
-                        [0]
-                      </span>
-                    </span>
-                  </div>
-                  <!---->
-                  <input
-                    checked="checked"
-                    id="object-1-0"
-                    type="checkbox"
-                  />
-                  <label
-                    class="_toggle_14xdy_20"
-                    for="object-1-0"
-                  >
-                    <font-awesome-icon-stub
-                      icon="angle-up"
-                    />
-                  </label>
-                  <div
-                    class="_sub_14xdy_14"
-                  >
-                    <div
-                      class="_item_14xdy_1"
-                      style="transition-delay: 0s;"
-                    >
-                      <div
-                        class="_pill_14xdy_51 _mappable_14xdy_70"
-                        title="object"
-                      >
-                        <span
-                          class="_label_14xdy_89"
-                          data-depth="3"
-                          data-name="test"
-                          data-path="[\\"hello world\\"][0].test"
-                          data-target="mappable"
-                          data-value="{{ $json[\\"hello world\\"][0].test }}"
-                        >
-                          <font-awesome-icon-stub
-                            icon="cube"
-                            size="sm"
-                          />
-                          <!---->
-                          <span
-                            class=""
-                          >
-                            test
-                          </span>
-                        </span>
-                      </div>
-                      <!---->
-                      <input
-                        checked="checked"
-                        id="object-2-0"
-                        type="checkbox"
-                      />
-                      <label
-                        class="_toggle_14xdy_20"
-                        for="object-2-0"
-                      >
-                        <font-awesome-icon-stub
-                          icon="angle-up"
-                        />
-                      </label>
-                      <div
-                        class="_sub_14xdy_14"
-                      >
-                        <div
-                          class="_item_14xdy_1"
-                          style="transition-delay: 0s;"
-                        >
-                          <div
-                            class="_pill_14xdy_51 _mappable_14xdy_70"
-                            title="number"
-                          >
-                            <span
-                              class="_label_14xdy_89"
-                              data-depth="4"
-                              data-name="more to think about"
-                              data-path="[\\"hello world\\"][0].test[\\"more to think about\\"]"
-                              data-target="mappable"
-                              data-value="{{ $json[\\"hello world\\"][0].test[\\"more to think about\\"] }}"
-                            >
-                              <font-awesome-icon-stub
-                                icon="hashtag"
-                                size="sm"
-                              />
-                              <!---->
-                              <span
-                                class=""
-                              >
-                                more to think about
-                              </span>
-                            </span>
-                          </div>
-                          <span
-                            class="_text_14xdy_100"
-                          >
-                            1
-                          </span>
-                          <!---->
-                          <!---->
-                          <!---->
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="_item_14xdy_1"
-                      style="transition-delay: 0.033s;"
-                    >
-                      <div
-                        class="_pill_14xdy_51 _mappable_14xdy_70"
-                        title="string"
-                      >
-                        <span
-                          class="_label_14xdy_89"
-                          data-depth="3"
-                          data-name="test.how"
-                          data-path="[\\"hello world\\"][0][\\"test.how\\"]"
-                          data-target="mappable"
-                          data-value="{{ $json[\\"hello world\\"][0][\\"test.how\\"] }}"
-                        >
-                          <font-awesome-icon-stub
-                            icon="font"
-                            size="sm"
-                          />
-                          <!---->
-                          <span
-                            class=""
-                          >
-                            test.how
-                          </span>
-                        </span>
-                      </div>
-                      <span
-                        class="_text_14xdy_100"
-                      >
-                        ignore
-                      </span>
-                      <!---->
-                      <!---->
-                      <!---->
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="teleporter hidden"
-        data-v-d4e6e290=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
 exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
 <div>
   <div
-    class="_schemaWrapper_1mtap_1"
+    class="schemaWrapper"
   >
     <div
       class=""
     >
       <div
-        class="_schema_1mtap_1"
+        class="schema"
       >
         <div
-          class="_item_14xdy_1"
+          class="item"
         >
           <!---->
           <!---->
           <!---->
           <!---->
           <div
-            class="_sub_14xdy_14"
+            class="sub"
           >
             <div
-              class="_item_14xdy_1"
+              class="item"
               style="transition-delay: 0s;"
             >
               <div
-                class="_pill_14xdy_51 _mappable_14xdy_70"
+                class="pill mappable"
                 title="array"
               >
                 <span
-                  class="_label_14xdy_89"
+                  class="label"
                   data-depth="1"
                   data-name="hello world"
                   data-path="[\\"hello world\\"]"
@@ -566,7 +316,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                 type="checkbox"
               />
               <label
-                class="_toggle_14xdy_20"
+                class="toggle"
                 for="array-0-0"
               >
                 <font-awesome-icon-stub
@@ -574,18 +324,18 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                 />
               </label>
               <div
-                class="_sub_14xdy_14"
+                class="sub"
               >
                 <div
-                  class="_item_14xdy_1"
+                  class="item"
                   style="transition-delay: 0s;"
                 >
                   <div
-                    class="_pill_14xdy_51 _mappable_14xdy_70"
+                    class="pill mappable"
                     title="object"
                   >
                     <span
-                      class="_label_14xdy_89"
+                      class="label"
                       data-depth="2"
                       data-name="object[0]"
                       data-path="[\\"hello world\\"][0]"
@@ -600,7 +350,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                         hello world
                       </span>
                       <span
-                        class="_arrayIndex_14xdy_94"
+                        class="arrayIndex"
                       >
                         [0]
                       </span>
@@ -613,7 +363,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                     type="checkbox"
                   />
                   <label
-                    class="_toggle_14xdy_20"
+                    class="toggle"
                     for="object-1-0"
                   >
                     <font-awesome-icon-stub
@@ -621,18 +371,18 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                     />
                   </label>
                   <div
-                    class="_sub_14xdy_14"
+                    class="sub"
                   >
                     <div
-                      class="_item_14xdy_1"
+                      class="item"
                       style="transition-delay: 0s;"
                     >
                       <div
-                        class="_pill_14xdy_51 _mappable_14xdy_70"
+                        class="pill mappable"
                         title="object"
                       >
                         <span
-                          class="_label_14xdy_89"
+                          class="label"
                           data-depth="3"
                           data-name="test"
                           data-path="[\\"hello world\\"][0].test"
@@ -658,7 +408,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                         type="checkbox"
                       />
                       <label
-                        class="_toggle_14xdy_20"
+                        class="toggle"
                         for="object-2-0"
                       >
                         <font-awesome-icon-stub
@@ -666,18 +416,18 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                         />
                       </label>
                       <div
-                        class="_sub_14xdy_14"
+                        class="sub"
                       >
                         <div
-                          class="_item_14xdy_1"
+                          class="item"
                           style="transition-delay: 0s;"
                         >
                           <div
-                            class="_pill_14xdy_51 _mappable_14xdy_70"
+                            class="pill mappable"
                             title="number"
                           >
                             <span
-                              class="_label_14xdy_89"
+                              class="label"
                               data-depth="4"
                               data-name="more to think about"
                               data-path="[\\"hello world\\"][0].test[\\"more to think about\\"]"
@@ -697,7 +447,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                             </span>
                           </div>
                           <span
-                            class="_text_14xdy_100"
+                            class="text"
                           >
                             1
                           </span>
@@ -708,15 +458,15 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_item_14xdy_1"
+                      class="item"
                       style="transition-delay: 0.033s;"
                     >
                       <div
-                        class="_pill_14xdy_51 _mappable_14xdy_70"
+                        class="pill mappable"
                         title="string"
                       >
                         <span
-                          class="_label_14xdy_89"
+                          class="label"
                           data-depth="3"
                           data-name="test.how"
                           data-path="[\\"hello world\\"][0][\\"test.how\\"]"
@@ -736,7 +486,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                         </span>
                       </div>
                       <span
-                        class="_text_14xdy_100"
+                        class="text"
                       >
                         ignore
                       </span>