From 4c4e84f3c62faeb7127562eb41edc3ea6111c9e4 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 2 Aug 2026 05:56:34 +0300
Subject: [PATCH 1/2] feat(vue-vuetify): improve mixed and additional property
 editors

---
 .../vue-vuetify/dev/views/ExampleView.vue     |   43 +-
 packages/vue-vuetify/package.json             |    1 +
 .../vue-vuetify/src/complex/MixedRenderer.vue | 1385 +++++++++++++++--
 .../components/AdditionalProperties.vue       |  500 ++++--
 packages/vue-vuetify/src/components/VPane.vue |   18 +
 .../src/components/VSplitpanes.sass           |  218 +++
 .../src/components/VSplitpanes.vue            |   27 +
 packages/vue-vuetify/src/components/index.ts  |    2 +
 packages/vue-vuetify/src/icons/fa.ts          |   17 +-
 packages/vue-vuetify/src/icons/icons.ts       |   15 +
 packages/vue-vuetify/src/icons/mdi.ts         |   17 +-
 packages/vue-vuetify/src/util/composition.ts  |    2 +-
 .../vue-vuetify/src/util/dynamicProperties.ts |  166 ++
 .../AdditionalPropertiesMixed.spec.ts         |   33 +
 .../tests/unit/util/dynamicProperties.spec.ts |  181 +++
 15 files changed, 2252 insertions(+), 373 deletions(-)
 create mode 100644 packages/vue-vuetify/src/components/VPane.vue
 create mode 100644 packages/vue-vuetify/src/components/VSplitpanes.sass
 create mode 100644 packages/vue-vuetify/src/components/VSplitpanes.vue
 create mode 100644 packages/vue-vuetify/src/components/index.ts
 create mode 100644 packages/vue-vuetify/src/util/dynamicProperties.ts
 create mode 100644 packages/vue-vuetify/tests/unit/additional/AdditionalPropertiesMixed.spec.ts
 create mode 100644 packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts

diff --git a/packages/vue-vuetify/dev/views/ExampleView.vue b/packages/vue-vuetify/dev/views/ExampleView.vue
index 653993197b..17269eadca 100644
--- a/packages/vue-vuetify/dev/views/ExampleView.vue
+++ b/packages/vue-vuetify/dev/views/ExampleView.vue
@@ -29,8 +29,7 @@ import examples from '../examples';
 import { useAppStore } from '../store';
 import { createAjv } from '../validate';
 
-import { Pane, Splitpanes } from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css';
+import { VPane, VSplitpanes } from '../../src/components';
 import { getCustomRenderersForExample } from '../renderers';
 
 const { extendedVuetifyRenderers } = await import('../../src');
@@ -332,12 +331,11 @@ const handleAction = (action: Action) => {
               </v-card-title>
               <v-divider class="mx-4"></v-divider>
               <div class="json-forms">
-                <splitpanes
-                  :class="['default-theme', 'splitpanes-vuetify']"
-                  :rtl="appStore.rtl"
+                <v-splitpanes
+                  class="splitpanes-vuetify"
                   v-if="appStore.layout === 'demo-and-data'"
                 >
-                  <pane min-size="20">
+                  <v-pane min-size="20">
                     <v-card>
                       <v-card-title>
                         <v-toolbar flat>
@@ -348,8 +346,8 @@ const handleAction = (action: Action) => {
                       <v-divider class="mx-4"></v-divider>
                       <example-form :state="state" @jsfchange="onChange" />
                     </v-card>
-                  </pane>
-                  <pane>
+                  </v-pane>
+                  <v-pane>
                     <v-card>
                       <v-card-title>
                         <v-toolbar flat>
@@ -389,8 +387,8 @@ const handleAction = (action: Action) => {
                         :editorBeforeMount="registerValidations"
                       ></monaco-editor>
                     </v-card>
-                  </pane>
-                </splitpanes>
+                  </v-pane>
+                </v-splitpanes>
 
                 <example-form :state="state" @jsfchange="onChange" v-else />
               </div>
@@ -509,28 +507,3 @@ const handleAction = (action: Action) => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-:deep(.default-theme) {
-  &.splitpanes--vertical > .splitpanes__splitter,
-  .splitpanes--vertical > .splitpanes__splitter {
-    border-left: 1px solid rgb(var(--v-theme-on-surface-variant));
-  }
-
-  &.splitpanes--horizontal > .splitpanes__splitter,
-  .splitpanes--horizontal > .splitpanes__splitter {
-    border-top: 1px solid rgb(var(--v-theme-on-surface-variant));
-  }
-
-  .splitpanes__splitter {
-    background-color: rgb(var(--v-theme-surface));
-    &:before,
-    &:after {
-      background-color: rgb(var(--v-theme-on-surface-variant));
-    }
-    &:hover:before,
-    &:hover:after {
-      background-color: rgb(var(--v-theme-on-surface-variant));
-    }
-  }
-}
-</style>
diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index 7c92412a2f..a26fc50f1a 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -68,6 +68,7 @@
     "dayjs": "^1.10.6",
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
+    "splitpanes": "^3.1.5",
     "vue": "^3.5.0",
     "vuetify": "^3.11.0"
   },
diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 5f572a7f17..4888a06fe6 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="prefixed-input" v-if="control.visible">
-    <template v-if="valueType === 'array' || valueType === 'object'">
-      <v-expansion-panels accordion flat v-model="currentlyExpanded">
+  <div v-if="control.visible" class="mixed-renderer">
+    <template v-if="showTreeView">
+      <v-expansion-panels v-model="currentlyExpanded" flat>
         <v-expansion-panel>
           <v-expansion-panel-title class="py-0 px-0">
             <v-container class="py-0">
               <v-row>
-                <v-col align-self="center" class="pl-0"
-                  ><v-select
+                <v-col align-self="center" class="pl-0">
+                  <v-select
                     v-if="mixedRenderInfos"
                     v-disabled-icon-focus
                     :id="control.id + '-input-selector'"
@@ -18,86 +18,258 @@
                     :error-messages="control.errors"
                     :items="mixedRenderInfos"
                     :clearable="isControlEditable(control)"
-                    @update:model-value="handleSelectChange"
                     :item-title="
                       (item: SchemaRenderInfo) => t(item.label, item.label)
                     "
                     item-value="index"
                     v-model="selectedIndex"
                     v-bind="vuetifyProps('v-select')"
+                    @update:model-value="handleSelectChange"
                     @click.stop
                     @focus="handleFocus"
                     @blur="handleBlur"
-                  >
-                  </v-select
-                ></v-col>
-                <v-col cols="3" align-self="center" class="text-truncate">{{
-                  computedLabel
-                }}</v-col>
+                  />
+                </v-col>
+                <v-col cols="3" align-self="center" class="text-truncate">
+                  {{ computedLabel }}
+                </v-col>
               </v-row>
             </v-container>
           </v-expansion-panel-title>
+
           <v-expansion-panel-text>
-            <dispatch-renderer
-              class="input"
-              v-if="schema && !(nullable && control.data === null)"
-              :schema="schema"
-              :uischema="uischema"
-              :path="path"
-              :renderers="control.renderers"
-              :cells="control.cells"
-              :enabled="control.enabled"
-              :readonly="control.readonly"
-            >
-            </dispatch-renderer>
+            <v-container fluid class="mixed-tree-container pa-0">
+              <v-splitpanes class="mixed-splitpanes">
+                <v-pane min-size="20" size="25">
+                  <div class="mixed-tree-pane">
+                    <v-text-field
+                      v-model="treeSearch"
+                      class="mixed-tree-search"
+                      density="compact"
+                      hide-details
+                      clearable
+                      label="Search"
+                      :prepend-inner-icon="icons.current.value.search"
+                      v-bind="vuetifyProps('v-text-field')"
+                    />
+                    <v-treeview
+                      v-model:opened="openedNodes"
+                      v-model:activated="activatedTreeNodes"
+                      :items="treeNodes"
+                      :search="treeSearch"
+                      :collapse-icon="icons.current.value.treeCollapse"
+                      :expand-icon="icons.current.value.treeExpand"
+                      activatable
+                      color="primary"
+                      density="compact"
+                      item-children="children"
+                      item-title="title"
+                      item-value="nodeId"
+                      class="mixed-tree"
+                      open-on-click
+                    >
+                      <template #prepend="{ item }">
+                        <v-icon
+                          size="small"
+                          :icon="getTypeIcon(item.jsonType)"
+                        />
+                      </template>
+
+                      <template #title="{ item }">
+                        <v-text-field
+                          v-if="renamingNodeId === item.nodeId"
+                          v-model="renameValue"
+                          class="mixed-rename-input"
+                          density="compact"
+                          hide-details
+                          autofocus
+                          :error="Boolean(renameError)"
+                          :title="renameError ?? undefined"
+                          v-bind="vuetifyProps('v-text-field')"
+                          @click.stop
+                          @keydown.stop.enter="commitRename(item)"
+                          @keydown.stop.esc="cancelRename"
+                          @blur="commitRename(item)"
+                        />
+                        <span v-else class="mixed-tree-title">
+                          {{ item.title }}
+                        </span>
+                      </template>
+
+                      <template #append="{ item }">
+                        <div class="mixed-tree-actions">
+                          <v-tooltip
+                            v-if="item.control.path === control.path"
+                            location="top"
+                          >
+                            <template #activator="{ props }">
+                              <v-btn
+                                v-bind="props"
+                                class="mixed-tree-action"
+                                :icon="
+                                  showPrimitivesInTree
+                                    ? icons.current.value.visibilityOn
+                                    : icons.current.value.visibilityOff
+                                "
+                                variant="text"
+                                size="x-small"
+                                @click.stop="toggleShowPrimitives"
+                              />
+                            </template>
+                            <span>
+                              {{
+                                showPrimitivesInTree
+                                  ? 'Hide primitives'
+                                  : 'Show primitives'
+                              }}
+                            </span>
+                          </v-tooltip>
+                          <template v-else-if="control.enabled">
+                            <v-tooltip v-if="item.canRename" location="top">
+                              <template #activator="{ props }">
+                                <v-btn
+                                  v-bind="props"
+                                  class="mixed-tree-action mixed-hover-action"
+                                  :icon="icons.current.value.itemEdit"
+                                  variant="text"
+                                  size="x-small"
+                                  @click.stop="startRename(item)"
+                                />
+                              </template>
+                              <span>Rename</span>
+                            </v-tooltip>
+                            <v-tooltip v-if="item.canDelete" location="top">
+                              <template #activator="{ props }">
+                                <v-btn
+                                  v-bind="props"
+                                  class="mixed-tree-action mixed-hover-action"
+                                  :icon="icons.current.value.itemDelete"
+                                  variant="text"
+                                  size="x-small"
+                                  color="error"
+                                  @click.stop="deleteNode(item)"
+                                />
+                              </template>
+                              <span>Delete</span>
+                            </v-tooltip>
+                          </template>
+                        </div>
+                      </template>
+                    </v-treeview>
+                  </div>
+                </v-pane>
+
+                <v-pane min-size="35" size="75">
+                  <div class="mixed-detail-pane">
+                    <dispatch-renderer
+                      v-if="selectedNode"
+                      :schema="selectedNode.control.schema"
+                      :uischema="selectedNode.control.uischema"
+                      :path="selectedNode.control.path"
+                      :renderers="control.renderers"
+                      :cells="control.cells"
+                      :enabled="selectedNode.control.enabled"
+                      :readonly="selectedNode.control.readonly"
+                    />
+                  </div>
+                </v-pane>
+              </v-splitpanes>
+            </v-container>
           </v-expansion-panel-text>
         </v-expansion-panel>
       </v-expansion-panels>
     </template>
+
+    <template v-else-if="isNestedComplexType">
+      <div class="mixed-nested-complex">
+        <v-select
+          class="select"
+          v-if="mixedRenderInfos"
+          v-disabled-icon-focus
+          :id="control.id + '-input-selector'"
+          :disabled="!control.enabled"
+          :readonly="control.readonly"
+          :label="computedLabel"
+          :required="control.required"
+          :error-messages="control.errors"
+          :items="mixedRenderInfos"
+          :clearable="isControlEditable(control)"
+          :item-title="(item: SchemaRenderInfo) => t(item.label, item.label)"
+          item-value="index"
+          v-model="selectedIndex"
+          v-bind="vuetifyProps('v-select')"
+          @update:model-value="handleSelectChange"
+          @click.stop
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+        <v-tooltip location="top">
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              class="mixed-navigate-button"
+              :icon="icons.current.value.visibilityOn"
+              variant="text"
+              color="primary"
+              :disabled="!navigationContext"
+              @click="selectCurrentPath"
+            />
+          </template>
+          <span>View {{ computedLabel }}</span>
+        </v-tooltip>
+      </div>
+    </template>
+
     <template v-else>
-      <v-select
-        class="select"
-        v-if="mixedRenderInfos"
-        v-disabled-icon-focus
-        :id="control.id + '-input-selector'"
-        :disabled="!control.enabled"
-        :readonly="control.readonly"
-        :label="computedLabel"
-        :required="control.required"
-        :error-messages="control.errors"
-        :items="mixedRenderInfos"
-        :clearable="isControlEditable(control)"
-        @update:model-value="handleSelectChange"
-        :item-title="(item: SchemaRenderInfo) => t(item.label, item.label)"
-        item-value="index"
-        v-model="selectedIndex"
-        v-bind="vuetifyProps('v-select')"
-        @click.stop
-        @focus="handleFocus"
-        @blur="handleBlur"
-      >
-      </v-select>
-      <dispatch-renderer
-        class="input"
-        v-if="schema && !(nullable && control.data === null)"
-        :schema="schema"
-        :uischema="uischema"
-        :path="path"
-        :renderers="control.renderers"
-        :cells="control.cells"
-        :enabled="control.enabled"
-        :readonly="control.readonly"
-      >
-      </dispatch-renderer>
+      <div class="mixed-primitive">
+        <v-select
+          class="select"
+          v-if="mixedRenderInfos"
+          v-disabled-icon-focus
+          :id="control.id + '-input-selector'"
+          :disabled="!control.enabled"
+          :readonly="control.readonly"
+          :label="computedLabel"
+          :required="control.required"
+          :error-messages="control.errors"
+          :items="mixedRenderInfos"
+          :clearable="isControlEditable(control)"
+          :item-title="(item: SchemaRenderInfo) => t(item.label, item.label)"
+          item-value="index"
+          v-model="selectedIndex"
+          v-bind="vuetifyProps('v-select')"
+          @update:model-value="handleSelectChange"
+          @click.stop
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+        <dispatch-renderer
+          class="input"
+          v-if="schema && uischema && !(nullable && control.data === null)"
+          :schema="schema"
+          :uischema="uischema"
+          :path="path"
+          :renderers="control.renderers"
+          :cells="control.cells"
+          :enabled="control.enabled"
+          :readonly="control.readonly"
+        />
+      </div>
     </template>
   </div>
 </template>
 
 <script lang="ts">
+import { AdditionalPropertiesTranslationEnum } from '@/i18n';
+import { additionalPropertiesDefaultTranslations } from '@/i18n/additionalPropertiesTranslations';
+import { getAdditionalPropertiesTranslations } from '@/i18n/i18nUtil';
 import {
+  Resolve,
   createControlElement,
   createDefaultValue,
   findUISchema,
+  getI18nKeyPrefix,
+  resolveData,
   type ControlElement,
   type JsonFormsUISchemaRegistryEntry,
   type JsonSchema,
@@ -107,23 +279,52 @@ import {
 import {
   DispatchRenderer,
   rendererProps,
+  useAjv,
   useJsonForms,
   useJsonFormsControl,
   useTranslator,
   type RendererProps,
 } from '@jsonforms/vue';
-import { computed, defineComponent, provide, ref, watch } from 'vue';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+import set from 'lodash/set';
 import {
+  computed,
+  defineComponent,
+  inject,
+  provide,
+  ref,
+  unref,
+  watch,
+  type DefineComponent,
+  type InjectionKey,
+} from 'vue';
+import {
+  VBtn,
   VCol,
   VContainer,
   VExpansionPanel,
-  VExpansionPanels,
   VExpansionPanelText,
   VExpansionPanelTitle,
+  VExpansionPanels,
+  VIcon,
   VRow,
   VSelect,
+  VTextField,
+  VTooltip,
+  VTreeview,
 } from 'vuetify/components';
+import { VPane, VSplitpanes } from '../components';
 import { DisabledIconFocus } from '../controls';
+import type { IconValue } from '../icons';
+import {
+  composePropertyPath,
+  findPropertySchema,
+  getDynamicPropertyNameErrorMessage,
+  getPropertyNameSchema,
+  validateDynamicPropertyName,
+} from '../util/dynamicProperties';
 import {
   IsDynamicPropertyContext,
   isControlEditable,
@@ -131,10 +332,25 @@ import {
   useIcons,
   useVuetifyControl,
 } from '../util';
-import cloneDeep from 'lodash/cloneDeep';
-import set from 'lodash/set';
-import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
+
+type JsonDataType =
+  | 'array'
+  | 'boolean'
+  | 'integer'
+  | 'null'
+  | 'number'
+  | 'object'
+  | 'string';
+
+const JSON_TYPES: JsonDataType[] = [
+  'array',
+  'boolean',
+  'integer',
+  'null',
+  'number',
+  'object',
+  'string',
+];
 
 interface SchemaRenderInfo {
   schema: JsonSchema;
@@ -143,8 +359,48 @@ interface SchemaRenderInfo {
   label: string;
 }
 
-function cleanSchema(schema: JsonSchema) {
-  // Define valid keywords for each JSON Schema type
+interface TreeNodeControl {
+  id: string;
+  schema: JsonSchema;
+  uischema: ControlElement;
+  path: string;
+  label: string;
+  required: boolean;
+  enabled: boolean;
+  readonly: boolean;
+}
+
+interface MixedTreeNode {
+  nodeId: string;
+  title: string;
+  jsonType: JsonDataType;
+  label: string;
+  canRename: boolean;
+  canDelete: boolean;
+  control: TreeNodeControl;
+  children?: MixedTreeNode[];
+}
+
+interface NavigationContext {
+  selectPath: (path: string) => void;
+}
+
+const NavigationContextSymbol: InjectionKey<NavigationContext> = Symbol.for(
+  'jsonforms-vue-vuetify:MixedRendererNavigationContext',
+);
+
+const ROOT_TREE_NODE_ID = '$root';
+const toTreeNodeId = (path: string) =>
+  path ? `$path:${path}` : ROOT_TREE_NODE_ID;
+
+function resolveSchema(schema: JsonSchema, rootSchema: JsonSchema): JsonSchema {
+  if (typeof schema?.$ref === 'string') {
+    return Resolve.schema(rootSchema, schema.$ref, rootSchema) ?? schema;
+  }
+  return schema;
+}
+
+function cleanSchema(schema: JsonSchema): JsonSchema {
   const validKeywords: Record<string, string[]> = {
     array: ['items', 'minItems', 'maxItems', 'uniqueItems', 'contains'],
     object: [
@@ -176,19 +432,16 @@ function cleanSchema(schema: JsonSchema) {
     null: [],
   };
 
-  // Function to remove invalid keywords based on type
-  function clean(schema: JsonSchema) {
-    for (const validType in validKeywords) {
-      if (validType !== schema.type) {
-        const keywords = validKeywords[validType];
-        keywords.forEach((key) => {
-          delete (schema as any)[key];
-        });
-      }
+  const schemaType = schema.type as string;
+  for (const validType in validKeywords) {
+    if (validType !== schemaType) {
+      validKeywords[validType].forEach((key) => {
+        delete (schema as any)[key];
+      });
     }
   }
 
-  return clean(schema);
+  return schema;
 }
 
 function getSchemaTypesAsArray(schema: JsonSchema): string[] {
@@ -205,13 +458,11 @@ function getSchemaTypesAsArray(schema: JsonSchema): string[] {
       schema.enum.map((value) => getJsonDataType(value)),
     );
     if (!enumTypes.has(null)) {
-      // return only if we were able to determine all types, otherwise return the default
       return Array.from(enumTypes).filter((type) => type !== null) as string[];
     }
   }
 
-  // return any
-  return ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'];
+  return [...JSON_TYPES];
 }
 
 const createMixedRenderInfos = (
@@ -223,6 +474,7 @@ const createMixedRenderInfos = (
   uischemas: JsonFormsUISchemaRegistryEntry[],
 ): SchemaRenderInfo[] => {
   let resolvedSchemas: JsonSchema[] = [];
+  schema = resolveSchema(schema, rootSchema);
 
   if (typeof schema.type === 'string') {
     resolvedSchemas.push(schema);
@@ -242,42 +494,30 @@ const createMixedRenderInfos = (
     });
   }
 
-  return resolvedSchemas.map((resolvedSchema) => {
+  return resolvedSchemas.map((sourceSchema) => {
+    const resolvedSchema = cloneDeep(sourceSchema);
     if (resolvedSchema.type === 'array') {
       resolvedSchema.items = resolvedSchema.items ?? {};
+      resolvedSchema.items = cloneDeep(
+        resolveSchema(resolvedSchema.items as JsonSchema, rootSchema),
+      );
+
       if ((resolvedSchema.items as any) === true) {
         resolvedSchema.items = {
-          type: [
-            'array',
-            'boolean',
-            'integer',
-            'null',
-            'number',
-            'object',
-            'string',
-          ],
+          type: [...JSON_TYPES],
         };
       } else if (
         typeof (resolvedSchema.items as JsonSchema7).type !== 'string' &&
         !Array.isArray((resolvedSchema.items as JsonSchema7).type)
       ) {
-        (resolvedSchema.items as JsonSchema7).type = [
-          'array',
-          'boolean',
-          'integer',
-          'null',
-          'number',
-          'object',
-          'string',
-        ];
+        (resolvedSchema.items as JsonSchema7).type = [...JSON_TYPES];
       }
     }
 
-    // help determining the correct renders by removing keywords not appropriate for the type
-    cleanSchema(resolvedSchema);
+    let cleanedSchema = cleanSchema(cloneDeep(resolvedSchema));
 
     const detailsForSchema = control.options
-      ? control.options[resolvedSchema.type + '-detail']
+      ? control.options[cleanedSchema.type + '-detail']
       : undefined;
 
     const schemaControl = detailsForSchema
@@ -287,31 +527,27 @@ const createMixedRenderInfos = (
         }
       : control;
 
-    const _resolvedSchema = resolvedSchema;
-
     if (
       control.scope &&
-      (resolvedSchema.type === 'object' || resolvedSchema.type === 'array')
+      (cleanedSchema.type === 'object' || cleanedSchema.type === 'array')
     ) {
       const segments = control.scope.split('/');
       const startFromRoot = segments[0] === '#' || segments[0] === '';
       const startIndex = startFromRoot ? 1 : 0;
 
       if (segments.length > startIndex) {
-        // for object schema the object renderer expects to get the parent schema
         const schemaPath = segments.slice(startIndex).join('.');
         if (schemaPath && isEqual(get(parentSchema, schemaPath), schema)) {
-          // double check that the schema that we are going to replace is the schema that is with the mixed type
           const newSchema = cloneDeep(parentSchema);
-          set(newSchema, schemaPath, resolvedSchema);
-          resolvedSchema = newSchema;
+          set(newSchema, schemaPath, cleanedSchema);
+          cleanedSchema = newSchema;
         }
       }
     }
 
     const uischema = findUISchema(
       uischemas,
-      resolvedSchema,
+      cleanedSchema,
       control.scope,
       path,
       () => createControlElement(control.scope ?? '#'),
@@ -320,15 +556,15 @@ const createMixedRenderInfos = (
     );
 
     return {
-      schema: resolvedSchema,
-      resolvedSchema: _resolvedSchema,
+      schema: cleanedSchema,
+      resolvedSchema,
       uischema,
-      label: `${_resolvedSchema.type}`,
+      label: `${resolvedSchema.type}`,
     };
   });
 };
 
-export function getJsonDataType(value: any): string | null {
+export function getJsonDataType(value: any): JsonDataType | null {
   if (typeof value === 'string') {
     return 'string';
   } else if (typeof value === 'number') {
@@ -346,18 +582,391 @@ export function getJsonDataType(value: any): string | null {
   return null;
 }
 
+function schemaSupportsInputType(
+  schemaType: JsonSchema['type'] | undefined,
+  dataType: JsonDataType | null,
+): boolean {
+  if (!dataType || typeof schemaType !== 'string') {
+    return false;
+  }
+
+  return (
+    schemaType === dataType ||
+    (schemaType === 'number' && dataType === 'integer')
+  );
+}
+
+function getArrayItemSchema(
+  parentSchema: JsonSchema,
+  index: number,
+  rootSchema: JsonSchema,
+): JsonSchema | undefined {
+  if (!parentSchema.items) {
+    return undefined;
+  }
+
+  let itemSchema: JsonSchema | undefined;
+  if (Array.isArray(parentSchema.items)) {
+    if (index < parentSchema.items.length) {
+      itemSchema = parentSchema.items[index];
+    } else if (parentSchema.additionalItems) {
+      itemSchema =
+        typeof parentSchema.additionalItems === 'object'
+          ? parentSchema.additionalItems
+          : undefined;
+    }
+  } else {
+    itemSchema = parentSchema.items as JsonSchema;
+  }
+
+  return itemSchema ? resolveSchema(itemSchema, rootSchema) : undefined;
+}
+
+function prepareObjectSchema(schema: JsonSchema): JsonSchema {
+  const objectSchema = cleanSchema(cloneDeep({ ...schema, type: 'object' }));
+  objectSchema.additionalProperties =
+    objectSchema.additionalProperties !== false
+      ? (objectSchema.additionalProperties ?? true)
+      : false;
+  return objectSchema;
+}
+
+function prepareArraySchema(
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+): JsonSchema {
+  const arraySchema = cleanSchema(cloneDeep({ ...schema, type: 'array' }));
+  arraySchema.items = arraySchema.items ?? {};
+  arraySchema.items = cloneDeep(
+    resolveSchema(arraySchema.items as JsonSchema, rootSchema),
+  );
+
+  if ((arraySchema.items as any) === true) {
+    arraySchema.items = {
+      type: [...JSON_TYPES],
+    };
+  } else if (
+    typeof (arraySchema.items as JsonSchema7).type !== 'string' &&
+    !Array.isArray((arraySchema.items as JsonSchema7).type)
+  ) {
+    (arraySchema.items as JsonSchema7).type = [...JSON_TYPES];
+  }
+
+  return arraySchema;
+}
+
+function prepareChildSchema(
+  childType: JsonDataType,
+  currentSchema: JsonSchema,
+  key: string,
+  index: number | null,
+  rootSchema: JsonSchema,
+): JsonSchema {
+  let childSchema: JsonSchema | undefined;
+
+  if (index !== null) {
+    childSchema = getArrayItemSchema(currentSchema, index, rootSchema);
+    childSchema = childSchema
+      ? { ...childSchema, title: `Item ${index}` }
+      : {
+          type: [...JSON_TYPES],
+          title: `Item ${index}`,
+        };
+  } else {
+    childSchema = findPropertySchema(currentSchema, key, rootSchema);
+    childSchema = childSchema
+      ? { ...childSchema, title: key }
+      : {
+          type: [...JSON_TYPES],
+          title: key,
+        };
+  }
+
+  if (
+    childType !== 'object' &&
+    childType !== 'array' &&
+    (!childSchema.type || (childSchema.type as any) === true)
+  ) {
+    childSchema.type = [...JSON_TYPES];
+  }
+
+  if (childType === 'object') {
+    return prepareObjectSchema(childSchema);
+  }
+
+  if (childType === 'array') {
+    return prepareArraySchema(childSchema, rootSchema);
+  }
+
+  return childSchema;
+}
+
+function createFallbackChildSchema(title: string): JsonSchema {
+  return {
+    type: [...JSON_TYPES],
+    title,
+  };
+}
+
+function getSchemaDefaultType(schema: JsonSchema): JsonDataType {
+  const schemaTypes = getSchemaTypesAsArray(schema);
+  const firstType =
+    schemaTypes.find((type) => type !== 'null') ?? schemaTypes[0];
+  return (firstType ?? 'object') as JsonDataType;
+}
+
+function createTreeNodeControl(
+  schema: JsonSchema,
+  path: string,
+  label: string,
+  enabled: boolean,
+  readonly: boolean,
+): TreeNodeControl {
+  return {
+    id: path,
+    schema,
+    uischema: createControlElement('#'),
+    path,
+    label,
+    required: false,
+    enabled,
+    readonly,
+  };
+}
+
+function withoutEmptyChildren(node: MixedTreeNode): MixedTreeNode {
+  const children = node.children?.map(withoutEmptyChildren) ?? [];
+  if (children.length === 0) {
+    const rest = { ...node };
+    delete rest.children;
+    return rest;
+  }
+  return {
+    ...node,
+    children,
+  };
+}
+
+function getDisplayTitle(label: string, type: JsonDataType): string {
+  if (label) {
+    return label;
+  }
+  return type === 'array' ? '[]' : '{}';
+}
+
+function isDynamicProperty(parentSchema: JsonSchema, key: string): boolean {
+  return !parentSchema.properties?.[key];
+}
+
+function buildTreeFromData(
+  data: any,
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  path: string,
+  label: string,
+  enabled: boolean,
+  readonly: boolean,
+  showPrimitives: boolean,
+): MixedTreeNode[] {
+  const dataType = getJsonDataType(data);
+  if (dataType !== 'object' && dataType !== 'array') {
+    return [];
+  }
+
+  const nodes: MixedTreeNode[] = [];
+
+  function traverse(
+    value: any,
+    currentPath: string,
+    currentLabel: string,
+    currentSchema: JsonSchema,
+    children: MixedTreeNode[],
+    canRename = false,
+    canDelete = false,
+  ) {
+    const type = getJsonDataType(value);
+
+    if (type === 'object') {
+      const objectSchema = prepareObjectSchema(currentSchema);
+      const nodeId = toTreeNodeId(currentPath);
+      const node: MixedTreeNode = {
+        nodeId,
+        title: getDisplayTitle(currentLabel, type),
+        jsonType: type,
+        label: currentLabel,
+        canRename,
+        canDelete,
+        control: createTreeNodeControl(
+          objectSchema,
+          currentPath,
+          currentLabel,
+          enabled,
+          readonly,
+        ),
+        children: [],
+      };
+      children.push(node);
+
+      Object.keys(value).forEach((key) => {
+        const childValue = value[key];
+        const childPath = composePropertyPath(currentPath, key);
+        const rawChildType = getJsonDataType(childValue);
+        const childCanRename = isDynamicProperty(currentSchema, key);
+        const childCanDelete = true;
+        const initialChildSchema =
+          findPropertySchema(currentSchema, key, rootSchema) ??
+          createFallbackChildSchema(key);
+        const childType =
+          rawChildType ?? getSchemaDefaultType(initialChildSchema);
+        const childSchema = prepareChildSchema(
+          childType,
+          currentSchema,
+          key,
+          null,
+          rootSchema,
+        );
+
+        if (childType === 'object' || childType === 'array') {
+          traverse(
+            childValue ?? (childType === 'array' ? [] : {}),
+            childPath,
+            key,
+            childSchema,
+            node.children!,
+            childCanRename,
+            childCanDelete,
+          );
+        } else if (showPrimitives) {
+          const nodeId = toTreeNodeId(childPath);
+          node.children!.push({
+            nodeId,
+            title: key,
+            jsonType: childType,
+            label: key,
+            canRename: childCanRename,
+            canDelete: childCanDelete,
+            control: createTreeNodeControl(
+              childSchema,
+              childPath,
+              key,
+              enabled,
+              readonly,
+            ),
+            children: [],
+          });
+        }
+      });
+    } else if (type === 'array') {
+      const arraySchema = prepareArraySchema(currentSchema, rootSchema);
+      const nodeId = toTreeNodeId(currentPath);
+      const node: MixedTreeNode = {
+        nodeId,
+        title: getDisplayTitle(currentLabel, type),
+        jsonType: type,
+        label: currentLabel,
+        canRename,
+        canDelete,
+        control: createTreeNodeControl(
+          arraySchema,
+          currentPath,
+          currentLabel,
+          enabled,
+          readonly,
+        ),
+        children: [],
+      };
+      children.push(node);
+
+      value.forEach((childValue: any, index: number) => {
+        const childType = getJsonDataType(childValue);
+        const childPath = composePropertyPath(currentPath, `${index}`);
+        const childSchema = prepareChildSchema(
+          childType ?? 'object',
+          currentSchema,
+          '',
+          index,
+          rootSchema,
+        );
+        const resolvedChildType =
+          childType ?? getSchemaDefaultType(childSchema);
+        const childLabel = `Item ${index}`;
+        if (resolvedChildType === 'object' || resolvedChildType === 'array') {
+          traverse(
+            childValue ?? (resolvedChildType === 'array' ? [] : {}),
+            childPath,
+            childLabel,
+            childSchema,
+            node.children!,
+            false,
+            true,
+          );
+        } else if (showPrimitives) {
+          const nodeId = toTreeNodeId(childPath);
+          node.children!.push({
+            nodeId,
+            title: childLabel,
+            jsonType: resolvedChildType,
+            label: childLabel,
+            canRename: false,
+            canDelete: true,
+            control: createTreeNodeControl(
+              childSchema,
+              childPath,
+              childLabel,
+              enabled,
+              readonly,
+            ),
+            children: [],
+          });
+        }
+      });
+    }
+  }
+
+  traverse(data, path, label, resolveSchema(schema, rootSchema), nodes);
+
+  return nodes.map(withoutEmptyChildren);
+}
+
+function flattenTree(nodes: MixedTreeNode[]): MixedTreeNode[] {
+  return nodes.flatMap((node) => [node, ...flattenTree(node.children ?? [])]);
+}
+
+function findNodeByPath(
+  nodes: MixedTreeNode[],
+  targetPath: string,
+): MixedTreeNode | undefined {
+  for (const node of nodes) {
+    if (node.nodeId === targetPath) {
+      return node;
+    }
+    const child = findNodeByPath(node.children ?? [], targetPath);
+    if (child) {
+      return child;
+    }
+  }
+  return undefined;
+}
+
 const controlRenderer = defineComponent({
   name: 'mixed-renderer',
   components: {
     DispatchRenderer,
-    VSelect,
+    VBtn,
+    VCol,
+    VContainer,
     VExpansionPanel,
     VExpansionPanels,
     VExpansionPanelTitle,
     VExpansionPanelText,
-    VContainer,
+    VIcon,
     VRow,
-    VCol,
+    VSelect,
+    VTextField,
+    VTreeview,
+    VPane,
+    VSplitpanes,
+    VTooltip,
   },
   directives: {
     DisabledIconFocus,
@@ -369,26 +978,33 @@ const controlRenderer = defineComponent({
     const path = props.path;
     const parentSchema = props.schema;
     const input = useJsonFormsControl(props);
-
-    const control = input.control.value;
-    const valueType = ref(getJsonDataType(control.data));
+    const vuetifyControl = useCombinatorTranslations(useVuetifyControl(input));
+    const valueType = ref(getJsonDataType(input.control.value.data));
     const jsonforms = useJsonForms();
+    const ajv = useAjv();
     const icons = useIcons();
-
-    watch(
-      () => input.control.value.data,
-      (newValue, oldValue) => {
-        if (newValue !== oldValue) {
-          const oldValueType = valueType.value;
-          valueType.value = getJsonDataType(newValue);
-
-          if (oldValueType !== valueType.value) {
-            // adjust the index
-            selectedIndex.value = matchingSchema.value?.index;
-          }
-        }
-      },
-      { deep: false },
+    const t = useTranslator();
+    const navigationContext = inject(NavigationContextSymbol, undefined);
+    const isRoot = !navigationContext;
+    const activeNodeId = ref(toTreeNodeId(input.control.value.path));
+    const openedNodes = ref<string[]>([]);
+    const treeSearch = ref('');
+    const currentlyExpanded = ref<number | null>(0);
+    const showPrimitivesInTree = ref(false);
+    const renamingNodeId = ref<string | null>(null);
+    const renameValue = ref('');
+    const renameError = ref<string | null>(null);
+    const i18nAdditionalPropertiesPrefix = getI18nKeyPrefix(
+      input.control.value.schema,
+      input.control.value.uischema,
+      input.control.value.path + '.additionalProperties',
+    );
+    const renameTranslations = getAdditionalPropertiesTranslations(
+      t.value,
+      additionalPropertiesDefaultTranslations,
+      i18nAdditionalPropertiesPrefix,
+      input.control.value.label,
+      renameValue,
     );
 
     const mixedRenderInfos = computed<
@@ -396,8 +1012,8 @@ const controlRenderer = defineComponent({
         index: number;
       })[]
     >(() => {
+      const control = input.control.value;
       const result = createMixedRenderInfos(
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         parentSchema,
         control.schema,
         control.rootSchema,
@@ -408,7 +1024,7 @@ const controlRenderer = defineComponent({
 
       return result
         .filter((info) => info.uischema)
-        .map((info, index) => ({ ...info, index: index }));
+        .map((info, index) => ({ ...info, index }));
     });
 
     const nullable = computed(() =>
@@ -417,6 +1033,17 @@ const controlRenderer = defineComponent({
       ),
     );
 
+    const showTreeView = computed(
+      () =>
+        isRoot && (valueType.value === 'object' || valueType.value === 'array'),
+    );
+
+    const isNestedComplexType = computed(
+      () =>
+        !isRoot &&
+        (valueType.value === 'object' || valueType.value === 'array'),
+    );
+
     const matchingSchema = computed(() => {
       let result = mixedRenderInfos.value.find(
         (entry) => entry.resolvedSchema.type === valueType.value,
@@ -435,31 +1062,352 @@ const controlRenderer = defineComponent({
       matchingSchema.value?.index,
     );
 
-    const t = useTranslator();
-
     const schema = computed(() =>
       selectedIndex.value !== null && selectedIndex.value !== undefined
-        ? mixedRenderInfos.value[selectedIndex.value].schema
+        ? mixedRenderInfos.value[selectedIndex.value]?.schema
         : undefined,
     );
+
     const resolvedSchema = computed(() =>
       selectedIndex.value !== null && selectedIndex.value !== undefined
-        ? mixedRenderInfos.value[selectedIndex.value].resolvedSchema
+        ? mixedRenderInfos.value[selectedIndex.value]?.resolvedSchema
         : undefined,
     );
 
     const uischema = computed(() =>
       selectedIndex.value !== null && selectedIndex.value !== undefined
-        ? mixedRenderInfos.value[selectedIndex.value].uischema
+        ? mixedRenderInfos.value[selectedIndex.value]?.uischema
         : undefined,
     );
 
-    const currentlyExpanded = ref<number | null>(null);
-    // use the default value since all properties are dynamic so preserve the property key
+    const treeNodes = computed(() =>
+      showTreeView.value
+        ? buildTreeFromData(
+            input.control.value.data,
+            resolvedSchema.value ?? input.control.value.schema,
+            input.control.value.rootSchema,
+            input.control.value.path,
+            vuetifyControl.computedLabel.value,
+            input.control.value.enabled,
+            input.control.value.readonly,
+            showPrimitivesInTree.value,
+          )
+        : [],
+    );
+
+    const selectedNode = computed(() =>
+      findNodeByPath(treeNodes.value, activeNodeId.value),
+    );
+
+    const activatedTreeNodes = computed<string[]>({
+      get: () => [activeNodeId.value],
+      set: (value) => {
+        const nodeId = value[0];
+        if (nodeId && findNodeByPath(treeNodes.value, nodeId)) {
+          activeNodeId.value = nodeId;
+        }
+      },
+    });
+
+    const getPathAncestorNodeIds = (path: string): string[] => {
+      const segments = path.split('.').filter(Boolean);
+      const result = [toTreeNodeId(input.control.value.path)];
+      let currentPath = input.control.value.path;
+
+      segments.slice(0, -1).forEach((segment) => {
+        currentPath = composePropertyPath(currentPath, segment);
+        result.push(toTreeNodeId(currentPath));
+      });
+
+      return result;
+    };
+
+    const selectPath = (path: string) => {
+      const nodeId = toTreeNodeId(path);
+      activeNodeId.value = nodeId;
+      openedNodes.value = Array.from(
+        new Set([...openedNodes.value, ...getPathAncestorNodeIds(path)]),
+      );
+    };
+
+    if (isRoot) {
+      provide(NavigationContextSymbol, { selectPath });
+    }
+
+    watch(
+      () => input.control.value.data,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          const oldValueType = valueType.value;
+          valueType.value = getJsonDataType(newValue);
+
+          if (oldValueType !== valueType.value) {
+            const currentlySelected =
+              selectedIndex.value !== null && selectedIndex.value !== undefined
+                ? mixedRenderInfos.value[selectedIndex.value]
+                : undefined;
+            if (
+              currentlySelected &&
+              schemaSupportsInputType(
+                currentlySelected.resolvedSchema.type,
+                valueType.value,
+              )
+            ) {
+              return;
+            }
+            selectedIndex.value = matchingSchema.value?.index;
+          }
+        }
+      },
+      { deep: false },
+    );
+
+    watch(
+      treeNodes,
+      (nodes) => {
+        const allNodeIds = flattenTree(nodes).map((node) => node.nodeId);
+        const allNodeIdSet = new Set(allNodeIds);
+        const rootNodeId = toTreeNodeId(input.control.value.path);
+        if (!allNodeIds.includes(activeNodeId.value)) {
+          activeNodeId.value = rootNodeId;
+        }
+        openedNodes.value = Array.from(
+          new Set([rootNodeId, ...openedNodes.value]),
+        ).filter((id) => allNodeIdSet.has(id));
+      },
+      { immediate: true },
+    );
+
+    const getRelativePath = (nodePath: string): string | null => {
+      const rootPath = input.control.value.path;
+      if (nodePath === rootPath) {
+        return null;
+      }
+      return rootPath && nodePath.startsWith(`${rootPath}.`)
+        ? nodePath.slice(rootPath.length + 1)
+        : nodePath;
+    };
+
+    const getParentPath = (nodePath: string): string => {
+      const lastDot = nodePath.lastIndexOf('.');
+      return lastDot > 0
+        ? nodePath.substring(0, lastDot)
+        : input.control.value.path;
+    };
+
+    const getParentSchema = (parentPath: string): JsonSchema | undefined => {
+      const parentRelativePath = getRelativePath(parentPath);
+      if (parentRelativePath === null) {
+        return resolvedSchema.value ?? input.control.value.schema;
+      }
+
+      const segments = parentRelativePath.split('.');
+      let currentSchema: JsonSchema =
+        resolvedSchema.value ?? input.control.value.schema;
+
+      for (const segment of segments) {
+        currentSchema = resolveSchema(
+          currentSchema,
+          input.control.value.rootSchema,
+        );
+        if (currentSchema.type === 'array') {
+          currentSchema = (currentSchema.items as JsonSchema) ?? {};
+        } else {
+          currentSchema =
+            currentSchema.properties?.[segment] ??
+            findPropertySchema(
+              currentSchema,
+              segment,
+              input.control.value.rootSchema,
+            ) ??
+            {};
+        }
+      }
+
+      return currentSchema;
+    };
+
+    const toggleShowPrimitives = () => {
+      showPrimitivesInTree.value = !showPrimitivesInTree.value;
+    };
+
+    const startRename = (node: MixedTreeNode) => {
+      if (!node.canRename) {
+        return;
+      }
+      renamingNodeId.value = node.nodeId;
+      renameValue.value = node.label;
+      renameError.value = null;
+    };
+
+    const cancelRename = () => {
+      renamingNodeId.value = null;
+      renameValue.value = '';
+      renameError.value = null;
+    };
+
+    const commitRename = (node: MixedTreeNode) => {
+      if (renamingNodeId.value !== node.nodeId) {
+        return;
+      }
+
+      const trimmed = renameValue.value.trim();
+      if (!trimmed || trimmed === node.label) {
+        cancelRename();
+        return;
+      }
+
+      const parentPath = getParentPath(node.control.path);
+      const parentRelativePath = getRelativePath(parentPath);
+      const parentData =
+        parentRelativePath === null
+          ? input.control.value.data
+          : resolveData(input.control.value.data, parentRelativePath);
+
+      if (
+        typeof parentData !== 'object' ||
+        parentData === null ||
+        Array.isArray(parentData)
+      ) {
+        cancelRename();
+        return;
+      }
+
+      let parentSchema = getParentSchema(parentPath);
+      if (parentSchema) {
+        parentSchema = resolveSchema(
+          parentSchema,
+          input.control.value.rootSchema,
+        );
+      }
+
+      const validationError = validateDynamicPropertyName({
+        propertyName: trimmed,
+        currentPropertyName: node.label,
+        data: parentData,
+        propertyNameSchema: getPropertyNameSchema(
+          parentSchema ?? {},
+          input.control.value.rootSchema,
+        ),
+        ajv,
+      });
+      renameError.value = getDynamicPropertyNameErrorMessage(validationError, {
+        alreadyDefined:
+          unref(
+            renameTranslations[
+              AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
+            ],
+          ) ?? `Property '${trimmed}' already defined`,
+        invalid:
+          unref(
+            renameTranslations[
+              AdditionalPropertiesTranslationEnum.propertyNameInvalid
+            ],
+          ) ?? `Property name '${trimmed}' is invalid`,
+      });
+      if (renameError.value) {
+        return;
+      }
+
+      const updatedData = Object.fromEntries(
+        Object.entries(parentData).map(([key, value]) => [
+          key === node.label ? trimmed : key,
+          value,
+        ]),
+      );
+      vuetifyControl.handleChange(parentPath, updatedData);
+
+      const newPath = composePropertyPath(parentPath, trimmed);
+      selectPath(newPath);
+      cancelRename();
+    };
+
+    const deleteNode = (node: MixedTreeNode) => {
+      if (!node.canDelete) {
+        return;
+      }
+
+      const parentPath = getParentPath(node.control.path);
+      const parentRelativePath = getRelativePath(parentPath);
+      const parentData =
+        parentRelativePath === null
+          ? input.control.value.data
+          : resolveData(input.control.value.data, parentRelativePath);
+      const key = node.control.path.slice(
+        parentPath.length ? parentPath.length + 1 : 0,
+      );
+
+      if (Array.isArray(parentData)) {
+        const index = Number(key);
+        if (!Number.isInteger(index)) {
+          return;
+        }
+        const updatedData = [...parentData];
+        updatedData.splice(index, 1);
+        vuetifyControl.handleChange(parentPath, updatedData);
+      } else if (typeof parentData === 'object' && parentData !== null) {
+        const updatedData = { ...parentData };
+        delete updatedData[key];
+        vuetifyControl.handleChange(parentPath, updatedData);
+      }
+
+      if (
+        activeNodeId.value === node.nodeId ||
+        activeNodeId.value.startsWith(`${node.nodeId}.`)
+      ) {
+        selectPath(parentPath);
+      }
+    };
+
+    const handleSelectChange = (newIndex: number | null | undefined): void => {
+      const newData =
+        newIndex != null
+          ? createDefaultValue(
+              mixedRenderInfos.value[newIndex].resolvedSchema,
+              input.control.value.rootSchema,
+            )
+          : undefined;
+
+      vuetifyControl.handleChange(input.control.value.path, newData);
+      selectedIndex.value = newIndex;
+
+      const type =
+        newIndex != null
+          ? mixedRenderInfos.value[newIndex]?.resolvedSchema?.type
+          : null;
+      valueType.value = type as JsonDataType | null;
+      activeNodeId.value = toTreeNodeId(input.control.value.path);
+      currentlyExpanded.value = 0;
+    };
+
+    const selectCurrentPath = () => {
+      navigationContext?.selectPath(input.control.value.path);
+    };
+
+    const getTypeIcon = (type: JsonDataType | undefined): IconValue => {
+      switch (type) {
+        case 'array':
+          return icons.current.value.typeArray;
+        case 'object':
+          return icons.current.value.typeObject;
+        case 'boolean':
+          return icons.current.value.typeBoolean;
+        case 'integer':
+        case 'number':
+          return icons.current.value.typeNumber;
+        case 'null':
+          return icons.current.value.typeNull;
+        case 'string':
+          return icons.current.value.typeString;
+        default:
+          return icons.current.value.typeUnknown;
+      }
+    };
+
     provide(IsDynamicPropertyContext, true);
 
     return {
-      ...useCombinatorTranslations(useVuetifyControl(input)),
+      ...vuetifyControl,
       isControlEditable,
       nullable,
       mixedRenderInfos,
@@ -472,44 +1420,49 @@ const controlRenderer = defineComponent({
       path,
       icons,
       currentlyExpanded,
+      showTreeView,
+      isNestedComplexType,
+      treeNodes,
+      selectedNode,
+      activatedTreeNodes,
+      activeNodeId,
+      openedNodes,
+      treeSearch,
+      showPrimitivesInTree,
+      renamingNodeId,
+      renameValue,
+      renameError,
+      navigationContext,
+      toggleShowPrimitives,
+      startRename,
+      cancelRename,
+      commitRename,
+      deleteNode,
+      handleSelectChange,
+      selectCurrentPath,
+      getTypeIcon,
     };
   },
-  methods: {
-    setToNull(): void {
-      this.handleChange(this.control.path, null);
-    },
-    handleSelectChange(newIndex: number): void {
-      const newData =
-        newIndex != null
-          ? createDefaultValue(
-              this.mixedRenderInfos[newIndex].resolvedSchema,
-              this.control.rootSchema,
-            )
-          : undefined;
-
-      this.handleChange(this.control.path, newData);
-      this.selectedIndex = newIndex;
-
-      const type = newIndex
-        ? this.mixedRenderInfos[newIndex]?.resolvedSchema?.type
-        : null;
-      this.valueType = type as string | null; // we know that this should be either a string or null
-
-      this.currentlyExpanded = 0;
-    },
-  },
-});
+}) as DefineComponent<any, any, any>;
 
 export default controlRenderer;
 </script>
+
 <style scoped>
-.prefixed-input {
+.mixed-renderer {
+  width: 100%;
+}
+
+.mixed-primitive,
+.mixed-nested-complex {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 .select {
   flex-shrink: 0;
+  min-width: 160px;
 }
 
 .input {
@@ -517,7 +1470,95 @@ export default controlRenderer;
   width: 100%;
 }
 
+.mixed-tree-container {
+  width: 100%;
+}
+
+.mixed-splitpanes {
+  min-height: 280px;
+}
+
+.mixed-tree-pane {
+  height: 100%;
+  padding: 8px 16px 8px 0;
+}
+
+.mixed-detail-pane {
+  height: 100%;
+  min-width: 0;
+  padding: 8px 0 8px 16px;
+}
+
+.mixed-tree-search {
+  margin-bottom: 8px;
+}
+
+.mixed-tree {
+  max-height: calc(100vh - 300px);
+  overflow: auto;
+}
+
+:deep(.mixed-tree .v-list-item) {
+  align-items: center;
+}
+
+:deep(.mixed-tree .v-list-item__prepend),
+:deep(.mixed-tree .v-list-item__append) {
+  align-self: center;
+  align-items: center;
+}
+
+:deep(.mixed-tree .v-list-item-title) {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  line-height: 1.25;
+}
+
+.mixed-navigate-button {
+  margin-top: 4px;
+}
+
+.mixed-tree-title {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mixed-tree-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.mixed-tree-action {
+  opacity: 0.7;
+}
+
+.mixed-hover-action {
+  opacity: 0;
+}
+
+:deep(.v-list-item:hover) .mixed-hover-action,
+:deep(.v-list-item--active) .mixed-hover-action,
+.mixed-hover-action:focus-visible {
+  opacity: 1;
+}
+
+.mixed-rename-input {
+  min-width: 120px;
+}
+
 :deep(.v-expansion-panel-text__wrapper) {
-  padding: 0px;
+  padding: 0;
+}
+
+@media (max-width: 959px) {
+  .mixed-splitpanes {
+    min-height: 520px;
+  }
 }
 </style>
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index d38df0b857..c92cb83018 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,11 +1,25 @@
 <template>
-  <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
+  <v-card
+    v-if="control.visible"
+    class="additional-properties-card"
+    v-bind="vuetifyProps('v-card')"
+    flat
+  >
     <v-container class="py-0">
-      <v-row no-gutters>
-        <v-col v-if="mdAndUp && additionalPropertiesTitle">
-          {{ additionalPropertiesTitle }}</v-col
+      <div
+        class="additional-properties-add"
+        :class="{
+          'additional-properties-add--with-title':
+            mdAndUp && additionalPropertiesTitle,
+        }"
+      >
+        <div
+          v-if="mdAndUp && additionalPropertiesTitle"
+          class="additional-properties-title"
         >
-        <v-col>
+          {{ additionalPropertiesTitle }}
+        </div>
+        <div class="additional-properties-add-field">
           <json-forms
             :data="newPropertyName"
             :uischema="
@@ -26,8 +40,8 @@
             :ajv="ajv"
             :middleware="middleware"
             @change="propertyNameChange"
-          ></json-forms
-        ></v-col>
+          ></json-forms>
+        </div>
         <v-tooltip location="bottom">
           <template v-slot:activator="{ props }">
             <v-btn
@@ -45,15 +59,18 @@
           </template>
           {{ translations.addTooltip }}
         </v-tooltip>
-      </v-row>
+      </div>
     </v-container>
-    <v-container v-bind="vuetifyProps('v-container')" class="py-0">
-      <v-row
-        no-gutters
+    <v-container
+      v-bind="vuetifyProps('v-container')"
+      class="additional-properties-items py-0"
+    >
+      <div
+        :class="additionalPropertyRowClasses(element)"
         v-for="element in additionalPropertyItems"
         :key="`${element.propertyName}`"
       >
-        <v-col class="flex-shrink-0 flex-grow-1">
+        <div class="additional-property-content">
           <dispatch-renderer
             v-if="element.schema && element.uischema"
             :schema="element.schema"
@@ -63,18 +80,74 @@
             :readonly="control.readonly"
             :renderers="control.renderers"
             :cells="control.cells"
-        /></v-col>
-        <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
+          />
+        </div>
+        <div v-if="control.enabled" class="additional-property-actions">
+          <v-menu
+            :model-value="renamingPropertyName === element.propertyName"
+            :close-on-content-click="false"
+            location="top end"
+            @update:model-value="
+              (open: boolean) =>
+                open ? startRename(element.propertyName) : cancelRename()
+            "
+          >
+            <template v-slot:activator="{ props }">
+              <v-btn
+                v-bind="props"
+                class="additional-property-action-button"
+                icon
+                variant="text"
+                elevation="0"
+                :aria-label="'Rename property ' + element.propertyName"
+                :title="'Rename property ' + element.propertyName"
+              >
+                <v-icon class="notranslate">{{
+                  icons.current.value.itemEdit
+                }}</v-icon>
+              </v-btn>
+            </template>
+            <v-card class="additional-property-rename-menu" elevation="8">
+              <v-text-field
+                v-model="renameValue"
+                density="compact"
+                hide-details="auto"
+                autofocus
+                :label="propertyNameLabel"
+                :error-messages="renameError ? [renameError] : []"
+                v-bind="vuetifyProps('v-text-field')"
+                @update:model-value="updateRenameError(element.propertyName)"
+                @keydown.enter="renameProperty(element.propertyName)"
+                @keydown.esc="cancelRename"
+              />
+              <div class="additional-property-rename-actions">
+                <v-btn
+                  variant="text"
+                  size="small"
+                  :disabled="renamePropertyDisabled(element.propertyName)"
+                  @click="renameProperty(element.propertyName)"
+                >
+                  Rename
+                </v-btn>
+                <v-btn variant="text" size="small" @click="cancelRename">
+                  Cancel
+                </v-btn>
+              </div>
+            </v-card>
+          </v-menu>
           <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-btn
                 v-bind="props"
+                class="additional-property-action-button"
                 icon
                 variant="text"
                 elevation="0"
-                small
                 :aria-label="translations.removeAriaLabel"
-                :disabled="removePropertyDisabled"
+                :disabled="
+                  removePropertyDisabled ||
+                  renamingPropertyName === element.propertyName
+                "
                 @click="removeProperty(element.propertyName)"
               >
                 <v-icon class="notranslate">{{
@@ -83,9 +156,9 @@
               </v-btn>
             </template>
             {{ translations.removeTooltip }}
-          </v-tooltip></v-col
-        >
-      </v-row>
+          </v-tooltip>
+        </div>
+      </div>
     </v-container>
   </v-card>
 </template>
@@ -96,8 +169,6 @@ import { additionalPropertiesDefaultTranslations } from '@/i18n/additionalProper
 import { getAdditionalPropertiesTranslations } from '@/i18n/i18nUtil';
 import {
   Generate,
-  Resolve,
-  composePaths,
   createControlElement,
   createDefaultValue,
   getI18nKeyPrefix,
@@ -119,7 +190,6 @@ import type { ErrorObject } from 'ajv';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import isPlainObject from 'lodash/isPlainObject';
-import omit from 'lodash/omit';
 import startCase from 'lodash/startCase';
 
 import { IsDynamicPropertyContext } from '@/util/inject';
@@ -131,20 +201,28 @@ import {
   ref,
   unref,
   type PropType,
-  type DefineComponent
+  type DefineComponent,
 } from 'vue';
 import { useDisplay } from 'vuetify';
 import {
   VBtn,
   VCard,
-  VCol,
   VContainer,
   VIcon,
-  VRow,
+  VMenu,
+  VTextField,
   VTooltip,
 } from 'vuetify/components';
 import { DisabledIconFocus } from '../../controls/directives';
 import { useStyles } from '../../styles';
+import {
+  composePropertyPath,
+  findPropertySchema,
+  getDynamicPropertyNameErrorMessage,
+  getPropertyNameSchema,
+  haveAdditionalPropertyNamesChanged,
+  validateDynamicPropertyName,
+} from '../../util/dynamicProperties';
 import {
   isControlEditable,
   useControlAppliedOptions,
@@ -167,9 +245,9 @@ export default defineComponent({
     VTooltip,
     VIcon,
     VBtn,
+    VMenu,
     VContainer,
-    VRow,
-    VCol,
+    VTextField,
     JsonForms,
   },
   directives: {
@@ -196,37 +274,12 @@ export default defineComponent({
 
     const toAdditionalPropertyType = (
       propName: string,
-      propValue: any,
       parentSchema: JsonSchema,
       rootSchema: JsonSchema,
     ): AdditionalPropertyType => {
-      let propSchema: JsonSchema | undefined = undefined;
+      let propSchema = findPropertySchema(parentSchema, propName, rootSchema);
       let propUiSchema: UISchemaElement | undefined = undefined;
 
-      if (parentSchema.patternProperties) {
-        const matchedPattern = Object.keys(parentSchema.patternProperties).find(
-          (pattern) => new RegExp(pattern).test(propName),
-        );
-        if (matchedPattern) {
-          propSchema = parentSchema.patternProperties[matchedPattern];
-        }
-      }
-
-      if (
-        (!propSchema &&
-          typeof parentSchema.additionalProperties === 'object') ||
-        parentSchema.additionalProperties === true
-      ) {
-        propSchema =
-          parentSchema.additionalProperties === true
-            ? { additionalProperties: true }
-            : parentSchema.additionalProperties;
-      }
-
-      if (typeof propSchema?.$ref === 'string') {
-        propSchema = Resolve.schema(rootSchema, propSchema.$ref, rootSchema);
-      }
-
       propSchema = propSchema ?? {};
 
       if (propSchema.type === undefined) {
@@ -272,7 +325,7 @@ export default defineComponent({
 
       return {
         propertyName: propName,
-        path: composePaths(control.value.path, propName),
+        path: composePropertyPath(control.value.path, propName),
         schema: propSchema,
         uischema: propUiSchema,
       };
@@ -283,7 +336,6 @@ export default defineComponent({
       additionalKeys.value.map((propName) =>
         toAdditionalPropertyType(
           propName,
-          control.value.data[propName],
           control.value.schema,
           control.value.rootSchema,
         ),
@@ -294,92 +346,46 @@ export default defineComponent({
     const newPropertyName = ref<string | null>('');
     const newPropertyErrors = ref<ErrorObject[] | undefined>(undefined);
     const additionalErrors = ref<ErrorObject[]>([]);
+    const renamingPropertyName = ref<string | null>(null);
+    const renameValue = ref('');
+    const renameError = ref<string | null>(null);
 
-    const propertyNameSchema = computed<JsonSchema7>(() => {
-      let result: JsonSchema7 = {
-        type: 'string',
-      };
-      // TODO: create issue against jsonforms to add propertyNames into the JsonSchema interface
-      // propertyNames exist in draft-6 but not defined in the JsonSchema
-      if (typeof (control.value.schema as any).propertyNames === 'object') {
-        let propertyNames = (control.value.schema as any).propertyNames;
-        if (typeof propertyNames.$ref === 'string') {
-          propertyNames =
-            Resolve.schema(
-              control.value.rootSchema,
-              propertyNames.$ref,
-              control.value.rootSchema,
-            ) ?? propertyNames;
-        }
-        result = {
-          ...propertyNames,
-          ...result,
-        };
-      } else if (
-        (control.value.schema as any).additionalProperties === false &&
-        typeof (control.value.schema as any).patternProperties === 'object'
-      ) {
-        // check if additionalProperties explicitly set to false then the only valid property names will be derived from patternProperties
-
-        const patterns = Object.keys(
-          (control.value.schema as any).patternProperties,
-        );
-        if (patterns.length > 0) {
-          result = {
-            pattern: patterns.join('|'),
-            ...result,
-          };
-        }
-      }
-      return result;
-    });
+    const propertyNameSchema = computed<JsonSchema7>(() =>
+      getPropertyNameSchema(control.value.schema, control.value.rootSchema),
+    );
 
     const propertyNameChange = (event: JsonFormsChangeEvent) => {
       newPropertyName.value = typeof event.data === 'string' ? event.data : '';
-      let newAdditionalErrors: ErrorObject[] = [];
-
-      if (
-        typeof control.value.data === 'object' &&
-        control.value.data &&
-        Object.keys(control.value.data).find((e) => e === newPropertyName.value)
-      ) {
-        newAdditionalErrors = [
-          {
-            data: newPropertyName.value,
-            instancePath: '',
-            keyword: '',
-            message: unref(
-              translations[
-                AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
-              ],
-            )!,
-            params: { propertyName: newPropertyName.value },
-            schemaPath: '',
-          },
-        ];
-      }
-
-      // JSONForms has special means for "[]." chars - those are part of the path composition so for not we can't support those without special handling
-      if (
-        newPropertyName.value.includes('[') ||
-        newPropertyName.value.includes(']') ||
-        newPropertyName.value.includes('.')
-      ) {
-        newAdditionalErrors = [
-          {
-            data: newPropertyName.value,
-            instancePath: '',
-            keyword: '',
-            message: unref(
-              translations[
-                AdditionalPropertiesTranslationEnum.propertyNameInvalid
-              ],
-            )!,
-            params: { propertyName: newPropertyName.value },
-            schemaPath: '',
-          },
-        ];
-      }
+      const validationError = validateDynamicPropertyName({
+        propertyName: newPropertyName.value,
+        data: control.value.data,
+      });
+      const message = getDynamicPropertyNameErrorMessage(validationError, {
+        alreadyDefined:
+          unref(
+            translations[
+              AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
+            ],
+          ) ?? `Property '${newPropertyName.value}' already defined`,
+        invalid:
+          unref(
+            translations[
+              AdditionalPropertiesTranslationEnum.propertyNameInvalid
+            ],
+          ) ?? `Property name '${newPropertyName.value}' is invalid`,
+      });
+      const newAdditionalErrors: ErrorObject[] = message
+        ? [
+            {
+              data: newPropertyName.value,
+              instancePath: '',
+              keyword: '',
+              message,
+              params: { propertyName: newPropertyName.value },
+              schemaPath: '',
+            },
+          ]
+        : [];
 
       if (!isEqual(additionalErrors.value, newAdditionalErrors)) {
         // only change the additional errors if different to prevent recursive calls
@@ -410,6 +416,13 @@ export default defineComponent({
       control.value.label,
       newPropertyName,
     );
+    const renameTranslations = getAdditionalPropertiesTranslations(
+      t.value,
+      additionalPropertiesDefaultTranslations,
+      i18nAdditionalPropertiesPrefix,
+      control.value.label,
+      renameValue,
+    );
 
     const propertyNameLabel =
       translations[AdditionalPropertiesTranslationEnum.propertyNameLabel];
@@ -451,10 +464,14 @@ export default defineComponent({
       propertyNameChange,
       newPropertyErrors,
       additionalErrors,
+      renamingPropertyName,
+      renameValue,
+      renameError,
       icons,
       isControlEditable,
       propertyNameSchema,
       translations,
+      renameTranslations,
     };
   },
   computed: {
@@ -505,32 +522,20 @@ export default defineComponent({
   watch: {
     'control.data': {
       handler(newData, oldData) {
-        function isEqualIgnoringKeys(
-          obj1: Record<string, any>,
-          obj2: Record<string, any>,
-          keysToIgnore: string[],
-        ) {
-          // Omit the specified keys from both objects
-          const filteredObj1 = omit(obj1, keysToIgnore);
-          const filteredObj2 = omit(obj2, keysToIgnore);
-
-          // Perform a deep comparison
-          // return isEqual(filteredObj1, filteredObj2);
-
-          // compare with property order as well
-          return JSON.stringify(filteredObj1) === JSON.stringify(filteredObj2);
-        }
-
         if (
-          !isEqualIgnoringKeys(newData, oldData, this.reservedPropertyNames)
+          haveAdditionalPropertyNamesChanged(
+            newData,
+            oldData,
+            this.reservedPropertyNames,
+          )
         ) {
-          this.additionalPropertyItems = this.additionalKeys.map((propName: string) =>
-            this.toAdditionalPropertyType(
-              propName,
-              newData[propName],
-              this.control.schema,
-              this.control.rootSchema,
-            ),
+          this.additionalPropertyItems = this.additionalKeys.map(
+            (propName: string) =>
+              this.toAdditionalPropertyType(
+                propName,
+                this.control.schema,
+                this.control.rootSchema,
+              ),
           );
         }
       },
@@ -538,12 +543,102 @@ export default defineComponent({
     },
   },
   methods: {
-    composePaths,
+    additionalPropertyRowClasses(element: AdditionalPropertyType): string[] {
+      const schemaType = element.schema?.type;
+      const classes = ['additional-property-row'];
+
+      if (Array.isArray(schemaType)) {
+        classes.push('additional-property-row--mixed');
+      } else if (schemaType === 'object') {
+        classes.push('additional-property-row--object');
+      } else if (schemaType === 'array') {
+        classes.push('additional-property-row--array');
+      } else {
+        classes.push('additional-property-row--primitive');
+      }
+
+      return classes;
+    },
+    validatePropertyName(
+      propertyName: string,
+      currentPropertyName?: string,
+    ): string | null {
+      return getDynamicPropertyNameErrorMessage(
+        validateDynamicPropertyName({
+          propertyName,
+          currentPropertyName,
+          data: this.control.data,
+          propertyNameSchema: this.propertyNameSchema,
+          ajv: this.ajv,
+        }),
+        {
+          alreadyDefined:
+            unref(
+              this.renameTranslations[
+                AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
+              ],
+            ) ?? `Property '${propertyName}' already defined`,
+          invalid:
+            unref(
+              this.renameTranslations[
+                AdditionalPropertiesTranslationEnum.propertyNameInvalid
+              ],
+            ) ?? `Property name '${propertyName}' is invalid`,
+        },
+      );
+    },
+    startRename(propName: string): void {
+      this.renamingPropertyName = propName;
+      this.renameValue = propName;
+      this.renameError = null;
+    },
+    cancelRename(): void {
+      this.renamingPropertyName = null;
+      this.renameValue = '';
+      this.renameError = null;
+    },
+    renamePropertyDisabled(propName: string): boolean {
+      const trimmed = this.renameValue.trim();
+      return (
+        !this.isControlEditable(this.control) ||
+        !trimmed ||
+        trimmed === propName ||
+        Boolean(this.validatePropertyName(trimmed, propName))
+      );
+    },
+    updateRenameError(propName: string): void {
+      this.renameError = this.validatePropertyName(
+        this.renameValue.trim(),
+        propName,
+      );
+    },
+    renameProperty(propName: string): void {
+      const trimmed = this.renameValue.trim();
+      this.renameError = this.validatePropertyName(trimmed, propName);
+      if (
+        this.renameError ||
+        !trimmed ||
+        trimmed === propName ||
+        typeof this.control.data !== 'object' ||
+        this.control.data === null ||
+        Array.isArray(this.control.data)
+      ) {
+        return;
+      }
+
+      const updatedData = Object.fromEntries(
+        Object.entries(this.control.data).map(([key, value]) => [
+          key === propName ? trimmed : key,
+          value,
+        ]),
+      );
+      this.input.handleChange(this.control.path, updatedData);
+      this.cancelRename();
+    },
     addProperty() {
       if (this.newPropertyName) {
         const additionalProperty = this.toAdditionalPropertyType(
           this.newPropertyName,
-          undefined,
           this.control.schema,
           this.control.rootSchema,
         );
@@ -584,3 +679,82 @@ export default defineComponent({
   },
 }) as DefineComponent<any, any, any>;
 </script>
+
+<style scoped>
+.additional-properties-card {
+  margin-top: 8px;
+}
+
+.additional-properties-items {
+  width: 100%;
+}
+
+.additional-properties-add {
+  align-items: flex-start;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  width: 100%;
+}
+
+.additional-properties-add--with-title {
+  grid-template-columns: minmax(180px, max-content) minmax(0, 1fr) auto;
+}
+
+.additional-properties-title {
+  padding-top: 10px;
+}
+
+.additional-properties-add-field {
+  min-width: 0;
+}
+
+.additional-property-row {
+  align-items: flex-start;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-width: 0;
+  width: 100%;
+}
+
+.additional-property-content {
+  min-width: 0;
+  width: 100%;
+}
+
+.additional-property-actions {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+  opacity: 0.72;
+  transition: opacity 120ms ease;
+}
+
+.additional-property-row:hover .additional-property-actions {
+  opacity: 1;
+}
+
+.additional-property-action-button {
+  height: 24px;
+  width: 24px;
+}
+
+.additional-property-action-button :deep(.v-icon) {
+  font-size: 16px;
+}
+
+.additional-property-rename-menu {
+  min-width: 280px;
+  padding: 12px;
+}
+
+.additional-property-rename-actions {
+  align-items: flex-start;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+</style>
diff --git a/packages/vue-vuetify/src/components/VPane.vue b/packages/vue-vuetify/src/components/VPane.vue
new file mode 100644
index 0000000000..780fae4d0e
--- /dev/null
+++ b/packages/vue-vuetify/src/components/VPane.vue
@@ -0,0 +1,18 @@
+<template>
+  <pane v-bind="$attrs" class="v-pane">
+    <slot />
+  </pane>
+</template>
+
+<script lang="ts">
+import { Pane } from 'splitpanes';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'VPane',
+  components: {
+    Pane,
+  },
+  inheritAttrs: false,
+});
+</script>
diff --git a/packages/vue-vuetify/src/components/VSplitpanes.sass b/packages/vue-vuetify/src/components/VSplitpanes.sass
new file mode 100644
index 0000000000..d82932599a
--- /dev/null
+++ b/packages/vue-vuetify/src/components/VSplitpanes.sass
@@ -0,0 +1,218 @@
+@use 'sass:math'
+@use 'vuetify/tools'
+
+$splitter-thickness: 1px
+$splitter-hover-thickness: 4px
+$splitter-hit-area: 8px
+$splitter-transition: background-color 0.15s ease, width 0.15s ease, height 0.15s ease
+$pane-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1)
+
+@mixin splitter-base
+  box-sizing: border-box
+  flex-shrink: 0
+  background-color: transparent
+  transition: none
+  position: relative
+
+@mixin splitter-line($width: $splitter-thickness, $height: 100%, $top: 0, $left: 0)
+  content: ''
+  position: absolute
+  top: $top
+  left: $left
+  width: $width
+  height: $height
+  background-color: rgba(var(--v-border-color), var(--v-border-opacity))
+  transition: $splitter-transition
+  z-index: 1
+
+@mixin splitter-hover-state($is-horizontal: false)
+  @if $is-horizontal
+    height: $splitter-hover-thickness
+    width: 100%
+    top: -1.5px
+    left: 0
+  @else
+    width: $splitter-hover-thickness
+    height: 100%
+    left: -1.5px
+    top: 0
+  background-color: rgb(var(--v-theme-primary))
+
+@mixin hit-area($is-horizontal: false)
+  content: ''
+  position: absolute
+  z-index: 0
+  background-color: transparent
+
+  @if $is-horizontal
+    top: -(math.div($splitter-hit-area, 2))
+    bottom: -(math.div($splitter-hit-area, 2))
+    left: 0
+    right: 0
+    cursor: row-resize
+  @else
+    left: -(math.div($splitter-hit-area, 2))
+    right: -(math.div($splitter-hit-area, 2))
+    top: 0
+    bottom: 0
+    cursor: col-resize
+
+@mixin pane-transition($property)
+  transition: none
+
+  .splitpanes:not(.splitpanes--dragging) &
+    transition: #{$property} $pane-transition
+
+@include tools.layer('components')
+  .splitpanes
+    display: flex
+    width: 100%
+    height: 100%
+
+    &--vertical
+      flex-direction: row
+
+    &--horizontal
+      flex-direction: column
+
+    &--dragging
+      -webkit-user-select: none
+      user-select: none
+      pointer-events: auto
+      transform: translateZ(0)
+      will-change: transform
+
+      *, *:before, *:after
+        transition: none !important
+
+      .splitpanes__splitter
+        pointer-events: auto
+
+    &[dir='rtl']
+      &.splitpanes--vertical
+        flex-direction: row-reverse
+
+        > .splitpanes__splitter
+          border-left: none
+          border-right: $splitter-thickness solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+  .splitpanes__pane
+    width: 100%
+    height: 100%
+    overflow: hidden
+    transform: translateZ(0)
+    backface-visibility: hidden
+
+    .splitpanes--vertical &
+      @include pane-transition(width)
+
+    .splitpanes--horizontal &
+      @include pane-transition(height)
+
+  .splitpanes__splitter
+    .splitpanes--vertical > &
+      min-width: $splitter-thickness
+      cursor: col-resize
+
+    .splitpanes--horizontal > &
+      min-height: $splitter-thickness
+      cursor: row-resize
+
+    &:first-child
+      cursor: auto
+
+    &:focus-visible
+      outline: 2px solid rgb(var(--v-theme-primary))
+      outline-offset: -2px
+
+  .splitpanes.v-splitpanes
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+
+    .splitpanes__pane
+      background-color: rgb(var(--v-theme-surface))
+
+    .splitpanes__splitter
+      @include splitter-base
+      transform: translateZ(0)
+      will-change: auto
+
+      &:before
+        @include splitter-line
+
+      &:hover:before
+        @include splitter-hover-state
+
+      .splitpanes--dragging &:before
+        @include splitter-hover-state
+        transition: none !important
+
+      .splitpanes &
+        z-index: 1
+
+    &.splitpanes--vertical > .splitpanes__splitter:after
+      @include hit-area
+
+    &.splitpanes--horizontal > .splitpanes__splitter
+      &:before
+        @include splitter-line(100%, $splitter-thickness)
+
+      &:hover:before
+        @include splitter-hover-state(true)
+
+      .splitpanes--dragging &:before
+        @include splitter-hover-state(true)
+        transition: none !important
+
+      &:after
+        @include hit-area(true)
+
+  .splitpanes.v-splitpanes.splitpanes--dragging
+    .splitpanes__pane
+      transition: none
+
+    .splitpanes__splitter:hover:before,
+    .splitpanes__splitter:focus:before,
+    .splitpanes__splitter:active:before
+      @include splitter-hover-state
+      transition: none
+
+    .splitpanes__pane .splitpanes__splitter:before
+      background-color: rgba(var(--v-border-color), var(--v-border-opacity))
+      width: $splitter-thickness
+      height: 100%
+      top: 0
+      left: 0
+      transition: none
+
+    .splitpanes__pane .splitpanes__splitter:hover:before,
+    .splitpanes__pane .splitpanes__splitter:focus:before,
+    .splitpanes__pane .splitpanes__splitter:active:before
+      @include splitter-hover-state
+      transition: none
+
+    &.splitpanes--horizontal .splitpanes__splitter:before,
+    .splitpanes__pane .splitpanes--horizontal .splitpanes__splitter:before
+      background-color: rgba(var(--v-border-color), var(--v-border-opacity))
+      width: 100%
+      height: $splitter-thickness
+      top: 0
+      left: 0
+      transition: none
+
+    &.splitpanes--horizontal .splitpanes__splitter:hover:before,
+    &.splitpanes--horizontal .splitpanes__splitter:focus:before,
+    &.splitpanes--horizontal .splitpanes__splitter:active:before,
+    .splitpanes__pane .splitpanes--horizontal .splitpanes__splitter:hover:before,
+    .splitpanes__pane .splitpanes--horizontal .splitpanes__splitter:focus:before,
+    .splitpanes__pane .splitpanes--horizontal .splitpanes__splitter:active:before
+      @include splitter-hover-state(true)
+      transition: none
+
+  @media (prefers-contrast: high)
+    .splitpanes.v-splitpanes .splitpanes__splitter
+      opacity: 1 !important
+      background-color: rgba(var(--v-border-color), 0.87) !important
+
+  @media (prefers-reduced-motion: reduce)
+    .splitpanes__pane
+      transition: none
diff --git a/packages/vue-vuetify/src/components/VSplitpanes.vue b/packages/vue-vuetify/src/components/VSplitpanes.vue
new file mode 100644
index 0000000000..79192cf2a8
--- /dev/null
+++ b/packages/vue-vuetify/src/components/VSplitpanes.vue
@@ -0,0 +1,27 @@
+<template>
+  <splitpanes v-bind="$attrs" class="v-splitpanes" :rtl="rtl.isRtl.value">
+    <slot />
+  </splitpanes>
+</template>
+
+<script lang="ts">
+import { Splitpanes } from 'splitpanes';
+import { defineComponent } from 'vue';
+import { useRtl } from 'vuetify';
+import './VSplitpanes.sass';
+
+export default defineComponent({
+  name: 'VSplitpanes',
+  components: {
+    Splitpanes,
+  },
+  inheritAttrs: false,
+  setup() {
+    const rtl = useRtl();
+
+    return {
+      rtl,
+    };
+  },
+});
+</script>
diff --git a/packages/vue-vuetify/src/components/index.ts b/packages/vue-vuetify/src/components/index.ts
new file mode 100644
index 0000000000..83c7dd2e8e
--- /dev/null
+++ b/packages/vue-vuetify/src/components/index.ts
@@ -0,0 +1,2 @@
+export { default as VPane } from './VPane.vue';
+export { default as VSplitpanes } from './VSplitpanes.vue';
diff --git a/packages/vue-vuetify/src/icons/fa.ts b/packages/vue-vuetify/src/icons/fa.ts
index 4b914a7287..a9470c2297 100644
--- a/packages/vue-vuetify/src/icons/fa.ts
+++ b/packages/vue-vuetify/src/icons/fa.ts
@@ -1,14 +1,29 @@
 import type { IconAliases } from './icons';
 
-const aliases: IconAliases = {
+const aliases: Required<IconAliases> = {
   itemAdd: 'fas fa-plus',
+  itemCancel: 'fas fa-xmark',
+  itemConfirm: 'fas fa-check',
+  itemEdit: 'far fa-pen-to-square',
   itemMoveUp: 'fas fa-arrow-up',
   itemMoveDown: 'fas fa-arrow-down',
   itemDelete: 'fas fa-trash',
+  search: 'fas fa-magnifying-glass',
+  treeExpand: 'fas fa-chevron-right',
+  treeCollapse: 'fas fa-chevron-down',
+  visibilityOff: 'far fa-eye-slash',
+  visibilityOn: 'far fa-eye',
   calendarClock: 'fas fa-calendar',
   clock: 'far fa-clock',
   passwordHide: 'far fa-eye-slash',
   passwordShow: 'far fa-eye',
+  typeArray: 'fas fa-list',
+  typeBoolean: 'fas fa-toggle-on',
+  typeNull: 'fas fa-ban',
+  typeNumber: 'fas fa-hashtag',
+  typeObject: 'far fa-folder',
+  typeString: 'fas fa-font',
+  typeUnknown: 'fas fa-circle',
   validationError: 'fas fa-circle-exclamation',
 };
 
diff --git a/packages/vue-vuetify/src/icons/icons.ts b/packages/vue-vuetify/src/icons/icons.ts
index 12985eef09..dd05a3eb69 100644
--- a/packages/vue-vuetify/src/icons/icons.ts
+++ b/packages/vue-vuetify/src/icons/icons.ts
@@ -10,12 +10,27 @@ export type IconValue =
 
 export interface IconAliases {
   itemAdd: IconValue;
+  itemCancel?: IconValue;
+  itemConfirm?: IconValue;
+  itemEdit?: IconValue;
   itemMoveUp: IconValue;
   itemMoveDown: IconValue;
   itemDelete: IconValue;
+  search?: IconValue;
+  treeExpand?: IconValue;
+  treeCollapse?: IconValue;
+  visibilityOff?: IconValue;
+  visibilityOn?: IconValue;
   calendarClock: IconValue;
   clock: IconValue;
   passwordHide: IconValue;
   passwordShow: IconValue;
+  typeArray?: IconValue;
+  typeBoolean?: IconValue;
+  typeNull?: IconValue;
+  typeNumber?: IconValue;
+  typeObject?: IconValue;
+  typeString?: IconValue;
+  typeUnknown?: IconValue;
   validationError: IconValue;
 }
diff --git a/packages/vue-vuetify/src/icons/mdi.ts b/packages/vue-vuetify/src/icons/mdi.ts
index d63940b2b4..4de6565a1c 100644
--- a/packages/vue-vuetify/src/icons/mdi.ts
+++ b/packages/vue-vuetify/src/icons/mdi.ts
@@ -1,14 +1,29 @@
 import type { IconAliases } from './icons';
 
-const aliases: IconAliases = {
+const aliases: Required<IconAliases> = {
   itemAdd: 'mdi-plus',
+  itemCancel: 'mdi-close',
+  itemConfirm: 'mdi-check',
+  itemEdit: 'mdi-pencil-outline',
   itemMoveUp: 'mdi-arrow-up',
   itemMoveDown: 'mdi-arrow-down',
   itemDelete: 'mdi-delete',
+  search: 'mdi-magnify',
+  treeExpand: 'mdi-chevron-right',
+  treeCollapse: 'mdi-chevron-down',
+  visibilityOff: 'mdi-eye-off',
+  visibilityOn: 'mdi-eye',
   calendarClock: 'mdi-calendar-clock',
   clock: 'mdi-clock-outline',
   passwordHide: 'mdi-eye-off',
   passwordShow: 'mdi-eye',
+  typeArray: 'mdi-format-list-bulleted',
+  typeBoolean: 'mdi-toggle-switch-outline',
+  typeNull: 'mdi-null',
+  typeNumber: 'mdi-numeric',
+  typeObject: 'mdi-folder-outline',
+  typeString: 'mdi-format-text',
+  typeUnknown: 'mdi-circle-small',
   validationError: 'mdi-alert-circle-outline',
 };
 
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index e50e799ad7..0be5533be9 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -507,7 +507,7 @@ export const useNested = (element: false | 'array' | 'object'): NestedInfo => {
 };
 
 export const useIcons = () => {
-  const iconSet = computed<IconAliases>(() => {
+  const iconSet = computed<Required<IconAliases>>(() => {
     const icons = inject(IconSymbol);
     if (!icons) throw new Error('Missing Vuetify Icons provide!');
 
diff --git a/packages/vue-vuetify/src/util/dynamicProperties.ts b/packages/vue-vuetify/src/util/dynamicProperties.ts
new file mode 100644
index 0000000000..843030d965
--- /dev/null
+++ b/packages/vue-vuetify/src/util/dynamicProperties.ts
@@ -0,0 +1,166 @@
+import { Resolve, type JsonSchema, type JsonSchema7 } from '@jsonforms/core';
+import type Ajv from 'ajv';
+
+export type DynamicPropertyNameValidationError =
+  | { reason: 'alreadyDefined' }
+  | { reason: 'invalid' }
+  | { reason: 'schema'; message?: string };
+
+export interface DynamicPropertyNameValidationOptions {
+  propertyName: string;
+  currentPropertyName?: string;
+  data: unknown;
+  propertyNameSchema?: JsonSchema7;
+  ajv?: Ajv;
+}
+
+export const composePropertyPath = (
+  parentPath: string,
+  propertyName: string,
+): string => (parentPath ? `${parentPath}.${propertyName}` : propertyName);
+
+export const getAdditionalPropertyNames = (
+  data: Record<string, unknown> | undefined,
+  reservedPropertyNames: string[],
+): string[] =>
+  Object.keys(data ?? {}).filter(
+    (propertyName) => !reservedPropertyNames.includes(propertyName),
+  );
+
+export const haveAdditionalPropertyNamesChanged = (
+  newData: Record<string, unknown> | undefined,
+  oldData: Record<string, unknown> | undefined,
+  reservedPropertyNames: string[],
+): boolean => {
+  const newNames = getAdditionalPropertyNames(newData, reservedPropertyNames);
+  const oldNames = getAdditionalPropertyNames(oldData, reservedPropertyNames);
+  return (
+    newNames.length !== oldNames.length ||
+    newNames.some((propertyName, index) => propertyName !== oldNames[index])
+  );
+};
+
+export const findPropertySchema = (
+  parentSchema: JsonSchema,
+  propertyName: string,
+  rootSchema: JsonSchema,
+): JsonSchema | undefined => {
+  const declaredSchema = parentSchema.properties?.[propertyName];
+  if (declaredSchema) {
+    return typeof declaredSchema.$ref === 'string'
+      ? (Resolve.schema(rootSchema, declaredSchema.$ref, rootSchema) ??
+          declaredSchema)
+      : declaredSchema;
+  }
+
+  const pattern = Object.keys(parentSchema.patternProperties ?? {}).find(
+    (candidate) => new RegExp(candidate).test(propertyName),
+  );
+  if (pattern) {
+    const patternSchema = parentSchema.patternProperties?.[pattern];
+    return typeof patternSchema?.$ref === 'string'
+      ? (Resolve.schema(rootSchema, patternSchema.$ref, rootSchema) ??
+          patternSchema)
+      : patternSchema;
+  }
+
+  const additionalProperties = parentSchema.additionalProperties;
+  if (typeof additionalProperties === 'object') {
+    return typeof additionalProperties.$ref === 'string'
+      ? (Resolve.schema(rootSchema, additionalProperties.$ref, rootSchema) ??
+          additionalProperties)
+      : additionalProperties;
+  }
+
+  return additionalProperties === true
+    ? { additionalProperties: true }
+    : undefined;
+};
+
+export const getPropertyNameSchema = (
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+): JsonSchema7 => {
+  const result: JsonSchema7 = { type: 'string' };
+  const propertyNames = (schema as JsonSchema & { propertyNames?: JsonSchema })
+    .propertyNames;
+
+  if (propertyNames && typeof propertyNames === 'object') {
+    const resolved =
+      typeof propertyNames.$ref === 'string'
+        ? (Resolve.schema(rootSchema, propertyNames.$ref, rootSchema) ??
+          propertyNames)
+        : propertyNames;
+    return { ...resolved, ...result } as JsonSchema7;
+  }
+
+  if (
+    schema.additionalProperties === false &&
+    schema.patternProperties &&
+    typeof schema.patternProperties === 'object'
+  ) {
+    const patterns = Object.keys(schema.patternProperties);
+    if (patterns.length > 0) {
+      return { pattern: patterns.join('|'), ...result };
+    }
+  }
+
+  return result;
+};
+
+export const validateDynamicPropertyName = ({
+  propertyName,
+  currentPropertyName,
+  data,
+  propertyNameSchema,
+  ajv,
+}: DynamicPropertyNameValidationOptions): DynamicPropertyNameValidationError | null => {
+  if (!propertyName) {
+    return null;
+  }
+
+  if (
+    typeof data === 'object' &&
+    data !== null &&
+    Object.prototype.hasOwnProperty.call(data, propertyName) &&
+    propertyName !== currentPropertyName
+  ) {
+    return { reason: 'alreadyDefined' };
+  }
+
+  // JSON Forms data paths use dots as segment separators. Brackets are
+  // treated literally by core and therefore are valid in property names.
+  if (propertyName.includes('.')) {
+    return { reason: 'invalid' };
+  }
+
+  if (
+    propertyNameSchema &&
+    ajv &&
+    !ajv.validate(propertyNameSchema, propertyName)
+  ) {
+    const message = ajv.errors
+      ?.map((error) => error.message)
+      .filter((entry): entry is string => Boolean(entry))
+      .join(', ');
+    return { reason: 'schema', message: message || undefined };
+  }
+
+  return null;
+};
+
+export const getDynamicPropertyNameErrorMessage = (
+  error: DynamicPropertyNameValidationError | null,
+  messages: { alreadyDefined: string; invalid: string },
+): string | null => {
+  if (!error) {
+    return null;
+  }
+  if (error.reason === 'alreadyDefined') {
+    return messages.alreadyDefined;
+  }
+  if (error.reason === 'invalid') {
+    return messages.invalid;
+  }
+  return error.message ?? messages.invalid;
+};
diff --git a/packages/vue-vuetify/tests/unit/additional/AdditionalPropertiesMixed.spec.ts b/packages/vue-vuetify/tests/unit/additional/AdditionalPropertiesMixed.spec.ts
new file mode 100644
index 0000000000..845d49f337
--- /dev/null
+++ b/packages/vue-vuetify/tests/unit/additional/AdditionalPropertiesMixed.spec.ts
@@ -0,0 +1,33 @@
+import { clearAllIds } from '@jsonforms/core';
+import { nextTick } from 'vue';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { extendedVuetifyRenderers } from '../../../src';
+import { mountJsonForms } from '../util';
+
+describe('AdditionalProperties mixed values', () => {
+  const schema = {
+    type: 'object' as const,
+    additionalProperties: {},
+  };
+  const uischema = { type: 'Control' as const, scope: '#' };
+
+  beforeEach(() => {
+    clearAllIds();
+  });
+
+  it('updates the mixed renderer when an existing property changes type', async () => {
+    const wrapper = mountJsonForms(
+      { dynamic: 'text' },
+      schema,
+      extendedVuetifyRenderers,
+      uischema,
+    );
+
+    expect(wrapper.find('.mixed-primitive').exists()).toBe(true);
+
+    await wrapper.setProps({ data: { dynamic: { nested: true } } });
+    await nextTick();
+
+    expect(wrapper.find('.mixed-tree-container').exists()).toBe(true);
+  });
+});
diff --git a/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts b/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts
new file mode 100644
index 0000000000..960829e371
--- /dev/null
+++ b/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts
@@ -0,0 +1,181 @@
+import { createAjv, type JsonSchema } from '@jsonforms/core';
+import { describe, expect, it } from 'vitest';
+import {
+  composePropertyPath,
+  findPropertySchema,
+  getPropertyNameSchema,
+  haveAdditionalPropertyNamesChanged,
+  validateDynamicPropertyName,
+} from '../../../src/util/dynamicProperties';
+
+describe('dynamic property utilities', () => {
+  const rootSchema: JsonSchema = {
+    type: 'object',
+    $defs: {
+      propertyName: {
+        type: 'string',
+        pattern: '^[A-Z][A-Za-z0-9]*$',
+      },
+      patternValue: {
+        type: 'number',
+      },
+    },
+  };
+
+  describe('findPropertySchema', () => {
+    it('prefers a matching pattern over additionalProperties: true', () => {
+      const schema: JsonSchema = {
+        type: 'object',
+        patternProperties: {
+          '^count': { $ref: '#/$defs/patternValue' },
+        },
+        additionalProperties: true,
+      };
+
+      expect(findPropertySchema(schema, 'countItems', rootSchema)).toEqual({
+        type: 'number',
+      });
+    });
+
+    it('falls back to the additional-properties schema', () => {
+      const schema: JsonSchema = {
+        type: 'object',
+        patternProperties: {
+          '^count': { type: 'number' },
+        },
+        additionalProperties: { type: 'string' },
+      };
+
+      expect(findPropertySchema(schema, 'description', rootSchema)).toEqual({
+        type: 'string',
+      });
+    });
+  });
+
+  describe('getPropertyNameSchema', () => {
+    it('resolves a propertyNames $ref against the root schema', () => {
+      const schema = {
+        type: 'object',
+        propertyNames: { $ref: '#/$defs/propertyName' },
+      } as JsonSchema;
+
+      expect(getPropertyNameSchema(schema, rootSchema)).toEqual({
+        type: 'string',
+        pattern: '^[A-Z][A-Za-z0-9]*$',
+      });
+    });
+
+    it('uses patternProperties as a name constraint only when additional properties are forbidden', () => {
+      const patternProperties = { '^allowed': { type: 'string' } };
+
+      expect(
+        getPropertyNameSchema(
+          {
+            type: 'object',
+            patternProperties,
+            additionalProperties: false,
+          },
+          rootSchema,
+        ),
+      ).toEqual({ type: 'string', pattern: '^allowed' });
+
+      expect(
+        getPropertyNameSchema(
+          {
+            type: 'object',
+            patternProperties,
+            additionalProperties: true,
+          },
+          rootSchema,
+        ),
+      ).toEqual({ type: 'string' });
+    });
+  });
+
+  describe('validateDynamicPropertyName', () => {
+    const ajv = createAjv();
+
+    it('rejects another existing property but allows the current name', () => {
+      const data = { first: 1, second: 2 };
+
+      expect(
+        validateDynamicPropertyName({ propertyName: 'second', data }),
+      ).toEqual({ reason: 'alreadyDefined' });
+      expect(
+        validateDynamicPropertyName({
+          propertyName: 'first',
+          currentPropertyName: 'first',
+          data,
+        }),
+      ).toBeNull();
+    });
+
+    it('rejects dots but permits bracket characters supported by core paths', () => {
+      expect(
+        validateDynamicPropertyName({ propertyName: 'nested.value', data: {} }),
+      ).toEqual({ reason: 'invalid' });
+      expect(
+        validateDynamicPropertyName({ propertyName: 'property[0]', data: {} }),
+      ).toBeNull();
+      expect(composePropertyPath('parent', '[property]')).toBe(
+        'parent.[property]',
+      );
+    });
+
+    it('uses the same JSON Schema validation for both rename entry points', () => {
+      const propertyNameSchema = getPropertyNameSchema(
+        {
+          type: 'object',
+          propertyNames: { $ref: '#/$defs/propertyName' },
+        } as JsonSchema,
+        rootSchema,
+      );
+
+      expect(
+        validateDynamicPropertyName({
+          propertyName: 'invalid',
+          data: {},
+          propertyNameSchema,
+          ajv,
+        }),
+      ).toMatchObject({ reason: 'schema' });
+      expect(
+        validateDynamicPropertyName({
+          propertyName: 'ValidName',
+          data: {},
+          propertyNameSchema,
+          ajv,
+        }),
+      ).toBeNull();
+    });
+  });
+
+  describe('haveAdditionalPropertyNamesChanged', () => {
+    it('does not rebuild property descriptors when only a value or its type changes', () => {
+      expect(
+        haveAdditionalPropertyNamesChanged(
+          { declared: 'same', dynamic: { nested: true } },
+          { declared: 'same', dynamic: 'text' },
+          ['declared'],
+        ),
+      ).toBe(false);
+    });
+
+    it('detects additional-property additions, removals, and order changes', () => {
+      expect(
+        haveAdditionalPropertyNamesChanged(
+          { first: 1, second: 2 },
+          { first: 1 },
+          [],
+        ),
+      ).toBe(true);
+      expect(
+        haveAdditionalPropertyNamesChanged(
+          { second: 2, first: 1 },
+          { first: 1, second: 2 },
+          [],
+        ),
+      ).toBe(true);
+    });
+  });
+});

From 369770b7464dd4493f915093e551fe4dc3c3d524 Mon Sep 17 00:00:00 2001
From: Krasimir Chobantonov <kchobantonov@gmail.com>
Date: Sun, 2 Aug 2026 06:27:21 +0300
Subject: [PATCH 2/2] add translations

---
 .../vue-vuetify/src/complex/MixedRenderer.vue | 101 +++++++++++++-----
 .../components/AdditionalProperties.vue       |  96 ++++++++++-------
 .../i18n/additionalPropertiesTranslations.ts  |  21 ++++
 packages/vue-vuetify/src/i18n/i18nUtil.ts     |  63 +++++++++++
 packages/vue-vuetify/src/i18n/index.ts        |   1 +
 .../src/i18n/mixedRendererTranslations.ts     |  63 +++++++++++
 .../vue-vuetify/src/util/dynamicProperties.ts |  24 +++--
 .../tests/unit/util/dynamicProperties.spec.ts |  18 ++++
 .../tests/unit/util/i18nUtil.spec.ts          |  55 ++++++++++
 9 files changed, 367 insertions(+), 75 deletions(-)
 create mode 100644 packages/vue-vuetify/src/i18n/mixedRendererTranslations.ts
 create mode 100644 packages/vue-vuetify/tests/unit/util/i18nUtil.spec.ts

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 4888a06fe6..1626327d35 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -48,7 +48,7 @@
                       density="compact"
                       hide-details
                       clearable
-                      label="Search"
+                      :label="mixedTranslations.searchLabel"
                       :prepend-inner-icon="icons.current.value.search"
                       v-bind="vuetifyProps('v-text-field')"
                     />
@@ -113,14 +113,19 @@
                                 "
                                 variant="text"
                                 size="x-small"
+                                :aria-label="
+                                  showPrimitivesInTree
+                                    ? mixedTranslations.hidePrimitives
+                                    : mixedTranslations.showPrimitives
+                                "
                                 @click.stop="toggleShowPrimitives"
                               />
                             </template>
                             <span>
                               {{
                                 showPrimitivesInTree
-                                  ? 'Hide primitives'
-                                  : 'Show primitives'
+                                  ? mixedTranslations.hidePrimitives
+                                  : mixedTranslations.showPrimitives
                               }}
                             </span>
                           </v-tooltip>
@@ -131,12 +136,17 @@
                                   v-bind="props"
                                   class="mixed-tree-action mixed-hover-action"
                                   :icon="icons.current.value.itemEdit"
+                                  :aria-label="
+                                    mixedTranslations.renameAriaLabel(
+                                      item.label,
+                                    )
+                                  "
                                   variant="text"
                                   size="x-small"
                                   @click.stop="startRename(item)"
                                 />
                               </template>
-                              <span>Rename</span>
+                              <span>{{ mixedTranslations.renameTooltip }}</span>
                             </v-tooltip>
                             <v-tooltip v-if="item.canDelete" location="top">
                               <template #activator="{ props }">
@@ -144,13 +154,18 @@
                                   v-bind="props"
                                   class="mixed-tree-action mixed-hover-action"
                                   :icon="icons.current.value.itemDelete"
+                                  :aria-label="
+                                    mixedTranslations.deleteAriaLabel(
+                                      item.label,
+                                    )
+                                  "
                                   variant="text"
                                   size="x-small"
                                   color="error"
                                   @click.stop="deleteNode(item)"
                                 />
                               </template>
-                              <span>Delete</span>
+                              <span>{{ mixedTranslations.deleteTooltip }}</span>
                             </v-tooltip>
                           </template>
                         </div>
@@ -209,13 +224,14 @@
               v-bind="props"
               class="mixed-navigate-button"
               :icon="icons.current.value.visibilityOn"
+              :aria-label="mixedTranslations.viewAriaLabel(computedLabel)"
               variant="text"
               color="primary"
               :disabled="!navigationContext"
               @click="selectCurrentPath"
             />
           </template>
-          <span>View {{ computedLabel }}</span>
+          <span>{{ mixedTranslations.viewTooltip(computedLabel) }}</span>
         </v-tooltip>
       </div>
     </template>
@@ -262,7 +278,10 @@
 <script lang="ts">
 import { AdditionalPropertiesTranslationEnum } from '@/i18n';
 import { additionalPropertiesDefaultTranslations } from '@/i18n/additionalPropertiesTranslations';
-import { getAdditionalPropertiesTranslations } from '@/i18n/i18nUtil';
+import {
+  getAdditionalPropertyTranslation,
+  getMixedRendererTranslations,
+} from '@/i18n/i18nUtil';
 import {
   Resolve,
   createControlElement,
@@ -285,6 +304,7 @@ import {
   useTranslator,
   type RendererProps,
 } from '@jsonforms/vue';
+import type { ErrorObject } from 'ajv';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
@@ -295,7 +315,6 @@ import {
   inject,
   provide,
   ref,
-  unref,
   watch,
   type DefineComponent,
   type InjectionKey,
@@ -661,16 +680,17 @@ function prepareChildSchema(
   key: string,
   index: number | null,
   rootSchema: JsonSchema,
+  itemLabel?: string,
 ): JsonSchema {
   let childSchema: JsonSchema | undefined;
 
   if (index !== null) {
     childSchema = getArrayItemSchema(currentSchema, index, rootSchema);
     childSchema = childSchema
-      ? { ...childSchema, title: `Item ${index}` }
+      ? { ...childSchema, title: itemLabel }
       : {
           type: [...JSON_TYPES],
-          title: `Item ${index}`,
+          title: itemLabel,
         };
   } else {
     childSchema = findPropertySchema(currentSchema, key, rootSchema);
@@ -767,6 +787,7 @@ function buildTreeFromData(
   enabled: boolean,
   readonly: boolean,
   showPrimitives: boolean,
+  itemLabel: (index: number) => string,
 ): MixedTreeNode[] {
   const dataType = getJsonDataType(data);
   if (dataType !== 'object' && dataType !== 'array') {
@@ -880,16 +901,17 @@ function buildTreeFromData(
       value.forEach((childValue: any, index: number) => {
         const childType = getJsonDataType(childValue);
         const childPath = composePropertyPath(currentPath, `${index}`);
+        const childLabel = itemLabel(index);
         const childSchema = prepareChildSchema(
           childType ?? 'object',
           currentSchema,
           '',
           index,
           rootSchema,
+          childLabel,
         );
         const resolvedChildType =
           childType ?? getSchemaDefaultType(childSchema);
-        const childLabel = `Item ${index}`;
         if (resolvedChildType === 'object' || resolvedChildType === 'array') {
           traverse(
             childValue ?? (resolvedChildType === 'array' ? [] : {}),
@@ -999,13 +1021,37 @@ const controlRenderer = defineComponent({
       input.control.value.uischema,
       input.control.value.path + '.additionalProperties',
     );
-    const renameTranslations = getAdditionalPropertiesTranslations(
+    const translateAdditionalProperty = (
+      key: AdditionalPropertiesTranslationEnum,
+      propertyName: string,
+    ) =>
+      getAdditionalPropertyTranslation(
+        t.value,
+        additionalPropertiesDefaultTranslations,
+        i18nAdditionalPropertiesPrefix,
+        key,
+        propertyName,
+      );
+    const i18nMixedRendererPrefix = getI18nKeyPrefix(
+      input.control.value.schema,
+      input.control.value.uischema,
+      input.control.value.path + '.mixedRenderer',
+    );
+    const mixedTranslations = getMixedRendererTranslations(
       t.value,
-      additionalPropertiesDefaultTranslations,
-      i18nAdditionalPropertiesPrefix,
-      input.control.value.label,
-      renameValue,
+      i18nMixedRendererPrefix,
     );
+    const translatePropertyNameSchemaError = (error: ErrorObject) =>
+      jsonforms.i18n?.translateError?.(
+        error,
+        t.value,
+        input.control.value.uischema,
+      ) ??
+      error.message ??
+      translateAdditionalProperty(
+        AdditionalPropertiesTranslationEnum.propertyNameInvalid,
+        renameValue.value,
+      );
 
     const mixedRenderInfos = computed<
       (SchemaRenderInfo & {
@@ -1091,6 +1137,7 @@ const controlRenderer = defineComponent({
             input.control.value.enabled,
             input.control.value.readonly,
             showPrimitivesInTree.value,
+            mixedTranslations.itemLabel,
           )
         : [],
     );
@@ -1292,18 +1339,15 @@ const controlRenderer = defineComponent({
         ajv,
       });
       renameError.value = getDynamicPropertyNameErrorMessage(validationError, {
-        alreadyDefined:
-          unref(
-            renameTranslations[
-              AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
-            ],
-          ) ?? `Property '${trimmed}' already defined`,
-        invalid:
-          unref(
-            renameTranslations[
-              AdditionalPropertiesTranslationEnum.propertyNameInvalid
-            ],
-          ) ?? `Property name '${trimmed}' is invalid`,
+        alreadyDefined: translateAdditionalProperty(
+          AdditionalPropertiesTranslationEnum.propertyAlreadyDefined,
+          trimmed,
+        ),
+        invalid: translateAdditionalProperty(
+          AdditionalPropertiesTranslationEnum.propertyNameInvalid,
+          trimmed,
+        ),
+        schema: translatePropertyNameSchemaError,
       });
       if (renameError.value) {
         return;
@@ -1432,6 +1476,7 @@ const controlRenderer = defineComponent({
       renamingNodeId,
       renameValue,
       renameError,
+      mixedTranslations,
       navigationContext,
       toggleShowPrimitives,
       startRename,
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index c92cb83018..6fbf6f6e83 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -99,8 +99,8 @@
                 icon
                 variant="text"
                 elevation="0"
-                :aria-label="'Rename property ' + element.propertyName"
-                :title="'Rename property ' + element.propertyName"
+                :aria-label="renamePropertyAriaLabel(element.propertyName)"
+                :title="renamePropertyAriaLabel(element.propertyName)"
               >
                 <v-icon class="notranslate">{{
                   icons.current.value.itemEdit
@@ -127,10 +127,10 @@
                   :disabled="renamePropertyDisabled(element.propertyName)"
                   @click="renameProperty(element.propertyName)"
                 >
-                  Rename
+                  {{ translations.renameConfirm }}
                 </v-btn>
                 <v-btn variant="text" size="small" @click="cancelRename">
-                  Cancel
+                  {{ translations.cancel }}
                 </v-btn>
               </div>
             </v-card>
@@ -166,7 +166,10 @@
 <script lang="ts">
 import { AdditionalPropertiesTranslationEnum } from '@/i18n';
 import { additionalPropertiesDefaultTranslations } from '@/i18n/additionalPropertiesTranslations';
-import { getAdditionalPropertiesTranslations } from '@/i18n/i18nUtil';
+import {
+  getAdditionalPropertiesTranslations,
+  getAdditionalPropertyTranslation,
+} from '@/i18n/i18nUtil';
 import {
   Generate,
   createControlElement,
@@ -199,7 +202,6 @@ import {
   markRaw,
   provide,
   ref,
-  unref,
   type PropType,
   type DefineComponent,
 } from 'vue';
@@ -361,18 +363,14 @@ export default defineComponent({
         data: control.value.data,
       });
       const message = getDynamicPropertyNameErrorMessage(validationError, {
-        alreadyDefined:
-          unref(
-            translations[
-              AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
-            ],
-          ) ?? `Property '${newPropertyName.value}' already defined`,
-        invalid:
-          unref(
-            translations[
-              AdditionalPropertiesTranslationEnum.propertyNameInvalid
-            ],
-          ) ?? `Property name '${newPropertyName.value}' is invalid`,
+        alreadyDefined: translatePropertyName(
+          AdditionalPropertiesTranslationEnum.propertyAlreadyDefined,
+          newPropertyName.value,
+        ),
+        invalid: translatePropertyName(
+          AdditionalPropertiesTranslationEnum.propertyNameInvalid,
+          newPropertyName.value,
+        ),
       });
       const newAdditionalErrors: ErrorObject[] = message
         ? [
@@ -416,25 +414,46 @@ export default defineComponent({
       control.value.label,
       newPropertyName,
     );
-    const renameTranslations = getAdditionalPropertiesTranslations(
-      t.value,
-      additionalPropertiesDefaultTranslations,
-      i18nAdditionalPropertiesPrefix,
-      control.value.label,
-      renameValue,
-    );
+    const translatePropertyName = (
+      key: AdditionalPropertiesTranslationEnum,
+      propertyName: string,
+    ) =>
+      getAdditionalPropertyTranslation(
+        t.value,
+        additionalPropertiesDefaultTranslations,
+        i18nAdditionalPropertiesPrefix,
+        key,
+        propertyName,
+      );
+    const renamePropertyAriaLabel = (propertyName: string) =>
+      translatePropertyName(
+        AdditionalPropertiesTranslationEnum.renameAriaLabel,
+        propertyName,
+      );
 
     const propertyNameLabel =
       translations[AdditionalPropertiesTranslationEnum.propertyNameLabel];
 
     const { mdAndUp } = useDisplay();
 
+    const jsonforms = useJsonForms();
     const {
       validationMode: parentValidationMode,
       i18n,
       middleware,
-    } = useJsonForms();
+    } = jsonforms;
     const ajv = useAjv();
+    const translatePropertyNameSchemaError = (error: ErrorObject) =>
+      jsonforms.i18n?.translateError?.(
+        error,
+        t.value,
+        control.value.uischema,
+      ) ??
+      error.message ??
+      translatePropertyName(
+        AdditionalPropertiesTranslationEnum.propertyNameInvalid,
+        renameValue.value,
+      );
 
     // if the new property name is not specified then hide any errors
     const validationMode = computed(() =>
@@ -471,7 +490,9 @@ export default defineComponent({
       isControlEditable,
       propertyNameSchema,
       translations,
-      renameTranslations,
+      translatePropertyName,
+      renamePropertyAriaLabel,
+      translatePropertyNameSchemaError,
     };
   },
   computed: {
@@ -572,18 +593,15 @@ export default defineComponent({
           ajv: this.ajv,
         }),
         {
-          alreadyDefined:
-            unref(
-              this.renameTranslations[
-                AdditionalPropertiesTranslationEnum.propertyAlreadyDefined
-              ],
-            ) ?? `Property '${propertyName}' already defined`,
-          invalid:
-            unref(
-              this.renameTranslations[
-                AdditionalPropertiesTranslationEnum.propertyNameInvalid
-              ],
-            ) ?? `Property name '${propertyName}' is invalid`,
+          alreadyDefined: this.translatePropertyName(
+            AdditionalPropertiesTranslationEnum.propertyAlreadyDefined,
+            propertyName,
+          ),
+          invalid: this.translatePropertyName(
+            AdditionalPropertiesTranslationEnum.propertyNameInvalid,
+            propertyName,
+          ),
+          schema: this.translatePropertyNameSchemaError,
         },
       );
     },
diff --git a/packages/vue-vuetify/src/i18n/additionalPropertiesTranslations.ts b/packages/vue-vuetify/src/i18n/additionalPropertiesTranslations.ts
index 632415d9b7..6002efa424 100644
--- a/packages/vue-vuetify/src/i18n/additionalPropertiesTranslations.ts
+++ b/packages/vue-vuetify/src/i18n/additionalPropertiesTranslations.ts
@@ -10,6 +10,10 @@ export enum AdditionalPropertiesTranslationEnum {
   addAriaLabel = 'addAriaLabel',
   removeTooltip = 'removeTooltip',
   removeAriaLabel = 'removeAriaLabel',
+  renameTooltip = 'renameTooltip',
+  renameAriaLabel = 'renameAriaLabel',
+  renameConfirm = 'renameConfirm',
+  cancel = 'cancel',
   propertyNameLabel = 'propertyNameLabel',
   propertyNameInvalid = 'propertyNameInvalid',
   propertyAlreadyDefined = 'propertyAlreadyDefined',
@@ -39,6 +43,23 @@ export const additionalPropertiesDefaultTranslations: AdditionalPropertiesDefaul
       key: AdditionalPropertiesTranslationEnum.removeAriaLabel,
       default: () => 'Delete button',
     },
+    {
+      key: AdditionalPropertiesTranslationEnum.renameTooltip,
+      default: () => 'Rename',
+    },
+    {
+      key: AdditionalPropertiesTranslationEnum.renameAriaLabel,
+      default: (input) =>
+        input ? `Rename property '${input}' button` : 'Rename property button',
+    },
+    {
+      key: AdditionalPropertiesTranslationEnum.renameConfirm,
+      default: () => 'Rename',
+    },
+    {
+      key: AdditionalPropertiesTranslationEnum.cancel,
+      default: () => 'Cancel',
+    },
     {
       key: AdditionalPropertiesTranslationEnum.propertyNameLabel,
       default: () => 'Property Name',
diff --git a/packages/vue-vuetify/src/i18n/i18nUtil.ts b/packages/vue-vuetify/src/i18n/i18nUtil.ts
index 560c5c2255..4c4da9297c 100644
--- a/packages/vue-vuetify/src/i18n/i18nUtil.ts
+++ b/packages/vue-vuetify/src/i18n/i18nUtil.ts
@@ -5,6 +5,22 @@ import {
   type AdditionalPropertiesTranslations,
 } from './additionalPropertiesTranslations';
 import { addI18nKeyToPrefix, type Translator } from '@jsonforms/core';
+import {
+  mixedRendererDefaultTranslations,
+  MixedRendererTranslationEnum,
+} from './mixedRendererTranslations';
+
+export const getAdditionalPropertyTranslation = (
+  t: Translator,
+  defaultTranslations: AdditionalPropertiesDefaultTranslation[],
+  i18nKeyPrefix: string,
+  key: AdditionalPropertiesTranslationEnum,
+  variable?: string | null,
+): string => {
+  const translation = defaultTranslations.find((entry) => entry.key === key);
+  const defaultMessage = translation?.default(variable) ?? key;
+  return t(addI18nKeyToPrefix(i18nKeyPrefix, key), defaultMessage, variable);
+};
 
 export const getAdditionalPropertiesTranslations = (
   t: Translator,
@@ -41,3 +57,50 @@ export const getAdditionalPropertiesTranslations = (
   });
   return translations;
 };
+
+export interface MixedRendererTranslations {
+  searchLabel: string;
+  showPrimitives: string;
+  hidePrimitives: string;
+  renameTooltip: string;
+  renameAriaLabel: (propertyName: string) => string;
+  deleteTooltip: string;
+  deleteAriaLabel: (propertyName: string) => string;
+  viewTooltip: (label: string) => string;
+  viewAriaLabel: (label: string) => string;
+  itemLabel: (index: number) => string;
+}
+
+export const getMixedRendererTranslations = (
+  t: Translator,
+  i18nKeyPrefix: string,
+): MixedRendererTranslations => {
+  const translate = (
+    key: MixedRendererTranslationEnum,
+    variable?: string | number | null,
+  ): string => {
+    const translation = mixedRendererDefaultTranslations.find(
+      (entry) => entry.key === key,
+    );
+    const defaultMessage = translation?.default(variable) ?? key;
+    return t(addI18nKeyToPrefix(i18nKeyPrefix, key), defaultMessage, variable);
+  };
+
+  return {
+    searchLabel: translate(MixedRendererTranslationEnum.searchLabel),
+    showPrimitives: translate(MixedRendererTranslationEnum.showPrimitives),
+    hidePrimitives: translate(MixedRendererTranslationEnum.hidePrimitives),
+    renameTooltip: translate(MixedRendererTranslationEnum.renameTooltip),
+    renameAriaLabel: (propertyName) =>
+      translate(MixedRendererTranslationEnum.renameAriaLabel, propertyName),
+    deleteTooltip: translate(MixedRendererTranslationEnum.deleteTooltip),
+    deleteAriaLabel: (propertyName) =>
+      translate(MixedRendererTranslationEnum.deleteAriaLabel, propertyName),
+    viewTooltip: (label) =>
+      translate(MixedRendererTranslationEnum.viewTooltip, label),
+    viewAriaLabel: (label) =>
+      translate(MixedRendererTranslationEnum.viewAriaLabel, label),
+    itemLabel: (index) =>
+      translate(MixedRendererTranslationEnum.itemLabel, index),
+  };
+};
diff --git a/packages/vue-vuetify/src/i18n/index.ts b/packages/vue-vuetify/src/i18n/index.ts
index 42bda164bc..78b0632c34 100644
--- a/packages/vue-vuetify/src/i18n/index.ts
+++ b/packages/vue-vuetify/src/i18n/index.ts
@@ -1,2 +1,3 @@
 export * from './additionalPropertiesTranslations';
 export * from './i18nUtil';
+export * from './mixedRendererTranslations';
diff --git a/packages/vue-vuetify/src/i18n/mixedRendererTranslations.ts b/packages/vue-vuetify/src/i18n/mixedRendererTranslations.ts
new file mode 100644
index 0000000000..d0e3a3855a
--- /dev/null
+++ b/packages/vue-vuetify/src/i18n/mixedRendererTranslations.ts
@@ -0,0 +1,63 @@
+export interface MixedRendererDefaultTranslation {
+  key: MixedRendererTranslationEnum;
+  default: (variable?: string | number | null) => string;
+}
+
+export enum MixedRendererTranslationEnum {
+  searchLabel = 'searchLabel',
+  showPrimitives = 'showPrimitives',
+  hidePrimitives = 'hidePrimitives',
+  renameTooltip = 'renameTooltip',
+  renameAriaLabel = 'renameAriaLabel',
+  deleteTooltip = 'deleteTooltip',
+  deleteAriaLabel = 'deleteAriaLabel',
+  viewTooltip = 'viewTooltip',
+  viewAriaLabel = 'viewAriaLabel',
+  itemLabel = 'itemLabel',
+}
+
+export const mixedRendererDefaultTranslations: MixedRendererDefaultTranslation[] =
+  [
+    {
+      key: MixedRendererTranslationEnum.searchLabel,
+      default: () => 'Search',
+    },
+    {
+      key: MixedRendererTranslationEnum.showPrimitives,
+      default: () => 'Show primitives',
+    },
+    {
+      key: MixedRendererTranslationEnum.hidePrimitives,
+      default: () => 'Hide primitives',
+    },
+    {
+      key: MixedRendererTranslationEnum.renameTooltip,
+      default: () => 'Rename',
+    },
+    {
+      key: MixedRendererTranslationEnum.renameAriaLabel,
+      default: (input) =>
+        input ? `Rename property '${input}' button` : 'Rename property button',
+    },
+    {
+      key: MixedRendererTranslationEnum.deleteTooltip,
+      default: () => 'Delete',
+    },
+    {
+      key: MixedRendererTranslationEnum.deleteAriaLabel,
+      default: (input) =>
+        input ? `Delete property '${input}' button` : 'Delete property button',
+    },
+    {
+      key: MixedRendererTranslationEnum.viewTooltip,
+      default: (input) => (input ? `View ${input}` : 'View'),
+    },
+    {
+      key: MixedRendererTranslationEnum.viewAriaLabel,
+      default: (input) => (input ? `View ${input} button` : 'View button'),
+    },
+    {
+      key: MixedRendererTranslationEnum.itemLabel,
+      default: (input) => `Item ${input ?? ''}`.trim(),
+    },
+  ];
diff --git a/packages/vue-vuetify/src/util/dynamicProperties.ts b/packages/vue-vuetify/src/util/dynamicProperties.ts
index 843030d965..b8c298eab3 100644
--- a/packages/vue-vuetify/src/util/dynamicProperties.ts
+++ b/packages/vue-vuetify/src/util/dynamicProperties.ts
@@ -1,10 +1,11 @@
 import { Resolve, type JsonSchema, type JsonSchema7 } from '@jsonforms/core';
 import type Ajv from 'ajv';
+import type { ErrorObject } from 'ajv';
 
 export type DynamicPropertyNameValidationError =
   | { reason: 'alreadyDefined' }
   | { reason: 'invalid' }
-  | { reason: 'schema'; message?: string };
+  | { reason: 'schema'; errors: ErrorObject[] };
 
 export interface DynamicPropertyNameValidationOptions {
   propertyName: string;
@@ -139,11 +140,7 @@ export const validateDynamicPropertyName = ({
     ajv &&
     !ajv.validate(propertyNameSchema, propertyName)
   ) {
-    const message = ajv.errors
-      ?.map((error) => error.message)
-      .filter((entry): entry is string => Boolean(entry))
-      .join(', ');
-    return { reason: 'schema', message: message || undefined };
+    return { reason: 'schema', errors: [...(ajv.errors ?? [])] };
   }
 
   return null;
@@ -151,7 +148,11 @@ export const validateDynamicPropertyName = ({
 
 export const getDynamicPropertyNameErrorMessage = (
   error: DynamicPropertyNameValidationError | null,
-  messages: { alreadyDefined: string; invalid: string },
+  messages: {
+    alreadyDefined: string;
+    invalid: string;
+    schema?: (error: ErrorObject) => string;
+  },
 ): string | null => {
   if (!error) {
     return null;
@@ -162,5 +163,12 @@ export const getDynamicPropertyNameErrorMessage = (
   if (error.reason === 'invalid') {
     return messages.invalid;
   }
-  return error.message ?? messages.invalid;
+  const translatedErrors = error.errors
+    .map((schemaError) =>
+      messages.schema
+        ? messages.schema(schemaError)
+        : (schemaError.message ?? ''),
+    )
+    .filter(Boolean);
+  return translatedErrors.join(', ') || messages.invalid;
 };
diff --git a/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts b/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts
index 960829e371..ac20fbabc1 100644
--- a/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts
+++ b/packages/vue-vuetify/tests/unit/util/dynamicProperties.spec.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 import {
   composePropertyPath,
   findPropertySchema,
+  getDynamicPropertyNameErrorMessage,
   getPropertyNameSchema,
   haveAdditionalPropertyNamesChanged,
   validateDynamicPropertyName,
@@ -148,6 +149,23 @@ describe('dynamic property utilities', () => {
         }),
       ).toBeNull();
     });
+
+    it('allows JSON Schema errors to be translated by the caller', () => {
+      const validationError = validateDynamicPropertyName({
+        propertyName: 'invalid',
+        data: {},
+        propertyNameSchema: { type: 'string', pattern: '^[A-Z]' },
+        ajv,
+      });
+
+      expect(
+        getDynamicPropertyNameErrorMessage(validationError, {
+          alreadyDefined: 'Already defined',
+          invalid: 'Invalid',
+          schema: (error) => `Translated ${error.keyword} error`,
+        }),
+      ).toBe('Translated pattern error');
+    });
   });
 
   describe('haveAdditionalPropertyNamesChanged', () => {
diff --git a/packages/vue-vuetify/tests/unit/util/i18nUtil.spec.ts b/packages/vue-vuetify/tests/unit/util/i18nUtil.spec.ts
new file mode 100644
index 0000000000..9a07fee897
--- /dev/null
+++ b/packages/vue-vuetify/tests/unit/util/i18nUtil.spec.ts
@@ -0,0 +1,55 @@
+import { createTranslator } from '@jsonforms/core';
+import { describe, expect, it } from 'vitest';
+import { additionalPropertiesDefaultTranslations } from '../../../src/i18n/additionalPropertiesTranslations';
+import {
+  getAdditionalPropertyTranslation,
+  getMixedRendererTranslations,
+} from '../../../src/i18n/i18nUtil';
+import { AdditionalPropertiesTranslationEnum } from '../../../src/i18n';
+
+describe('Vuetify i18n utilities', () => {
+  it('uses translated Additional Properties action labels with their values', () => {
+    const translate = createTranslator((id, _defaultMessage, value) =>
+      id === 'control.additionalProperties.renameAriaLabel'
+        ? `Edit ${value}`
+        : undefined,
+    );
+
+    expect(
+      getAdditionalPropertyTranslation(
+        translate,
+        additionalPropertiesDefaultTranslations,
+        'control.additionalProperties',
+        AdditionalPropertiesTranslationEnum.renameAriaLabel,
+        'dynamicKey',
+      ),
+    ).toBe('Edit dynamicKey');
+  });
+
+  it('provides translated mixed tree strings and generated item labels', () => {
+    const translate = createTranslator((id, _defaultMessage, value) => {
+      if (id === 'control.mixedRenderer.searchLabel') {
+        return 'Find node';
+      }
+      if (id === 'control.mixedRenderer.itemLabel') {
+        return `Entry ${value}`;
+      }
+      if (id === 'control.mixedRenderer.renameAriaLabel') {
+        return `Edit ${value} button`;
+      }
+      return undefined;
+    });
+
+    const translations = getMixedRendererTranslations(
+      translate,
+      'control.mixedRenderer',
+    );
+
+    expect(translations.searchLabel).toBe('Find node');
+    expect(translations.itemLabel(3)).toBe('Entry 3');
+    expect(translations.renameAriaLabel('dynamicKey')).toBe(
+      'Edit dynamicKey button',
+    );
+    expect(translations.showPrimitives).toBe('Show primitives');
+  });
+});