diff --git a/packages/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts
index f67730334..47493be0f 100644
--- a/packages/core/src/mappers/renderer.ts
+++ b/packages/core/src/mappers/renderer.ts
@@ -592,11 +592,12 @@ export const mapStateToControlProps = (
   const required =
     controlElement.scope !== undefined &&
     isRequired(ownProps.schema, controlElement.scope, rootSchema);
-  const resolvedSchema = Resolve.schema(
-    ownProps.schema || rootSchema,
-    controlElement.scope,
-    rootSchema
-  );
+  const resolvedSchema =
+    Resolve.schema(
+      ownProps.schema || rootSchema,
+      controlElement.scope,
+      rootSchema
+    ) ?? ownProps.schema; // if resolve fails then rely that the ownProps.schema if exist
   const errors = getErrorAt(path, resolvedSchema)(state);
 
   const description =
@@ -871,7 +872,21 @@ export const mapStateToArrayControlProps = (
   const { path, schema, uischema, label, ...props } =
     mapStateToControlWithDetailProps(state, ownProps);
 
-  const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
+  let resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
+  if ((resolvedSchema as any) === true) {
+    // help the testers to determine the mixed control
+    resolvedSchema = {
+      type: [
+        'array',
+        'boolean',
+        'integer',
+        'null',
+        'number',
+        'object',
+        'string',
+      ],
+    };
+  }
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
 
   return {
diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index 92880f6a2..2e903270c 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -123,6 +123,14 @@ const resolveSchemaWithSegments = (
   pathSegments: string[],
   rootSchema: JsonSchema
 ): JsonSchema => {
+  if (
+    typeof schema === 'boolean' &&
+    (!pathSegments || pathSegments.length === 0)
+  ) {
+    // add the case where the schema can be true value for example: items: true or additionalProperties: false
+    return schema;
+  }
+
   if (isEmpty(schema)) {
     return undefined;
   }
diff --git a/packages/examples/src/examples/json-editor.ts b/packages/examples/src/examples/json-editor.ts
new file mode 100644
index 000000000..6366e5ae7
--- /dev/null
+++ b/packages/examples/src/examples/json-editor.ts
@@ -0,0 +1,50 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'],
+  additionalProperties: true,
+  items: {
+    type: ['array', 'boolean', 'integer', 'null', 'number', 'object', 'string'],
+  },
+};
+
+export const uischema = {
+  type: 'Control',
+  scope: '#/',
+};
+
+const data = undefined as any;
+
+registerExamples([
+  {
+    name: 'json-editor',
+    label: 'JSON Editor',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/examples/jsonschema.ts b/packages/examples/src/examples/jsonschema.ts
new file mode 100644
index 000000000..79c37c6d2
--- /dev/null
+++ b/packages/examples/src/examples/jsonschema.ts
@@ -0,0 +1,592 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import {
+  type JsonFormsUISchemaRegistryEntry,
+  type JsonSchema,
+  NOT_APPLICABLE,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import { registerExamples } from '../register';
+import { StateProps } from '../example';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://json-schema.org/draft-07/schema#',
+  title: 'Core schema meta-schema',
+  definitions: {
+    schemaArray: {
+      type: 'array',
+      minItems: 1,
+      items: { $ref: '#' },
+    },
+    nonNegativeInteger: {
+      type: 'integer',
+      minimum: 0,
+    },
+    nonNegativeIntegerDefault0: {
+      allOf: [{ $ref: '#/definitions/nonNegativeInteger' }, { default: 0 }],
+    },
+    simpleTypes: {
+      type: 'string',
+      enum: [
+        'array',
+        'boolean',
+        'integer',
+        'null',
+        'number',
+        'object',
+        'string',
+      ],
+    },
+    stringArray: {
+      type: 'array',
+      items: { type: 'string' },
+      uniqueItems: true,
+      default: [] as any,
+    },
+  },
+  type: ['object', 'boolean'],
+  properties: {
+    $id: {
+      type: 'string',
+      format: 'uri-reference',
+    },
+    $schema: {
+      type: 'string',
+      format: 'uri',
+    },
+    $ref: {
+      type: 'string',
+      format: 'uri-reference',
+    },
+    $comment: {
+      type: 'string',
+    },
+    title: {
+      type: 'string',
+    },
+    description: {
+      type: 'string',
+    },
+    default: true,
+    readOnly: {
+      type: 'boolean',
+      default: false,
+    },
+    writeOnly: {
+      type: 'boolean',
+      default: false,
+    },
+    examples: {
+      type: 'array',
+      items: true,
+    },
+    multipleOf: {
+      type: 'number',
+      exclusiveMinimum: 0,
+    },
+    maximum: {
+      type: 'number',
+    },
+    exclusiveMaximum: {
+      type: 'number',
+    },
+    minimum: {
+      type: 'number',
+    },
+    exclusiveMinimum: {
+      type: 'number',
+    },
+    maxLength: { $ref: '#/definitions/nonNegativeInteger' },
+    minLength: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+    pattern: {
+      type: 'string',
+      format: 'regex',
+    },
+    additionalItems: { $ref: '#' },
+    items: {
+      anyOf: [{ $ref: '#' }, { $ref: '#/definitions/schemaArray' }],
+      default: true,
+    },
+    maxItems: { $ref: '#/definitions/nonNegativeInteger' },
+    minItems: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+    uniqueItems: {
+      type: 'boolean',
+      default: false,
+    },
+    contains: { $ref: '#' },
+    maxProperties: { $ref: '#/definitions/nonNegativeInteger' },
+    minProperties: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+    required: { $ref: '#/definitions/stringArray' },
+    additionalProperties: { $ref: '#' },
+    definitions: {
+      type: 'object',
+      additionalProperties: { $ref: '#' },
+      default: {},
+    },
+    properties: {
+      type: 'object',
+      additionalProperties: { $ref: '#' },
+      default: {},
+    },
+    patternProperties: {
+      type: 'object',
+      additionalProperties: { $ref: '#' },
+      propertyNames: { format: 'regex' },
+      default: {},
+    },
+    dependencies: {
+      type: 'object',
+      additionalProperties: {
+        anyOf: [{ $ref: '#' }, { $ref: '#/definitions/stringArray' }],
+      },
+    },
+    propertyNames: { $ref: '#' },
+    const: true,
+    enum: {
+      type: 'array',
+      items: true,
+      minItems: 1,
+      uniqueItems: true,
+    },
+    type: {
+      anyOf: [
+        { $ref: '#/definitions/simpleTypes' },
+        {
+          type: 'array',
+          items: { $ref: '#/definitions/simpleTypes' },
+          minItems: 1,
+          uniqueItems: true,
+        },
+      ],
+    },
+    format: { type: 'string' },
+    contentMediaType: { type: 'string' },
+    contentEncoding: { type: 'string' },
+    if: { $ref: '#' },
+    then: { $ref: '#' },
+    else: { $ref: '#' },
+    allOf: { $ref: '#/definitions/schemaArray' },
+    anyOf: { $ref: '#/definitions/schemaArray' },
+    oneOf: { $ref: '#/definitions/schemaArray' },
+    not: { $ref: '#' },
+  },
+  default: true,
+};
+
+export const uischema: UISchemaElement = undefined as any as UISchemaElement;
+
+export const data = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      minLength: 3,
+      description: 'Please enter your name',
+    },
+    vegetarian: {
+      type: 'boolean',
+    },
+    birthDate: {
+      type: 'string',
+      format: 'date',
+    },
+    nationality: {
+      type: 'string',
+      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
+    },
+    personalData: {
+      type: 'object',
+      properties: {
+        age: {
+          type: 'integer',
+          description: 'Please enter your age.',
+        },
+        height: {
+          type: 'number',
+        },
+        drivingSkill: {
+          type: 'number',
+          maximum: 10,
+          minimum: 1,
+          default: 7,
+        },
+      },
+      required: ['age', 'height'],
+    },
+    occupation: {
+      type: 'string',
+    },
+    postalCode: {
+      type: 'string',
+      maxLength: 5,
+    },
+  },
+  required: ['occupation', 'nationality'],
+};
+
+const shouldContainTypeCondition = (type: string[]) => {
+  return {
+    scope: '#/properties/type',
+    schema: {
+      anyOf: [
+        {
+          type: 'string',
+          enum: type,
+        },
+        {
+          type: 'array',
+          items: {
+            type: 'string',
+          },
+          contains: {
+            type: 'string',
+            enum: type,
+          },
+        },
+      ],
+    },
+  };
+};
+
+const typeIsSpecifiedCondition = {
+  scope: '#/properties/type',
+  schema: {
+    oneOf: [
+      {
+        type: 'string',
+        enum: [
+          'string',
+          'number',
+          'integer',
+          'array',
+          'object',
+          'boolean',
+          'null',
+        ],
+      },
+      {
+        type: 'array',
+        items: {
+          type: 'string',
+          enum: [
+            'string',
+            'number',
+            'integer',
+            'array',
+            'object',
+            'boolean',
+            'null',
+          ],
+        },
+        minItems: 1,
+        uniqueItems: true,
+      },
+    ],
+  },
+};
+
+const properties = {
+  type: 'Control',
+  scope: '#/properties/properties',
+};
+
+const required = {
+  type: 'Control',
+  scope: '#/properties/required',
+};
+
+const constraintsLayout = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      label: 'Number',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['number', 'integer']),
+      },
+      elements: [
+        {
+          type: 'VerticalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/multipleOf',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/maximum',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/exclusiveMaximum',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/minimum',
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/exclusiveMinimum',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'String',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['string']),
+      },
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/maxLength',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/minLength',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/pattern',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'Array',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['array']),
+      },
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/minItems',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/maxItems',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/uniqueItems',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'Object',
+      rule: {
+        effect: 'SHOW',
+        condition: shouldContainTypeCondition(['object']),
+      },
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/minProperties',
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/maxProperties',
+        },
+      ],
+    },
+  ],
+};
+
+const controlLabel = (
+  controlSchemaPath: string,
+  controlLabel: string,
+  controlSchemaType: string | undefined = undefined
+) => {
+  return {
+    tester: (jsonSchema: JsonSchema, schemaPath: string, _path: string) => {
+      if (
+        controlSchemaPath === schemaPath &&
+        (controlSchemaType === undefined ||
+          controlSchemaType === jsonSchema.type)
+      ) {
+        return 2;
+      }
+      return NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'Control',
+      scope: '#',
+      label: controlLabel,
+    },
+  };
+};
+
+export const uischemas = [
+  controlLabel('#/properties/minItems', 'Min Items', 'number'),
+  controlLabel('#/properties/maxItems', 'Max Items'),
+  {
+    tester: (jsonSchema: JsonSchema, schemaPath: string, path: string) => {
+      if (
+        path === 'type' &&
+        schemaPath === '#/properties/type' &&
+        jsonSchema.type === 'array'
+      ) {
+        return 2;
+      }
+      return NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'Control',
+      scope: '#',
+    },
+  },
+  {
+    tester: (jsonSchema: JsonSchema, _schemaPath: string, _path: string) => {
+      return 'http://json-schema.org/draft-07/schema#' ===
+        (jsonSchema as any).$id && jsonSchema.type === 'object'
+        ? 2
+        : NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'Categorization',
+      elements: [
+        {
+          type: 'Category',
+          label: 'Basic',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                { type: 'Control', scope: '#/properties/$id' },
+                { type: 'Control', scope: '#/properties/$schema' },
+                { type: 'Control', scope: '#/properties/title' },
+                { type: 'Control', scope: '#/properties/description' },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'Category',
+          label: 'Structure',
+          elements: [
+            {
+              type: 'VerticalLayout',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/type',
+                  options: {
+                    'label-0': 'Single Type',
+                    'label-1': 'Multiple Types',
+                  },
+                },
+                {
+                  type: 'Categorization',
+                  rule: {
+                    effect: 'SHOW',
+                    condition: shouldContainTypeCondition(['object']),
+                  },
+                  elements: [
+                    {
+                      type: 'Category',
+                      label: 'Properties',
+                      elements: [properties],
+                    },
+                    {
+                      type: 'Category',
+                      label: 'Required',
+                      elements: [required],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'Category',
+          label: 'Constraints',
+          rule: {
+            effect: 'SHOW',
+            condition: typeIsSpecifiedCondition,
+          },
+          elements: [constraintsLayout],
+        },
+      ],
+      options: {
+        variant: 'stepper',
+        showNavButtons: true,
+      },
+    },
+  },
+  {
+    tester: (jsonSchema: JsonSchema, _schemaPath: string, _path: string) => {
+      return 'http://json-schema.org/draft-07/schema#' ===
+        (jsonSchema as any).$id && jsonSchema.type === 'boolean'
+        ? 2
+        : NOT_APPLICABLE;
+    },
+    uischema: {
+      type: 'VerticalLayout',
+      elements: [{ type: 'Control', scope: '#/' }],
+    },
+  },
+];
+
+const actions = [
+  {
+    label: 'Register UISchema',
+    apply: (props: StateProps) => {
+      return {
+        ...props,
+        uischemas: uischemas,
+      };
+    },
+  },
+  {
+    label: 'Unregister UISchema',
+    apply: (props: StateProps) => {
+      const uischemas: JsonFormsUISchemaRegistryEntry[] =
+        undefined as any as JsonFormsUISchemaRegistryEntry[];
+      return {
+        ...props,
+        uischemas: uischemas,
+      };
+    },
+  },
+];
+
+registerExamples([
+  {
+    name: 'jsonschema',
+    label: 'JsonSchema',
+    data,
+    schema: schema as any as JsonSchema,
+    uischema,
+    actions,
+  },
+]);
diff --git a/packages/examples/src/examples/mixed-object.ts b/packages/examples/src/examples/mixed-object.ts
new file mode 100644
index 000000000..8e41e7971
--- /dev/null
+++ b/packages/examples/src/examples/mixed-object.ts
@@ -0,0 +1,85 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Mixed Types Example',
+  type: 'object',
+  properties: {
+    mixedSimple: {
+      type: ['string', 'boolean', 'integer'],
+      description: 'This property can be a string, boolean, or integer.',
+    },
+    nullableString: {
+      type: ['string', 'null'],
+    },
+    mixed: {
+      type: [
+        'array',
+        'boolean',
+        'integer',
+        'null',
+        'number',
+        'object',
+        'string',
+      ],
+    },
+  },
+  required: ['mixedSimple'],
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/mixedSimple',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/nullableString',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/mixed',
+    },
+  ],
+};
+
+const data = {
+  mixedSimple: 'String',
+  nullableString: null as any,
+};
+
+registerExamples([
+  {
+    name: 'mixed-object',
+    label: 'Mixed Object',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/examples/mixed.ts b/packages/examples/src/examples/mixed.ts
new file mode 100644
index 000000000..1de6590a1
--- /dev/null
+++ b/packages/examples/src/examples/mixed.ts
@@ -0,0 +1,47 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  type: ['string', 'boolean', 'integer', 'null'],
+};
+
+export const uischema = {
+  type: 'Control',
+  scope: '#/',
+};
+
+const data = undefined as any;
+
+registerExamples([
+  {
+    name: 'mixed',
+    label: 'Mixed',
+    data,
+    schema,
+    uischema,
+  },
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index c50414362..cb8684ed4 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -75,11 +75,15 @@ import * as additionalErrors from './examples/additional-errors';
 import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
 import * as additionalProperties from './examples/additional-properties';
 import * as login from './examples/login';
+import * as mixed from './examples/mixed';
+import * as mixedObject from './examples/mixed-object';
 import * as string from './examples/string';
 export * from './register';
 export * from './example';
 
 import * as ifThenElse from './examples/if_then_else';
+import * as jsonschema from './examples/jsonschema';
+import * as jsoneditor from './examples/json-editor';
 
 export {
   issue_1948,
@@ -122,6 +126,8 @@ export {
   oneOfRecursive,
   huge,
   ifThenElse,
+  jsoneditor,
+  jsonschema,
   onChange,
   enumExample,
   radioGroupExample,
@@ -134,6 +140,8 @@ export {
   additionalErrors,
   additionalProperties,
   login,
+  mixed,
+  mixedObject,
   issue_1884,
   arrayWithDefaults,
   string,
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index 7d77ae9ee..1451da8be 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -29,9 +29,9 @@
                 :disabled="
                   !control.enabled ||
                   (appliedOptions.restrict &&
-                    arraySchema !== undefined &&
-                    arraySchema.maxItems !== undefined &&
-                    dataLength >= arraySchema.maxItems)
+                    control.arraySchema !== undefined &&
+                    control.arraySchema.maxItems !== undefined &&
+                    dataLength >= control.arraySchema.maxItems)
                 "
               >
                 <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
@@ -150,9 +150,9 @@
                         :disabled="
                           !control.enabled ||
                           (appliedOptions.restrict &&
-                            arraySchema !== undefined &&
-                            arraySchema.minItems !== undefined &&
-                            dataLength <= arraySchema.minItems)
+                            control.arraySchema !== undefined &&
+                            control.arraySchema.minItems !== undefined &&
+                            dataLength <= control.arraySchema.minItems)
                         "
                       >
                         <v-icon class="notranslate">{{
@@ -190,17 +190,10 @@
 
 <script lang="ts">
 import {
-  Resolve,
-  and,
   composePaths,
   createDefaultValue,
   findUISchema,
-  isObjectArray,
-  rankWith,
-  uiTypeIs,
   type ControlElement,
-  type JsonFormsRendererRegistryEntry,
-  type JsonSchema,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -278,13 +271,6 @@ const controlRenderer = defineComponent({
         this.control.uischema,
       );
     },
-    arraySchema(): JsonSchema | undefined {
-      return Resolve.schema(
-        this.control.rootSchema,
-        this.control.uischema.scope,
-        this.control.rootSchema,
-      );
-    },
   },
   methods: {
     composePaths,
diff --git a/packages/vue-vuetify/src/complex/AllOfRenderer.vue b/packages/vue-vuetify/src/complex/AllOfRenderer.vue
index ddbdadc0c..233d3e433 100644
--- a/packages/vue-vuetify/src/complex/AllOfRenderer.vue
+++ b/packages/vue-vuetify/src/complex/AllOfRenderer.vue
@@ -20,7 +20,7 @@
         />
         <dispatch-renderer
           v-for="(allOfRenderInfo, allOfIndex) in allOfRenderInfos"
-          :key="`${control.path}-${allOfIndex}`"
+          :key="`${control.path}-${allOfRenderInfos.length}-${allOfIndex}`"
           :schema="allOfRenderInfo.schema"
           :uischema="allOfRenderInfo.uischema"
           :path="control.path"
diff --git a/packages/vue-vuetify/src/complex/AnyOfRenderer.vue b/packages/vue-vuetify/src/complex/AnyOfRenderer.vue
index bdaba5590..3ce0d5990 100644
--- a/packages/vue-vuetify/src/complex/AnyOfRenderer.vue
+++ b/packages/vue-vuetify/src/complex/AnyOfRenderer.vue
@@ -10,7 +10,7 @@
     <v-tabs v-model="selectedIndex">
       <v-tab
         v-for="(anyOfRenderInfo, anyOfIndex) in anyOfRenderInfos"
-        :key="`${control.path}-${anyOfIndex}`"
+        :key="`${control.path}-${anyOfRenderInfos.length}-${anyOfIndex}`"
       >
         {{ anyOfRenderInfo.label }}
       </v-tab>
@@ -19,7 +19,7 @@
     <v-window v-model="selectedIndex">
       <v-window-item
         v-for="(anyOfRenderInfo, anyOfIndex) in anyOfRenderInfos"
-        :key="`${control.path}-${anyOfIndex}`"
+        :key="`${control.path}-${anyOfRenderInfos.length}-${anyOfIndex}`"
       >
         <dispatch-renderer
           v-if="selectedIndex === anyOfIndex"
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
index 8129c1a83..0ef4fc553 100644
--- a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
@@ -35,9 +35,9 @@
               :disabled="
                 !control.enabled ||
                 (appliedOptions.restrict &&
-                  arraySchema !== undefined &&
-                  arraySchema.maxItems !== undefined &&
-                  dataLength >= arraySchema.maxItems)
+                  control.arraySchema !== undefined &&
+                  control.arraySchema.maxItems !== undefined &&
+                  dataLength >= control.arraySchema.maxItems)
               "
               @click="addButtonClick"
             >
@@ -58,8 +58,8 @@
             <thead v-if="control.schema.type === 'object'">
               <tr>
                 <th
-                  v-for="(prop, index) in getValidColumnProps(control.schema)"
-                  :key="`${control.path}-header-${index}`"
+                  v-for="(prop, index) in validColumnProps"
+                  :key="`${control.path}-header-${validColumnProps.length}-${index}`"
                   scope="col"
                 >
                   {{ title(prop) }}
@@ -78,14 +78,17 @@
             <tbody>
               <tr
                 v-for="(element, index) in control.data"
-                :key="`${control.path}-${index}`"
+                :key="`${control.path}-${control.data.length}-${index}`"
                 :class="styles.arrayList.item"
               >
                 <td
-                  v-for="propName in getValidColumnProps(control.schema)"
+                  v-for="propName in validColumnProps"
                   :key="
                     composePaths(
-                      composePaths(control.path, `${index}`),
+                      composePaths(
+                        control.path,
+                        `${validColumnProps.length}-${index}`,
+                      ),
                       propName,
                     )
                   "
@@ -162,9 +165,9 @@
                         :disabled="
                           !control.enabled ||
                           (appliedOptions.restrict &&
-                            arraySchema !== undefined &&
-                            arraySchema.minItems !== undefined &&
-                            dataLength <= arraySchema.minItems)
+                            control.arraySchema !== undefined &&
+                            control.arraySchema.minItems !== undefined &&
+                            dataLength <= control.arraySchema.minItems)
                         "
                         @click="removeItemsClick($event, [index])"
                       >
@@ -190,11 +193,9 @@
 
 <script lang="ts">
 import {
-  Resolve,
   composePaths,
   createDefaultValue,
   type ControlElement,
-  type JsonSchema,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -244,23 +245,29 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const icons = useIcons();
+    const input = useJsonFormsArrayControl(props);
 
     return {
-      ...useVuetifyArrayControl(useJsonFormsArrayControl(props)),
+      ...useVuetifyArrayControl(input),
       icons,
     };
   },
   computed: {
-    arraySchema(): JsonSchema | undefined {
-      return Resolve.schema(
-        this.control.rootSchema,
-        this.control.uischema.scope,
-        this.control.rootSchema,
-      );
-    },
     dataLength(): number {
       return this.control.data ? this.control.data.length : 0;
     },
+    validColumnProps() {
+      if (
+        this.control.schema.type === 'object' &&
+        typeof this.control.schema.properties === 'object'
+      ) {
+        return Object.keys(this.control.schema.properties).filter(
+          (prop) => this.control.schema.properties![prop].type !== 'array',
+        );
+      }
+      // primitives
+      return [''];
+    },
   },
   methods: {
     composePaths,
@@ -283,18 +290,6 @@ const controlRenderer = defineComponent({
       event.stopPropagation();
       this.removeItems?.(this.control.path, toDelete)();
     },
-    getValidColumnProps(scopedSchema: JsonSchema) {
-      if (
-        scopedSchema.type === 'object' &&
-        typeof scopedSchema.properties === 'object'
-      ) {
-        return Object.keys(scopedSchema.properties).filter(
-          (prop) => scopedSchema.properties![prop].type !== 'array',
-        );
-      }
-      // primitives
-      return [''];
-    },
     title(prop: string) {
       return this.control.schema.properties?.[prop]?.title ?? startCase(prop);
     },
diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts b/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
new file mode 100644
index 000000000..3ef85f9a7
--- /dev/null
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.entry.ts
@@ -0,0 +1,74 @@
+import {
+  isControl,
+  rankWith,
+  resolveSchema,
+  type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+  type Scopable,
+  type TesterContext,
+  type UISchemaElement,
+} from '@jsonforms/core';
+
+import isEmpty from 'lodash/isEmpty';
+import mixedRenderer from './MixedRenderer.vue';
+
+export const isMixedSchema = (
+  uischema: UISchemaElement & Scopable,
+  schema: JsonSchema,
+  context: TesterContext,
+) => {
+  if (!schema || typeof schema !== 'object') {
+    return false;
+  }
+
+  if (Array.isArray(schema.type)) {
+    return true;
+  }
+  if (schema.type === 'object') {
+    const schemaPath = uischema.scope;
+    if (schemaPath && !isEmpty(schemaPath)) {
+      let currentDataSchema = schema;
+      currentDataSchema = resolveSchema(
+        schema,
+        schemaPath,
+        context?.rootSchema,
+      );
+      if (currentDataSchema === undefined) {
+        return false;
+      }
+      if (Array.isArray(currentDataSchema.type)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+export const isMixedControl = (
+  uischema: UISchemaElement,
+  schema: JsonSchema,
+  context: TesterContext,
+) =>
+  isMixedSchema(uischema, schema, context) &&
+  (isControl(uischema) || isDefaultGenUiSchema(uischema));
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: mixedRenderer,
+  tester: rankWith(20, isMixedControl),
+};
+
+function isDefaultGenUiSchema(uischema: UISchemaElement): boolean {
+  const elements = (uischema as any)?.elements;
+  let result = false;
+  if (
+    (uischema.type === 'VerticalLayout' || uischema.type === 'Group') &&
+    Array.isArray(elements)
+  ) {
+    if (elements.length == 1) {
+      // if the uischema is the default then take control
+      result = elements[0].scope === '#' && elements[0].type === 'Control';
+    }
+  }
+  return result;
+}
diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
new file mode 100644
index 000000000..3e8c16557
--- /dev/null
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="prefixed-input" v-if="control.visible">
+    <template v-if="valueType === 'array' || valueType === 'object'">
+      <v-expansion-panels accordion flat v-model="currentlyExpanded">
+        <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-if="mixedRenderInfos && mixedRenderInfos.length > 1"
+                    v-disabled-icon-focus
+                    :id="control.id + '-input-selector'"
+                    :disabled="!control.enabled"
+                    :label="computedLabel"
+                    :required="control.required"
+                    :error-messages="control.errors"
+                    :items="mixedRenderInfos"
+                    :clearable="control.enabled"
+                    @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
+                ></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"
+            >
+            </dispatch-renderer>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </template>
+    <template v-else>
+      <v-select
+        class="select"
+        v-if="mixedRenderInfos && mixedRenderInfos.length > 1"
+        v-disabled-icon-focus
+        :id="control.id + '-input-selector'"
+        :disabled="!control.enabled"
+        :label="computedLabel"
+        :required="control.required"
+        :error-messages="control.errors"
+        :items="mixedRenderInfos"
+        :clearable="control.enabled"
+        @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"
+      >
+      </dispatch-renderer>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  createControlElement,
+  createDefaultValue,
+  findUISchema,
+  type ControlElement,
+  type JsonFormsUISchemaRegistryEntry,
+  type JsonSchema,
+  type JsonSchema7,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  useJsonFormsControl,
+  type RendererProps,
+} from '@jsonforms/vue';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
+import {
+  VCol,
+  VContainer,
+  VExpansionPanel,
+  VExpansionPanelText,
+  VExpansionPanelTitle,
+  VRow,
+  VSelect,
+} from 'vuetify/components';
+import { DisabledIconFocus } from '../controls';
+import {
+  IsDynamicPropertyContext,
+  useCombinatorTranslations,
+  useIcons,
+  useJsonForms,
+  useTranslator,
+  useVuetifyControl,
+} from '../util';
+
+interface SchemaRenderInfo {
+  schema: JsonSchema;
+  uischema: UISchemaElement;
+  label: string;
+}
+
+function cleanSchema(schema: JsonSchema) {
+  // Define valid keywords for each JSON Schema type
+  const validKeywords: Record<string, string[]> = {
+    array: ['items', 'minItems', 'maxItems', 'uniqueItems', 'contains'],
+    object: [
+      'properties',
+      'required',
+      'additionalProperties',
+      'minProperties',
+      'maxProperties',
+      'patternProperties',
+      'dependencies',
+      'propertyNames',
+    ],
+    string: ['minLength', 'maxLength', 'pattern', 'format'],
+    number: [
+      'minimum',
+      'maximum',
+      'exclusiveMinimum',
+      'exclusiveMaximum',
+      'multipleOf',
+    ],
+    integer: [
+      'minimum',
+      'maximum',
+      'exclusiveMinimum',
+      'exclusiveMaximum',
+      'multipleOf',
+    ],
+    boolean: [],
+    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];
+        });
+      }
+    }
+  }
+
+  return clean(schema);
+}
+
+function getSchemaTypesAsArray(schema: JsonSchema): string[] {
+  if (typeof schema.type === 'string') {
+    return [schema.type];
+  }
+
+  if (Array.isArray(schema.type)) {
+    return schema.type;
+  }
+
+  if (Array.isArray(schema.enum)) {
+    const enumTypes = new Set(
+      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'];
+}
+
+const createMixedRenderInfos = (
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  control: ControlElement,
+  path: string,
+  uischemas: JsonFormsUISchemaRegistryEntry[],
+): SchemaRenderInfo[] => {
+  let schemas: JsonSchema[] = [];
+
+  if (typeof schema.type === 'string') {
+    schemas.push(schema);
+  } else {
+    const types = getSchemaTypesAsArray(schema);
+
+    types.forEach((type) => {
+      schemas.push({
+        ...schema,
+        type,
+        default:
+          schema.default !== undefined &&
+          type === getJsonDataType(schema.default)
+            ? schema.default
+            : undefined,
+      });
+    });
+  }
+
+  return schemas.map((schema) => {
+    if (schema.type === 'object') {
+      schema.additionalProperties =
+        schema.additionalProperties !== false
+          ? (schema.additionalProperties ?? true)
+          : false;
+    } else if (schema.type === 'array') {
+      schema.items = schema.items ?? {};
+      if ((schema.items as any) === true) {
+        schema.items = {
+          type: [
+            'array',
+            'boolean',
+            'integer',
+            'null',
+            'number',
+            'object',
+            'string',
+          ],
+        };
+      } else if (
+        typeof (schema.items as JsonSchema7).type !== 'string' &&
+        !Array.isArray((schema.items as JsonSchema7).type)
+      ) {
+        (schema.items as JsonSchema7).type = [
+          'array',
+          'boolean',
+          'integer',
+          'null',
+          'number',
+          'object',
+          'string',
+        ];
+      }
+    }
+
+    // help determining the correct renders by removing keywords not appropriate for the type
+    cleanSchema(schema);
+
+    const detailsForSchema = control.options
+      ? control.options[schema.type + '-detail']
+      : undefined;
+
+    const schemaControl = detailsForSchema
+      ? {
+          ...control,
+          options: { ...control.options, detail: detailsForSchema },
+        }
+      : {
+          ...control,
+          scope: control.scope,
+        };
+
+    const uischema = findUISchema(
+      uischemas,
+      schema,
+      control.scope,
+      path,
+      () => createControlElement(control.scope ?? '#'),
+      schemaControl,
+      rootSchema,
+    );
+
+    if (uischema.type === 'Control' && schema.type === 'object') {
+      // override to specify exact type since the isObjectControl will check for empty scope
+      // which in this case the scope is not empty
+      uischema.type = 'Object';
+    }
+
+    return {
+      schema,
+      uischema,
+      label: `${schema.type}`,
+    };
+  });
+};
+
+export function getJsonDataType(value: any): string | null {
+  if (typeof value === 'string') {
+    return 'string';
+  } else if (typeof value === 'number') {
+    return Number.isInteger(value) ? 'integer' : 'number';
+  } else if (typeof value === 'boolean') {
+    return 'boolean';
+  } else if (Array.isArray(value)) {
+    return 'array';
+  } else if (value === null) {
+    return 'null';
+  } else if (typeof value === 'object') {
+    return 'object';
+  }
+
+  return null;
+}
+
+const controlRenderer = defineComponent({
+  name: 'mixed-renderer',
+  components: {
+    DispatchRenderer,
+    VSelect,
+    VExpansionPanel,
+    VExpansionPanelTitle,
+    VExpansionPanelText,
+    VContainer,
+    VRow,
+    VCol,
+  },
+  directives: {
+    DisabledIconFocus,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const path = props.path;
+    const input = useJsonFormsControl(props);
+
+    const control = input.control.value;
+    const valueType = ref(getJsonDataType(control.data));
+    const jsonforms = useJsonForms();
+    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 mixedRenderInfos = computed<
+      (SchemaRenderInfo & {
+        index: number;
+      })[]
+    >(() => {
+      const result = createMixedRenderInfos(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        control.schema,
+        control.rootSchema,
+        control.uischema,
+        control.path,
+        jsonforms.uischemas || [],
+      );
+
+      return result
+        .filter((info) => info.uischema)
+        .map((info, index) => ({ ...info, index: index }));
+    });
+
+    const nullable = computed(() =>
+      mixedRenderInfos.value.some((info) => info.schema.type === 'null'),
+    );
+
+    const matchingSchema = computed(() => {
+      let result = mixedRenderInfos.value.find(
+        (entry) => entry.schema.type === valueType.value,
+      );
+      if (!result) {
+        result = mixedRenderInfos.value.find(
+          (entry) =>
+            entry.schema.type === 'number' && valueType.value === 'integer',
+        );
+      }
+      if (!result && mixedRenderInfos.value.length === 1) {
+        result = mixedRenderInfos.value[0];
+      }
+      return result;
+    });
+
+    const selectedIndex = ref<number | undefined | null>(
+      matchingSchema.value?.index,
+    );
+
+    const t = useTranslator();
+
+    const schema = computed(() =>
+      selectedIndex.value !== null && selectedIndex.value !== undefined
+        ? mixedRenderInfos.value[selectedIndex.value].schema
+        : undefined,
+    );
+    const uischema = computed(() =>
+      selectedIndex.value !== null && selectedIndex.value !== undefined
+        ? 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
+    provide(IsDynamicPropertyContext, true);
+
+    return {
+      ...useCombinatorTranslations(useVuetifyControl(input)),
+      nullable,
+      mixedRenderInfos,
+      selectedIndex,
+      t,
+      valueType,
+      schema,
+      uischema,
+      path,
+      icons,
+      currentlyExpanded,
+    };
+  },
+  methods: {
+    setToNull(): void {
+      this.handleChange(this.control.path, null);
+    },
+    handleSelectChange(newIndex: number): void {
+      const newData =
+        newIndex != null
+          ? createDefaultValue(
+              this.mixedRenderInfos[newIndex].schema,
+              this.control.rootSchema,
+            )
+          : undefined;
+
+      this.handleChange(this.control.path, newData);
+      this.selectedIndex = newIndex;
+
+      const type = newIndex
+        ? this.mixedRenderInfos[newIndex]?.schema?.type
+        : null;
+      this.valueType = type as string | null; // we know that this should be either a string or null
+
+      this.currentlyExpanded = 0;
+    },
+  },
+});
+
+export default controlRenderer;
+</script>
+<style scoped>
+.prefixed-input {
+  display: flex;
+  align-items: center;
+}
+
+.select {
+  flex-shrink: 0;
+}
+
+.input {
+  flex-grow: 1;
+  width: 100%;
+}
+
+:deep(.v-expansion-panel-text__wrapper) {
+  padding: 0px;
+}
+</style>
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts b/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
index 0852ea8ef..66da2231c 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts
@@ -2,10 +2,24 @@ import {
   isObjectControl,
   rankWith,
   type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+  type Scopable,
+  type TesterContext,
+  type UISchemaElement,
 } from '@jsonforms/core';
 import controlRenderer from './ObjectRenderer.vue';
+import isEmpty from 'lodash/isEmpty';
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isObjectControl),
+  tester: rankWith(
+    2,
+    (
+      uischema: UISchemaElement & Scopable,
+      schema: JsonSchema,
+      context: TesterContext,
+    ) =>
+      isObjectControl(uischema, schema, context) ||
+      (uischema.type === 'Object' && !isEmpty(uischema.scope)),
+  ),
 };
diff --git a/packages/vue-vuetify/src/complex/ObjectRenderer.vue b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
index ea767759f..36a38a063 100644
--- a/packages/vue-vuetify/src/complex/ObjectRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ObjectRenderer.vue
@@ -10,13 +10,14 @@
       :cells="control.cells"
     />
     <additional-properties
-      v-if="hasAdditionalProperties && showAdditionalProperties"
+      v-if="hasAdditionalProperties || showAdditionalProperties"
       :input="input"
     ></additional-properties>
   </div>
 </template>
 
 <script lang="ts">
+import { IsDynamicPropertyContext } from '@/util/inject';
 import {
   Generate,
   findUISchema,
@@ -33,7 +34,7 @@ import {
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
-import { defineComponent } from 'vue';
+import { defineComponent, provide } from 'vue';
 import { useNested, useVuetifyControl } from '../util';
 import { AdditionalProperties } from './components';
 
@@ -48,7 +49,13 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const control = useVuetifyControl(useJsonFormsControlWithDetail(props));
+
     const nested = useNested('object');
+
+    // do not use the default value but the undefind so that
+    // the property is cleared when property clear action is executed
+    provide(IsDynamicPropertyContext, false);
+
     return {
       ...control,
       input: control,
@@ -59,17 +66,14 @@ const controlRenderer = defineComponent({
     hasAdditionalProperties(): boolean {
       return (
         !isEmpty(this.control.schema.patternProperties) ||
-        isObject(this.control.schema.additionalProperties)
-        // do not support - additionalProperties === true - since then the type should be any and we won't know what kind of renderer we should use for new properties
+        isObject(this.control.schema.additionalProperties) ||
+        this.control.schema.additionalProperties === true
       );
     },
     showAdditionalProperties(): boolean {
       const showAdditionalProperties =
         this.control.uischema.options?.showAdditionalProperties;
-      return (
-        showAdditionalProperties === undefined ||
-        showAdditionalProperties === true
-      );
+      return showAdditionalProperties === true;
     },
     detailUiSchema(): UISchemaElement {
       const uiSchemaGenerator = () => {
diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
index 7f70ad7a9..33fa515c9 100644
--- a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
@@ -14,7 +14,7 @@
     >
       <v-tab
         v-for="(oneOfRenderInfo, oneOfIndex) in oneOfRenderInfos"
-        :key="`${control.path}-${oneOfIndex}`"
+        :key="`${control.path}-${oneOfRenderInfos.length}-${oneOfIndex}`"
       >
         {{ oneOfRenderInfo.label }}
       </v-tab>
@@ -23,7 +23,7 @@
     <v-window v-model="selectedIndex">
       <v-window-item
         v-for="(oneOfRenderInfo, oneOfIndex) in oneOfRenderInfos"
-        :key="`${control.path}-${oneOfIndex}`"
+        :key="`${control.path}-${oneOfRenderInfos.length}-${oneOfIndex}`"
       >
         <dispatch-renderer
           v-if="selectedIndex === oneOfIndex"
diff --git a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
index 10d891706..2f77df0b4 100644
--- a/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,103 +1,101 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="12">
-        <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
-          <v-container>
-            <v-row>
-              <v-col v-if="mdAndUp && additionalPropertiesTitle">
-                {{ additionalPropertiesTitle }}</v-col
-              >
-              <v-col>
-                <json-forms
-                  :data="newPropertyName"
-                  :uischema="
-                    {
-                      type: 'Control',
-                      scope: '#/',
-                    } as UISchemaElement
-                  "
-                  :schema="propertyNameSchema"
-                  :additionalErrors="additionalErrors"
-                  :renderers="control.renderers"
-                  :cells="control.cells"
-                  :config="control.config"
-                  :readonly="!control.enabled"
-                  :validation-mode="validationMode"
-                  :i18n="i18n"
-                  :ajv="ajv"
-                  :middleware="middleware"
-                  @change="propertyNameChange"
-                ></json-forms
-              ></v-col>
-              <v-tooltip bottom>
-                <template v-slot:activator="{ props }">
-                  <v-btn
-                    icon
-                    variant="text"
-                    elevation="0"
-                    small
-                    :aria-label="translations.addAriaLabel"
-                    v-bind="props"
-                    :disabled="addPropertyDisabled"
-                    @click="addProperty"
-                  >
-                    <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
-                  </v-btn>
-                </template>
-                {{ translations.addTooltip }}
-              </v-tooltip>
-            </v-row>
-          </v-container>
-          <v-container v-bind="vuetifyProps('v-container')">
-            <v-row
-              v-for="element in additionalPropertyItems"
-              :key="`${element.propertyName}`"
+  <v-card v-if="control.visible" v-bind="vuetifyProps('v-card')" flat>
+    <v-container class="py-0">
+      <v-row no-gutters>
+        <v-col v-if="mdAndUp && additionalPropertiesTitle">
+          {{ additionalPropertiesTitle }}</v-col
+        >
+        <v-col>
+          <json-forms
+            :data="newPropertyName"
+            :uischema="
+              {
+                type: 'Control',
+                scope: '#',
+                label: propertyNameLabel,
+              } as UISchemaElement
+            "
+            :schema="propertyNameSchema"
+            :additionalErrors="additionalErrors"
+            :renderers="control.renderers"
+            :cells="control.cells"
+            :config="control.config"
+            :readonly="!control.enabled"
+            :validation-mode="validationMode"
+            :i18n="i18n"
+            :ajv="ajv"
+            :middleware="middleware"
+            @change="propertyNameChange"
+          ></json-forms
+        ></v-col>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              icon
+              variant="text"
+              elevation="0"
+              small
+              :aria-label="translations.addAriaLabel"
+              v-bind="props"
+              :disabled="addPropertyDisabled"
+              @click="addProperty"
             >
-              <v-col class="flex-shrink-0 flex-grow-1">
-                <dispatch-renderer
-                  v-if="element.schema && element.uischema"
-                  :schema="element.schema"
-                  :uischema="element.uischema"
-                  :path="element.path"
-                  :enabled="control.enabled"
-                  :renderers="control.renderers"
-                  :cells="control.cells"
-              /></v-col>
-              <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
-                <v-tooltip bottom>
-                  <template v-slot:activator="{ props }">
-                    <v-btn
-                      v-bind="props"
-                      icon
-                      variant="text"
-                      elevation="0"
-                      small
-                      :aria-label="translations.removeAriaLabel"
-                      :disabled="removePropertyDisabled"
-                      @click="removeProperty(element.propertyName)"
-                    >
-                      <v-icon class="notranslate">{{
-                        icons.current.value.itemDelete
-                      }}</v-icon>
-                    </v-btn>
-                  </template>
-                  {{ translations.removeTooltip }}
-                </v-tooltip></v-col
+              <v-icon>{{ icons.current.value.itemAdd }}</v-icon>
+            </v-btn>
+          </template>
+          {{ translations.addTooltip }}
+        </v-tooltip>
+      </v-row>
+    </v-container>
+    <v-container v-bind="vuetifyProps('v-container')" class="py-0">
+      <v-row
+        no-gutters
+        v-for="element in additionalPropertyItems"
+        :key="`${element.propertyName}`"
+      >
+        <v-col class="flex-shrink-0 flex-grow-1">
+          <dispatch-renderer
+            v-if="element.schema && element.uischema"
+            :schema="element.schema"
+            :uischema="element.uischema"
+            :path="element.path"
+            :enabled="control.enabled"
+            :renderers="control.renderers"
+            :cells="control.cells"
+        /></v-col>
+        <v-col v-if="control.enabled" class="flex-shrink-1 flex-grow-0">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon
+                variant="text"
+                elevation="0"
+                small
+                :aria-label="translations.removeAriaLabel"
+                :disabled="removePropertyDisabled"
+                @click="removeProperty(element.propertyName)"
               >
-            </v-row>
-          </v-container>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+                <v-icon class="notranslate">{{
+                  icons.current.value.itemDelete
+                }}</v-icon>
+              </v-btn>
+            </template>
+            {{ translations.removeTooltip }}
+          </v-tooltip></v-col
+        >
+      </v-row>
+    </v-container>
+  </v-card>
 </template>
 
 <script lang="ts">
+import { AdditionalPropertiesTranslationEnum } from '@/i18n';
 import { additionalPropertiesDefaultTranslations } from '@/i18n/additionalPropertiesTranslations';
 import { getAdditionalPropertiesTranslations } from '@/i18n/i18nUtil';
 import {
   Generate,
+  Resolve,
   composePaths,
   createControlElement,
   createDefaultValue,
@@ -105,6 +103,7 @@ import {
   getI18nKeyPrefix,
   type GroupLayout,
   type JsonSchema,
+  type JsonSchema4,
   type JsonSchema7,
   type UISchemaElement,
 } from '@jsonforms/core';
@@ -116,13 +115,16 @@ import {
 } from '@jsonforms/vue';
 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 isEqual from 'lodash/isEqual';
+
 import {
   computed,
   defineComponent,
   markRaw,
+  provide,
   ref,
   unref,
   type PropType,
@@ -145,7 +147,7 @@ import {
   useJsonForms,
   useTranslator,
 } from '../../util';
-import { AdditionalPropertiesTranslationEnum } from '@/i18n';
+import { IsDynamicPropertyContext } from '@/util/inject';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -185,7 +187,7 @@ export default defineComponent({
     );
 
     const additionalKeys = computed(() =>
-      Object.keys(control.value.data).filter(
+      Object.keys(control.value.data || {}).filter(
         (k) => !reservedPropertyNames.value.includes(k),
       ),
     );
@@ -193,24 +195,34 @@ export default defineComponent({
     const toAdditionalPropertyType = (
       propName: string,
       propValue: any,
+      parentSchema: JsonSchema,
+      rootSchema: JsonSchema,
     ): AdditionalPropertyType => {
       let propSchema: JsonSchema | undefined = undefined;
       let propUiSchema: UISchemaElement | undefined = undefined;
 
-      if (control.value.schema.patternProperties) {
-        const matchedPattern = Object.keys(
-          control.value.schema.patternProperties,
-        ).find((pattern) => new RegExp(pattern).test(propName));
+      if (parentSchema.patternProperties) {
+        const matchedPattern = Object.keys(parentSchema.patternProperties).find(
+          (pattern) => new RegExp(pattern).test(propName),
+        );
         if (matchedPattern) {
-          propSchema = control.value.schema.patternProperties[matchedPattern];
+          propSchema = parentSchema.patternProperties[matchedPattern];
         }
       }
 
       if (
-        !propSchema &&
-        typeof control.value.schema.additionalProperties === 'object'
+        (!propSchema &&
+          typeof parentSchema.additionalProperties === 'object') ||
+        parentSchema.additionalProperties === true
       ) {
-        propSchema = control.value.schema.additionalProperties;
+        propSchema =
+          parentSchema.additionalProperties === true
+            ? { additionalProperties: true }
+            : parentSchema.additionalProperties;
+      }
+
+      if (typeof propSchema?.$ref === 'string') {
+        propSchema = Resolve.schema(propSchema, propSchema.$ref, rootSchema);
       }
 
       if (!propSchema && propValue !== undefined) {
@@ -219,27 +231,53 @@ export default defineComponent({
         propSchema = Generate.jsonSchema(
           { prop: propValue },
           {
-            additionalProperties: false,
-            required: () => false,
+            additionalProperties: true,
+            required: (_props: { [property: string]: JsonSchema4 }) => false,
           },
         ).properties?.prop;
       }
 
-      if (propSchema) {
-        if (propSchema.type === 'object' || propSchema.type === 'array') {
-          propUiSchema = Generate.uiSchema(
-            propSchema,
-            'Group',
-            undefined,
-            control.value.rootSchema,
-          );
-          (propUiSchema as GroupLayout).label =
-            propSchema.title ?? startCase(propName);
-        } else {
-          propUiSchema = createControlElement(
-            control.value.path + '/' + encode(propName),
-          );
-        }
+      propSchema = propSchema ?? {};
+
+      if (propSchema.type === undefined) {
+        propSchema = {
+          ...propSchema,
+          type: [
+            'array',
+            'boolean',
+            'integer',
+            'null',
+            'number',
+            'object',
+            'string',
+          ],
+        };
+      }
+
+      if (propSchema.type === 'array') {
+        propUiSchema = Generate.uiSchema(
+          propSchema,
+          'Group',
+          undefined,
+          control.value.rootSchema,
+        );
+        (propUiSchema as GroupLayout).label =
+          propSchema.title ?? startCase(propName);
+      } else {
+        propUiSchema = createControlElement('#/' + encode(propName));
+      }
+
+      propSchema = {
+        ...propSchema,
+        title: propName,
+      };
+      if (propSchema.type === 'object') {
+        propSchema.additionalProperties =
+          propSchema.additionalProperties !== false
+            ? (propSchema.additionalProperties ?? true)
+            : false;
+      } else if (propSchema.type === 'array') {
+        propSchema.items = propSchema.items ?? {};
       }
 
       return {
@@ -253,7 +291,12 @@ export default defineComponent({
     const appliedOptions = useControlAppliedOptions(props.input);
     const additionalPropertyItems = ref<AdditionalPropertyType[]>(
       additionalKeys.value.map((propName) =>
-        toAdditionalPropertyType(propName, control.value.data[propName]),
+        toAdditionalPropertyType(
+          propName,
+          control.value.data[propName],
+          control.value.schema,
+          control.value.rootSchema,
+        ),
       ),
     );
 
@@ -354,6 +397,9 @@ export default defineComponent({
       newPropertyName,
     );
 
+    const propertyNameLabel =
+      translations[AdditionalPropertiesTranslationEnum.propertyNameLabel];
+
     const { mdAndUp } = useDisplay();
 
     const {
@@ -368,6 +414,9 @@ export default defineComponent({
       newPropertyName.value ? parentValidationMode : 'ValidateAndHide',
     );
 
+    // use the default value since all properties are dynamic so preserve the property key
+    provide(IsDynamicPropertyContext, true);
+
     return {
       validationMode: validationMode,
       i18n: i18n ? markRaw(i18n) : i18n,
@@ -380,8 +429,11 @@ export default defineComponent({
       styles,
       appliedOptions,
       additionalPropertyItems,
+      reservedPropertyNames,
       toAdditionalPropertyType,
+      additionalKeys,
       newPropertyName,
+      propertyNameLabel,
       propertyNameChange,
       newPropertyErrors,
       additionalErrors,
@@ -437,34 +489,34 @@ export default defineComponent({
   },
   watch: {
     'control.data': {
-      handler(newData) {
-        // revert back any undefined values back to the default value when the key is part of the addtional properties since we want to preserved the key
-        // for example when we have a string additonal property then when we clear the text component the componet by default sets the value to undefined to remove the property from the object - for additional properties we do not want that behaviour
-        if (typeof newData === 'object' && newData) {
-          const keys = Object.keys(newData);
-          let hasChanges = false;
-          const updatedData = { ...newData };
-
-          this.additionalPropertyItems.forEach((ap) => {
-            if (
-              ap.schema &&
-              (!keys.includes(ap.propertyName) ||
-                updatedData[ap.propertyName] === undefined ||
-                (updatedData[ap.propertyName] === null &&
-                  ap.schema.type !== 'null')) // createDefaultValue will return null only when the ap.schema.type is 'null'
-            ) {
-              const newValue = createDefaultValue(
-                ap.schema,
-                this.control.rootSchema,
-              );
-              hasChanges = updatedData[ap.propertyName] !== newValue;
-
-              updatedData[ap.propertyName] = newValue;
-            }
-          });
-          if (hasChanges) {
-            this.input.handleChange(this.control.path, updatedData);
-          }
+      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)
+        ) {
+          this.additionalPropertyItems = this.additionalKeys.map((propName) =>
+            this.toAdditionalPropertyType(
+              propName,
+              newData[propName],
+              this.control.schema,
+              this.control.rootSchema,
+            ),
+          );
         }
       },
       deep: true,
@@ -477,6 +529,8 @@ export default defineComponent({
         const additionalProperty = this.toAdditionalPropertyType(
           this.newPropertyName,
           undefined,
+          this.control.schema,
+          this.control.rootSchema,
         );
         if (additionalProperty) {
           this.additionalPropertyItems = [
@@ -495,6 +549,7 @@ export default defineComponent({
             additionalProperty.schema,
             this.control.rootSchema,
           );
+
           // we need always to preserve the key even when the value is "empty"
           this.input.handleChange(this.control.path, updatedData);
         }
diff --git a/packages/vue-vuetify/src/complex/index.ts b/packages/vue-vuetify/src/complex/index.ts
index 335567cd5..adeb84282 100644
--- a/packages/vue-vuetify/src/complex/index.ts
+++ b/packages/vue-vuetify/src/complex/index.ts
@@ -5,6 +5,7 @@ export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as OneOfTabRenderer } from './OneOfTabRenderer.vue';
+export { default as MixedRenderer } from './MixedRenderer.vue';
 
 import { entry as allOfRendererEntry } from './AllOfRenderer.entry';
 import { entry as anyOfRendererEntry } from './AnyOfRenderer.entry';
@@ -13,6 +14,7 @@ import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.entry';
 import { entry as objectRendererEntry } from './ObjectRenderer.entry';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.entry';
 import { entry as oneOfTabRendererEntry } from './OneOfTabRenderer.entry';
+import { entry as mixedRendererEntry } from './MixedRenderer.entry';
 
 export const complexRenderers = [
   allOfRendererEntry,
@@ -22,6 +24,7 @@ export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   oneOfTabRendererEntry,
+  mixedRendererEntry,
 ];
 
 export {
@@ -32,4 +35,5 @@ export {
   objectRendererEntry,
   oneOfRendererEntry,
   oneOfTabRendererEntry,
+  mixedRendererEntry,
 };
diff --git a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
index 772d6e73f..ef5a349e4 100644
--- a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue
@@ -45,7 +45,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VCombobox } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -62,9 +62,9 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVuetifyControl(
-      useJsonFormsControl(props),
-      (value) => value || undefined,
+    const clearValue = determineClearValue('');
+    return useVuetifyControl(useJsonFormsControl(props), (value) =>
+      value === null ? clearValue : value,
     );
   },
   computed: {
diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
index 188324cc1..188af7763 100644
--- a/packages/vue-vuetify/src/controls/DateControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateControlRenderer.vue
@@ -20,10 +20,9 @@
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
       :clearable="control.enabled"
-      @click:clear="clear"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-maska:[options]
+      v-maska:[options]="maska"
     >
       <template v-slot:prepend-inner>
         <v-menu
@@ -50,19 +49,17 @@
                 v-if="showMenu"
                 :model-value="showActions ? proxyModel.value : pickerValue"
                 @update:model-value="
-                  (val: unknown) => {
-                    if (showActions) {
-                      proxyModel.value = val as Date;
-                    } else {
-                      pickerValue = val as Date;
-                      showMenu = false;
-                    }
-                  }
+                  (val) => updateDatePickerValue(val, proxyModel)
                 "
                 v-bind="vuetifyProps('v-date-picker')"
                 :title="computedLabel"
                 :min="minDate"
                 :max="maxDate"
+                v-model:view-mode="viewMode"
+                @update:month="
+                  (month) => updateDatePickerMonth(month, proxyModel)
+                "
+                @update:year="(year) => updateDatePickerYear(year, proxyModel)"
               >
                 <template v-slot:actions v-if="showActions">
                   <component :is="actions"></component>
@@ -78,14 +75,15 @@
 
 <script lang="ts">
 import { type ControlElement, type JsonSchema } from '@jsonforms/core';
-import { computed, defineComponent, ref, unref } from 'vue';
+import type { Ref } from 'vue';
+import { computed, defineComponent, reactive, ref, unref, watch } from 'vue';
 
 import {
   rendererProps,
   useJsonFormsControl,
   type RendererProps,
 } from '@jsonforms/vue';
-import { vMaska, type MaskOptions, type MaskaDetail } from 'maska';
+import { vMaska, type MaskOptions } from 'maska';
 import { useLocale } from 'vuetify';
 import {
   VBtn,
@@ -98,6 +96,7 @@ import {
 } from 'vuetify/components';
 import {
   convertDayjsToMaskaFormat,
+  determineClearValue,
   expandLocaleFormat,
   parseDateTime,
   useTranslator,
@@ -108,6 +107,8 @@ import { DisabledIconFocus } from './directives';
 
 const JSON_SCHEMA_DATE_FORMATS = ['YYYY-MM-DD'];
 
+type ViewModeType = 'year' | 'months' | 'month';
+
 // https://ajv.js.org/packages/ajv-formats.html#keywords-to-compare-values-formatmaximum-formatminimum-and-formatexclusivemaximum-formatexclusiveminimum
 type AjvMinMaxFormat = {
   formatMinimum?: string | { $data: any };
@@ -133,11 +134,12 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     const t = useTranslator();
 
     const showMenu = ref(false);
 
-    const adaptValue = (value: any) => value || undefined;
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const dateFormat = computed<string>(
@@ -149,33 +151,110 @@ const controlRenderer = defineComponent({
     );
 
     const useMask = control.appliedOptions.value.mask !== false;
-    const maskCompleted = ref(false);
-
-    const state = computed(() => convertDayjsToMaskaFormat(dateFormat.value));
     const locale = useLocale();
 
+    const maska = reactive({
+      masked: '',
+      unmasked: '',
+      completed: false,
+    });
     const options = useMask
       ? computed<MaskOptions>(() => ({
           mask: state.value.mask,
           tokens: state.value.tokens,
           tokensReplace: true,
-          onMaska: (detail: MaskaDetail) =>
-            (maskCompleted.value = detail.completed),
 
           //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
           _locale: unref(locale.current),
         }))
       : null;
 
+    const state = computed(() => convertDayjsToMaskaFormat(dateFormat.value));
+
+    const viewMode = ref<ViewModeType>('month');
+
+    const views = computed<('day' | 'month' | 'year')[] | undefined>(() =>
+      Array.isArray(control.appliedOptions.value.views)
+        ? control.appliedOptions.value.views.filter(
+            (view: string) =>
+              view === 'day' || view === 'month' || view === 'year',
+          )
+        : undefined,
+    );
+
+    if (views.value !== undefined) {
+      const allowedViewModes = computed<ViewModeType[]>(() => {
+        // Define the priority order
+        const viewPriorityOrder: Record<ViewModeType, number> = {
+          month: 1,
+          months: 2,
+          year: 3,
+        };
+
+        if (views.value === undefined) {
+          return [];
+        }
+        return views.value
+          .map((view) => {
+            if (view === 'day') {
+              return 'month';
+            }
+            if (view === 'month') {
+              return 'months';
+            }
+            if (view === 'year') {
+              return 'year';
+            }
+
+            return null; // null value will be filtered out
+          })
+          .filter((value): value is ViewModeType => value !== null)
+          .sort((a, b) => viewPriorityOrder[a] - viewPriorityOrder[b]);
+      });
+
+      if (allowedViewModes.value.length > 0) {
+        viewMode.value = allowedViewModes.value[0];
+      }
+
+      watch(viewMode, (newViewMode) => {
+        if (
+          allowedViewModes.value.length > 0 &&
+          !allowedViewModes.value.includes(newViewMode)
+        ) {
+          switch (newViewMode) {
+            case 'month':
+              viewMode.value = allowedViewModes.value.includes('months')
+                ? 'months'
+                : 'year';
+              break;
+            case 'months':
+              viewMode.value = allowedViewModes.value.includes('year')
+                ? 'year'
+                : 'month';
+              break;
+            case 'year':
+              viewMode.value = allowedViewModes.value.includes('months')
+                ? 'months'
+                : 'month';
+              break;
+            default:
+              break;
+          }
+        }
+      });
+    }
+
     return {
       ...control,
+      views,
+      viewMode,
+      maska,
       showMenu,
       t,
       adaptValue,
       dateFormat,
       options,
       useMask,
-      maskCompleted,
     };
   },
   computed: {
@@ -240,25 +319,32 @@ const controlRenderer = defineComponent({
       return undefined;
     },
     inputModel: {
-      get(): string | undefined {
+      get(): string | null {
         const value = this.control.data;
         const date = parseDateTime(value, this.formats);
         return date ? date.format(this.dateFormat) : value;
       },
-      set(val: string | undefined): void {
+      set(val: string | null): void {
         let value = val;
 
-        if (
-          this.useMask &&
-          !this.maskCompleted &&
-          value !== null &&
-          value !== undefined
-        ) {
+        if (this.useMask && !this.maska.completed && value) {
           // the value is set not not yet completed so do not set that until the full mask is completed
           // otherwise if the control.data is bound to another renderer with different dateTimeFormat then those will collide
           return;
         }
 
+        if (value == null) {
+          // clear
+          this.maska.masked = '';
+          this.maska.unmasked = '';
+          this.maska.completed = false;
+        }
+
+        if (this.useMask && value === '' && this.maska.unmasked === '') {
+          // once cleared the maska will set the value to ''
+          return;
+        }
+
         const date = parseDateTime(value, this.dateFormat);
 
         if (date) {
@@ -279,7 +365,6 @@ const controlRenderer = defineComponent({
       },
       set(val: Date): void {
         this.onPickerChange(val);
-        this.showMenu = false;
       },
     },
     cancelLabel(): string {
@@ -304,14 +389,64 @@ const controlRenderer = defineComponent({
   methods: {
     onPickerChange(value: Date): void {
       const date = parseDateTime(value, undefined);
-      let newdata: string | number | undefined = date
+      let newdata: string | null = date
         ? date.format(this.dateSaveFormat)
-        : undefined;
+        : null;
 
       this.onChange(newdata);
     },
-    clear(): void {
-      this.inputModel = undefined;
+    updateDatePickerValue(
+      val: unknown,
+      proxyModel: Ref<Date | undefined>,
+    ): void {
+      if (this.showActions) {
+        proxyModel.value = val as Date;
+      } else {
+        this.pickerValue = val as Date;
+        this.showMenu = false;
+      }
+    },
+    updateDatePickerYear(
+      year: number,
+      proxyModel: Ref<Date | undefined>,
+    ): void {
+      if (this.showActions) {
+        const date = new Date(proxyModel.value ?? new Date());
+        date.setFullYear(year);
+        proxyModel.value = date;
+      } else {
+        const date = this.pickerValue ?? new Date();
+        date.setFullYear(year);
+        this.pickerValue = date;
+
+        if (
+          this.views &&
+          this.views.length === 1 &&
+          this.views.includes('year')
+        ) {
+          // close the menu since only year can be selected
+          this.showMenu = false;
+        }
+      }
+    },
+    updateDatePickerMonth(
+      month: number,
+      proxyModel: Ref<Date | undefined>,
+    ): void {
+      if (this.showActions) {
+        const date = new Date(proxyModel.value ?? new Date());
+        date.setMonth(month);
+        proxyModel.value = date;
+      } else {
+        const date = this.pickerValue ?? new Date();
+        date.setMonth(month);
+        this.pickerValue = date;
+
+        if (this.views && !this.views.includes('day')) {
+          // close the menu since day can't be selected
+          this.showMenu = false;
+        }
+      }
     },
   },
 });
diff --git a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
index 7a0456f79..53eec9cf1 100644
--- a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue
@@ -20,10 +20,9 @@
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
       :clearable="control.enabled"
-      @click:clear="clear"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-maska:[options]
+      v-maska:[options]="maska"
     >
       <template v-slot:prepend-inner>
         <v-menu
@@ -181,7 +180,7 @@ import {
   useJsonFormsControl,
   type RendererProps,
 } from '@jsonforms/vue';
-import { computed, defineComponent, ref, unref } from 'vue';
+import { computed, reactive, defineComponent, ref, unref } from 'vue';
 import {
   VBtn,
   VCard,
@@ -208,6 +207,7 @@ import { useDisplay, useLocale } from 'vuetify';
 import type { IconValue } from '../icons';
 import {
   convertDayjsToMaskaFormat,
+  determineClearValue,
   expandLocaleFormat,
   parseDateTime,
   useIcons,
@@ -260,10 +260,11 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     const t = useTranslator();
     const showMenu = ref(false);
     const activeTab = ref<'date' | 'time'>('date');
-    const adaptValue = (value: any) => value || undefined;
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
 
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
     const { mobile } = useDisplay();
@@ -277,7 +278,11 @@ const controlRenderer = defineComponent({
     );
 
     const useMask = control.appliedOptions.value.mask !== false;
-    const maskCompleted = ref(false);
+    const maska = reactive({
+      masked: '',
+      unmasked: '',
+      completed: false,
+    });
 
     const state = computed(() =>
       convertDayjsToMaskaFormat(dateTimeFormat.value),
@@ -289,8 +294,6 @@ const controlRenderer = defineComponent({
           mask: state.value.mask,
           tokens: state.value.tokens,
           tokensReplace: true,
-          onMaska: (detail: MaskaDetail) =>
-            (maskCompleted.value = detail.completed),
 
           //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
           _locale: unref(locale.current),
@@ -308,7 +311,7 @@ const controlRenderer = defineComponent({
       dateTimeFormat,
       options,
       useMask,
-      maskCompleted,
+      maska,
     };
   },
   watch: {
@@ -483,25 +486,32 @@ const controlRenderer = defineComponent({
       return undefined;
     },
     inputModel: {
-      get(): string | undefined {
+      get(): string | null {
         const value = this.control.data;
         const date = parseDateTime(value, this.formats);
         return date ? date.format(this.dateTimeFormat) : value;
       },
-      set(val: string | undefined): void {
+      set(val: string | null): void {
         let value = val;
 
-        if (
-          this.useMask &&
-          !this.maskCompleted &&
-          value !== null &&
-          value !== undefined
-        ) {
+        if (this.useMask && !this.maska.completed && value) {
           // the value is set not not yet completed so do not set that until the full mask is completed
           // otherwise if the control.data is bound to another renderer with different dateTimeFormat then those will collide
           return;
         }
 
+        if (value == null) {
+          // clear
+          this.maska.masked = '';
+          this.maska.unmasked = '';
+          this.maska.completed = false;
+        }
+
+        if (this.useMask && value === '' && this.maska.unmasked === '') {
+          // once cleared the maska will set the value to ''
+          return;
+        }
+
         const datetime = parseDateTime(value, this.dateTimeFormat);
 
         if (datetime) {
@@ -521,11 +531,8 @@ const controlRenderer = defineComponent({
 
         const date = dateTime ? dateTime.toDate() : undefined;
 
-        const time = dateTime
-          ? this.useSeconds
-            ? dateTime.format('HH:mm:ss')
-            : dateTime.format('HH:mm')
-          : undefined;
+        const format = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
+        const time = dateTime ? dateTime.format(format) : undefined;
 
         return { date, time };
       },
@@ -580,9 +587,6 @@ const controlRenderer = defineComponent({
         this.onChange(dateTime!.format(this.dateTimeSaveFormat));
       }
     },
-    clear(): void {
-      this.inputModel = undefined;
-    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
index 7a22784aa..709e9b4fe 100644
--- a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue
@@ -39,7 +39,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VSelect } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -56,8 +56,9 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     return useVuetifyControl(useJsonFormsEnumControl(props), (value) =>
-      value !== null ? value : undefined,
+      value === null ? clearValue : value,
     );
   },
 });
diff --git a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
index 542666441..8a13fc2bf 100644
--- a/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/IntegerControlRenderer.vue
@@ -37,7 +37,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VNumberInput } from 'vuetify/labs/VNumberInput';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -54,7 +54,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const adaptValue = (value: any) => (value === null ? undefined : value);
+    const clearValue = determineClearValue(0);
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const input = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     return { ...input, adaptValue };
@@ -64,9 +65,6 @@ const controlRenderer = defineComponent({
       const options: any = this.appliedOptions;
       return options.step ?? 1;
     },
-    allowUnsafeInteger(): boolean {
-      return this.appliedOptions.allowUnsafeInteger;
-    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
index 185766099..4a01d84e7 100644
--- a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue
@@ -45,7 +45,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VTextarea } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -62,9 +62,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (value) => value || undefined,
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
index af51a6114..5ac0cd1ef 100644
--- a/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/NumberControlRenderer.vue
@@ -38,7 +38,7 @@ import {
 import { defineComponent } from 'vue';
 import { VNumberInput } from 'vuetify/labs/VNumberInput';
 
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -55,7 +55,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const adaptValue = (value: any) => (value == null ? undefined : value);
+    const clearValue = determineClearValue(0);
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const input = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     return { ...input, adaptValue };
diff --git a/packages/vue-vuetify/src/controls/StringControlRenderer.vue b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
index 90ebe5f1b..0a3f94a83 100644
--- a/packages/vue-vuetify/src/controls/StringControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringControlRenderer.vue
@@ -78,7 +78,7 @@ import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 import { defineComponent } from 'vue';
 import { VCombobox, VTextField } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { useVuetifyControl, determineClearValue } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -96,9 +96,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (value) => value || undefined,
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
index 471fe00a9..7cd870fac 100644
--- a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue
@@ -50,7 +50,7 @@ import {
 import isEmpty from 'lodash/isEmpty';
 import { defineComponent, computed } from 'vue';
 import { VTextField } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 import { type MaskTokens, vMaska, Mask } from 'maska';
@@ -76,7 +76,8 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    const adaptValue = (value: any) => value || undefined;
+    const clearValue = determineClearValue('');
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const toTokens = (tokenParams: Record<string, any>): MaskTokens => {
diff --git a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
index fdaf70736..32117f608 100644
--- a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
+++ b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue
@@ -20,10 +20,9 @@
       v-bind="vuetifyProps('v-text-field')"
       v-model="inputModel"
       :clearable="control.enabled"
-      @click:clear="clear"
       @focus="handleFocus"
       @blur="handleBlur"
-      v-maska:[options]
+      v-maska:[options]="maska"
     >
       <template v-slot:prepend-inner>
         <v-menu
@@ -87,7 +86,7 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import { vMaska, type MaskOptions, type MaskaDetail } from 'maska';
-import { computed, defineComponent, ref, unref } from 'vue';
+import { computed, reactive, defineComponent, ref, unref } from 'vue';
 import {
   VBtn,
   VConfirmEdit,
@@ -103,6 +102,7 @@ import { useLocale } from 'vuetify';
 import type { IconValue } from '../icons';
 import {
   convertDayjsToMaskaFormat,
+  determineClearValue,
   expandLocaleFormat,
   parseDateTime,
   useIcons,
@@ -145,11 +145,12 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     const t = useTranslator();
 
     const showMenu = ref(false);
 
-    const adaptValue = (value: any) => value || undefined;
+    const adaptValue = (value: any) => (value === null ? clearValue : value);
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const icons = useIcons();
@@ -165,7 +166,11 @@ const controlRenderer = defineComponent({
     );
 
     const useMask = control.appliedOptions.value.mask !== false;
-    const maskCompleted = ref(false);
+    const maska = reactive({
+      masked: '',
+      unmasked: '',
+      completed: false,
+    });
 
     const state = computed(() => convertDayjsToMaskaFormat(timeFormat.value));
     const locale = useLocale();
@@ -175,8 +180,6 @@ const controlRenderer = defineComponent({
           mask: state.value.mask,
           tokens: state.value.tokens,
           tokensReplace: true,
-          onMaska: (detail: MaskaDetail) =>
-            (maskCompleted.value = detail.completed),
 
           //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
           _locale: unref(locale.current),
@@ -193,7 +196,7 @@ const controlRenderer = defineComponent({
       timeFormat,
       options,
       useMask,
-      maskCompleted,
+      maska,
     };
   },
   computed: {
@@ -284,25 +287,32 @@ const controlRenderer = defineComponent({
       return undefined;
     },
     inputModel: {
-      get(): string | undefined {
+      get(): string | null {
         const value = this.control.data;
         const time = parseDateTime(value, this.formats);
         return time ? time.format(this.timeFormat) : value;
       },
-      set(val: string | undefined): void {
+      set(val: string | null): void {
         let value = val;
 
-        if (
-          this.useMask &&
-          !this.maskCompleted &&
-          value !== null &&
-          value !== undefined
-        ) {
+        if (this.useMask && !this.maska.completed && value) {
           // the value is set not not yet completed so do not set that until the full mask is completed
           // otherwise if the control.data is bound to another renderer with different dateTimeFormat then those will collide
           return;
         }
 
+        if (value == null) {
+          // clear
+          this.maska.masked = '';
+          this.maska.unmasked = '';
+          this.maska.completed = false;
+        }
+
+        if (this.useMask && value === '' && this.maska.unmasked === '') {
+          // once cleared the maska will set the value to ''
+          return;
+        }
+
         const time = parseDateTime(value, this.timeFormat);
 
         if (time) {
@@ -319,12 +329,9 @@ const controlRenderer = defineComponent({
         const value = this.control.data;
 
         const time = parseDateTime(value, this.formats);
+        const format = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
         // show only valid values
-        return time
-          ? this.useSeconds
-            ? time.format('HH:mm:ss')
-            : time.format('HH:mm')
-          : undefined;
+        return time ? time.format(format) : undefined;
       },
       set(val: string) {
         this.onPickerChange(val);
@@ -362,9 +369,6 @@ const controlRenderer = defineComponent({
       const time = parseDateTime(value, this.useSeconds ? 'HH:mm:ss' : 'HH:mm');
       this.onChange(time ? time.format(this.timeSaveFormat) : value);
     },
-    clear(): void {
-      this.inputModel = undefined;
-    },
   },
 });
 
diff --git a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
index 823d9b8c7..aed51d31d 100644
--- a/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
+++ b/packages/vue-vuetify/src/controls/components/ValidationBadge.vue
@@ -17,10 +17,14 @@
         </v-badge>
       </template>
 
-      <p>Validation Errors</p>
+      <p>
+        {{
+          t ? t('Validation Errors', 'Validation Errors') : 'Validation Errors'
+        }}
+      </p>
       <p
         v-for="(message, index) in tooltipMessages"
-        :key="`${index}`"
+        :key="`${tooltipMessages.length}-${index}`"
         class="mb-0"
       >
         {{ message }}
@@ -31,15 +35,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue';
+import { defineComponent, inject, type PropType } from 'vue';
 import { VBadge, VTooltip } from 'vuetify/components';
 import type { ErrorObject } from 'ajv';
 import findIndex from 'lodash/findIndex';
 import {
   createControlElement,
   createLabelDescriptionFrom,
+  type JsonFormsSubStates,
   type JsonSchema,
 } from '@jsonforms/core';
+import { useTranslator } from '@/util';
 
 export default defineComponent({
   name: 'validation-badge',
@@ -116,5 +122,15 @@ export default defineComponent({
       return error.map((v) => v.labels.join(',') + ': ' + v.message);
     },
   },
+  setup() {
+    // allow using the ValidationBadge outside the jsonforms like in the ExampleView in the demo app
+    const jsonforms = inject<JsonFormsSubStates | undefined>(
+      'jsonforms',
+      undefined,
+    );
+
+    const t = jsonforms !== undefined ? useTranslator() : null;
+    return { t };
+  },
 });
 </script>
diff --git a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
index 565452923..9608262d7 100644
--- a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue
@@ -65,7 +65,7 @@ import { defineComponent } from 'vue';
 import { VAutocomplete, VSelect } from 'vuetify/components';
 import { default as ControlWrapper } from '../controls/ControlWrapper.vue';
 import { DisabledIconFocus } from '../controls/directives';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 
 const controlRenderer = defineComponent({
   name: 'autocomplete-enum-control-renderer',
@@ -81,9 +81,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsEnumControl(props),
-      (value) => (value !== null ? value : undefined),
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
index e7eb31339..03e9ed970 100644
--- a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
+++ b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue
@@ -65,7 +65,7 @@ import { defineComponent } from 'vue';
 import { VAutocomplete, VSelect } from 'vuetify/components';
 import { default as ControlWrapper } from '../controls/ControlWrapper.vue';
 import { DisabledIconFocus } from '../controls/directives';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 
 const controlRenderer = defineComponent({
   name: 'autocomplete-oneof-enum-control-renderer',
@@ -81,9 +81,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsOneOfEnumControl(props),
-      (value) => (value !== null ? value : undefined),
+      (value) => (value === null ? clearValue : value),
       300,
     );
   },
diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index f39a94e36..b0263a00c 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -70,11 +70,13 @@
           >
             <v-expansion-panel
               v-for="(_element, index) in control.data"
-              :key="`${control.path}-${index}`"
+              :key="`${control.path}-${control.data.length}-${index}`"
               :class="styles.arrayList.item"
             >
-              <v-expansion-panel-title :class="styles.arrayList.itemHeader">
-                <v-container py-0 :class="styles.arrayList.itemContainer">
+              <v-expansion-panel-title
+                :class="`${styles.arrayList.itemHeader} py-0`"
+              >
+                <v-container :class="`${styles.arrayList.itemContainer} py-0`">
                   <v-row
                     :style="`display: grid; grid-template-columns: ${
                       !hideAvatar ? 'min-content' : ''
@@ -172,9 +174,9 @@
                             :disabled="
                               !control.enabled ||
                               (appliedOptions.restrict &&
-                                arraySchema !== undefined &&
-                                arraySchema.minItems !== undefined &&
-                                dataLength <= arraySchema.minItems)
+                                control.arraySchema !== undefined &&
+                                control.arraySchema.minItems !== undefined &&
+                                dataLength <= control.arraySchema.minItems)
                             "
                             @click.stop="suggestToDelete = index"
                           >
@@ -265,13 +267,11 @@
 
 <script lang="ts">
 import {
-  Resolve,
   composePaths,
   createDefaultValue,
   findUISchema,
   getControlPath,
   type ControlElement,
-  type JsonSchema,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -366,9 +366,9 @@ const controlRenderer = defineComponent({
       return (
         !this.control.enabled ||
         (this.appliedOptions.restrict &&
-          this.arraySchema !== undefined &&
-          this.arraySchema.maxItems !== undefined &&
-          this.dataLength >= this.arraySchema.maxItems)
+          this.control.arraySchema !== undefined &&
+          this.control.arraySchema.maxItems !== undefined &&
+          this.dataLength >= this.control.arraySchema.maxItems)
       );
     },
     dataLength(): number {
@@ -385,13 +385,6 @@ const controlRenderer = defineComponent({
         this.control.rootSchema,
       );
     },
-    arraySchema(): JsonSchema | undefined {
-      return Resolve.schema(
-        this.control.rootSchema,
-        this.control.uischema.scope,
-        this.control.rootSchema,
-      );
-    },
     hideAvatar(): boolean {
       return !!this.appliedOptions.hideAvatar;
     },
diff --git a/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
index c2de37b0a..809b7cf60 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationRenderer.vue
@@ -15,7 +15,7 @@
         >
           <v-tab
             v-for="(_, index) in visibleCategories"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             {{ visibleCategoryLabels[index] }}
           </v-tab>
@@ -29,7 +29,7 @@
         >
           <v-window-item
             v-for="(element, index) in visibleCategories"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             <dispatch-renderer
               :schema="layout.schema"
@@ -47,7 +47,7 @@
       <v-tabs v-model="activeCategory" v-bind="vuetifyProps('v-tabs')">
         <v-tab
           v-for="(_, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
+          :key="`${layout.path}-${visibleCategories.length}-${index}`"
         >
           {{ visibleCategoryLabels[index] }}
         </v-tab>
@@ -56,7 +56,7 @@
       <v-window v-model="activeCategory" v-bind="vuetifyProps('v-window')">
         <v-window-item
           v-for="(element, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
+          :key="`${layout.path}-${visibleCategories.length}-${index}`"
         >
           <dispatch-renderer
             :schema="layout.schema"
diff --git a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 972c13e0b..a3f62d3a1 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -12,7 +12,7 @@
         :title="visibleCategoryLabels[index]"
         v-for="(element, index) in visibleCategories"
         :value="index + 1"
-        :key="`${layout.path}-${index}`"
+        :key="`${layout.path}-${visibleCategories.length}-${index}`"
       >
         <v-card elevation="0">
           <dispatch-renderer
@@ -36,14 +36,14 @@
         <v-stepper-header>
           <template
             v-for="(_, index) in visibleCategories"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             <v-stepper-item :value="index + 1" editable>
               {{ visibleCategoryLabels[index] }}
             </v-stepper-item>
             <v-divider
               v-if="index !== visibleCategories.length - 1"
-              :key="index"
+              :key="`${layout.path}-divider-${visibleCategories.length}-${index}`"
             ></v-divider>
           </template>
         </v-stepper-header>
@@ -52,7 +52,7 @@
           <v-stepper-window-item
             v-for="(element, index) in visibleCategories"
             :value="index + 1"
-            :key="`${layout.path}-${index}`"
+            :key="`${layout.path}-${visibleCategories.length}-${index}`"
           >
             <v-card elevation="0">
               <dispatch-renderer
diff --git a/packages/vue-vuetify/src/layouts/GroupRenderer.vue b/packages/vue-vuetify/src/layouts/GroupRenderer.vue
index cb7a8fe00..c65bd1b14 100644
--- a/packages/vue-vuetify/src/layouts/GroupRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/GroupRenderer.vue
@@ -16,7 +16,7 @@
     <v-card-text
       v-bind="vuetifyProps(`v-card-text[${index}]`)"
       v-for="(element, index) in (layout.uischema as Layout).elements"
-      :key="`${layout.path}-${index}`"
+      :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
       :class="styles.group.item"
     >
       <dispatch-renderer
diff --git a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
index fb2b07c5e..666cfa72c 100644
--- a/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/HorizontalLayoutRenderer.vue
@@ -1,13 +1,13 @@
 <template>
   <v-container
-    v-if="layout.visible"
+    v-if="layout.visible && (layout.uischema as Layout).elements.length > 0"
     :class="`${styles.horizontalLayout.root}`"
     v-bind="vuetifyProps('v-container')"
   >
     <v-row v-bind="vuetifyProps('v-row')">
       <v-col
         v-for="(element, index) in (layout.uischema as Layout).elements"
-        :key="`${layout.path}-${index}`"
+        :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
         :class="styles.horizontalLayout.item"
         :cols="cols[index]"
         v-bind="vuetifyProps(`v-col[${index}]`)"
diff --git a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
index 73f4d959f..c8059fccb 100644
--- a/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue
@@ -1,13 +1,13 @@
 <template>
   <v-container
-    v-if="layout.visible"
+    v-if="layout.visible && (layout.uischema as Layout).elements.length > 0"
     fill-height
     :class="`${styles.verticalLayout.root}`"
     v-bind="vuetifyProps('v-container')"
   >
     <v-row
       v-for="(element, index) in (layout.uischema as Layout).elements"
-      :key="`${layout.path}-${index}`"
+      :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
       v-bind="vuetifyProps(`v-row[${index}]`)"
     >
       <v-col
diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts
index 3e99fa08c..bf9669e5c 100644
--- a/packages/vue-vuetify/src/util/composition.ts
+++ b/packages/vue-vuetify/src/util/composition.ts
@@ -17,8 +17,10 @@ import {
   type DispatchPropsOfMultiEnumControl,
   type JsonFormsSubStates,
   type JsonSchema,
+  type Scopable,
   type UISchemaElement,
 } from '@jsonforms/core';
+import type { RendererProps } from '@jsonforms/vue';
 import type Ajv from 'ajv';
 import type { ErrorObject } from 'ajv';
 import cloneDeep from 'lodash/cloneDeep';
@@ -36,6 +38,7 @@ import {
 } from 'vue';
 import type { IconOptions } from 'vuetify';
 import { useStyles } from '../styles';
+import { IsDynamicPropertyContext } from './inject';
 
 export const IconSymbol: InjectionKey<Required<IconOptions>> =
   Symbol.for('vuetify:icons');
@@ -481,3 +484,15 @@ export const useIcons = () => {
     current: iconSet,
   };
 };
+
+export const determineClearValue = (defaultValue: any) => {
+  const jsonforms = useJsonForms();
+
+  const useDefaultValue = inject<boolean>(
+    IsDynamicPropertyContext,
+    jsonforms.core?.schema.type !== 'object',
+  );
+
+  // undefined will clear the property from the object
+  return useDefaultValue ? defaultValue : undefined;
+};
diff --git a/packages/vue-vuetify/src/util/datejs.ts b/packages/vue-vuetify/src/util/datejs.ts
index f69a11ab1..667e213de 100644
--- a/packages/vue-vuetify/src/util/datejs.ts
+++ b/packages/vue-vuetify/src/util/datejs.ts
@@ -45,6 +45,35 @@ export const parseDateTime = (
   return dayjsData;
 };
 
+// defintions from - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
+const dayjsTokens = [
+  'YYYY', // Four-digit year - example: 2001
+  'YY', //Two-digit year - example: 01
+  'M', // Month, beginning at 1 - example: 1-12
+  'MM', // Month, 2-digits - example: 01-12
+  'MMM', // The abbreviated month name - example: Jan-Dec
+  'MMMM', // The full month name - example: January-December
+  'D', // Day of month - example: 1-31
+  'DD', // Day of month, 2-digits - example: 01-31
+  'H', // Hours - example: 0-23
+  'HH', // Hours, 2-digits - example: 00-23
+  'h', // Hours, 12-hour clock - example: 1-12
+  'hh', // Hours, 12-hour clock, 2-digits - example: 01-12
+  'm', // Minutes - example: 0-59
+  'mm', // Minutes, 2-digits - example: 00-59
+  's', // Seconds - example: 0-59
+  'ss', // Seconds, 2-digits - example: 00-59
+  'S', // Hundreds of milliseconds, 1-digit - example: 0-9
+  'SS', // Tens of milliseconds, 2-digits - example: 00-99
+  'SSS', // Milliseconds, 3-digits - example: 000-999
+  'Z', // Offset from UTC - example: -05:00
+  'ZZ', // Compact offset from UTC, 2-digits - example: -0500
+  'A', // Post or ante meridiem, upper-case - example: AM PM
+  'a', // Post or ante meridiem, lower-case - example: am pm,
+  'X', // Unix timestamp - example 1410715640.579,
+  'x', // Unix ms timestamp - example 1410715640579
+].sort((a, b) => b.length - a.length);
+
 export const convertDayjsToMaskaFormat = (
   dayjsFormat: string,
 ): { mask: MaskType; tokens: MaskTokens } => {
@@ -110,35 +139,6 @@ export const convertDayjsToMaskaFormat = (
     }
   }
 
-  // defintions from - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
-  const dayjsTokens = [
-    'YYYY', // Four-digit year - example: 2001
-    'YY', //Two-digit year - example: 01
-    'M', // Month, beginning at 1 - example: 1-12
-    'MM', // Month, 2-digits - example: 01-12
-    'MMM', // The abbreviated month name - example: Jan-Dec
-    'MMMM', // The full month name - example: January-December
-    'D', // Day of month - example: 1-31
-    'DD', // Day of month, 2-digits - example: 01-31
-    'H', // Hours - example: 0-23
-    'HH', // Hours, 2-digits - example: 00-23
-    'h', // Hours, 12-hour clock - example: 1-12
-    'hh', // Hours, 12-hour clock, 2-digits - example: 01-12
-    'm', // Minutes - example: 0-59
-    'mm', // Minutes, 2-digits - example: 00-59
-    's', // Seconds - example: 0-59
-    'ss', // Seconds, 2-digits - example: 00-59
-    'S', // Hundreds of milliseconds, 1-digit - example: 0-9
-    'SS', // Tens of milliseconds, 2-digits - example: 00-99
-    'SSS', // Milliseconds, 3-digits - example: 000-999
-    'Z', // Offset from UTC - example: -05:00
-    'ZZ', // Compact offset from UTC, 2-digits - example: -0500
-    'A', // Post or ante meridiem, upper-case - example: AM PM
-    'a', // Post or ante meridiem, lower-case - example: am pm,
-    'X', // Unix timestamp - example 1410715640.579,
-    'x', // Unix ms timestamp - example 1410715640579
-  ].sort((a, b) => b.length - a.length);
-
   const parts = dayjsFormat
     .split(new RegExp(`(${dayjsTokens.join('|')})`))
     .filter(Boolean);
@@ -148,7 +148,7 @@ export const convertDayjsToMaskaFormat = (
     .join('');
   const tokens = new Tokens(reservedChars);
 
-  // need to prebuild all keys to tokens are are going to be used in tokenFunction
+  // need to prebuild all keys to tokens that are going to be used in tokenFunction
   tokens.registerToken({ pattern: /[0-9]/ });
   tokens.registerToken({ pattern: /1/ });
   tokens.registerToken({ pattern: /[0-2]/ });
@@ -434,5 +434,22 @@ export const convertDayjsToMaskaFormat = (
     return mask;
   };
 
-  return { mask: tokenFunction, tokens: tokens.getTokens() };
+  const cache: { value: string | undefined; mask: string | undefined } = {
+    value: undefined,
+    mask: undefined,
+  };
+
+  // memorize the last value to token since maska can call this function multiple times with the same value
+  const memorizedTokenFunction = (value: string): string => {
+    if (cache.value === value && cache.mask !== undefined) {
+      return cache.mask;
+    }
+    const mask = tokenFunction(value);
+    cache.value = value;
+    cache.mask = mask;
+
+    return mask;
+  };
+
+  return { mask: memorizedTokenFunction, tokens: tokens.getTokens() };
 };
diff --git a/packages/vue-vuetify/src/util/index.ts b/packages/vue-vuetify/src/util/index.ts
index 6d720c881..e3c6d25f7 100644
--- a/packages/vue-vuetify/src/util/index.ts
+++ b/packages/vue-vuetify/src/util/index.ts
@@ -1,4 +1,5 @@
 export * from './composition';
 export * from './datejs';
+export * from './inject';
 export * from './options';
 export * from './validator';
diff --git a/packages/vue-vuetify/src/util/inject.ts b/packages/vue-vuetify/src/util/inject.ts
new file mode 100644
index 000000000..ec04df9b0
--- /dev/null
+++ b/packages/vue-vuetify/src/util/inject.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue';
+
+export const IsDynamicPropertyContext: InjectionKey<boolean> = Symbol.for(
+  'jsonforms-vue-vuetify:IsDynamicPropertyContext',
+);