diff --git a/packages/vue-vanilla/dev/components/App.vue b/packages/vue-vanilla/dev/components/App.vue
index 59dc1afd0..7ce2fc2b9 100644
--- a/packages/vue-vanilla/dev/components/App.vue
+++ b/packages/vue-vanilla/dev/components/App.vue
@@ -1,7 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { JsonForms, JsonFormsChangeEvent } from '../../config/jsonforms';
-import { vanillaRenderers, mergeStyles, defaultStyles } from '../../src';
+import {
+  vanillaRenderers,
+  vanillaCells,
+  mergeStyles,
+  defaultStyles,
+} from '../../src';
 import '../../vanilla.css';
 import { ErrorObject } from 'ajv';
 import { getExamples } from '../../../examples';
@@ -29,6 +34,7 @@ export default defineComponent({
     return {
       data: {},
       renderers: Object.freeze(vanillaRenderers),
+      cells: Object.freeze(vanillaCells),
       currentExampleName: examples[0].name,
       examples,
       i18n: examples[0].i18n,
@@ -137,6 +143,7 @@ export default defineComponent({
           :schema="example.schema"
           :uischema="example.uischema"
           :renderers="renderers"
+          :cells="cells"
           :i18n="example.i18n"
           :additional-errors="additionalErrors"
           @change="onChange"
diff --git a/packages/vue-vanilla/src/cells/BooleanCell.vue b/packages/vue-vanilla/src/cells/BooleanCell.vue
new file mode 100644
index 000000000..b37ae4a35
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/BooleanCell.vue
@@ -0,0 +1,40 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="checkbox"
+    :class="styles.control.input"
+    :checked="!!cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isBooleanControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.checked
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+/**
+ * JUST AN PROPOSAL!!!
+ * @see https://github.com/eclipsesource/jsonforms/pull/2279#discussion_r1528101480
+ */
+defineOptions(
+  ((): { tester: RankedTester } => {
+    const tester: RankedTester = rankWith(1, isBooleanControl);
+    return { tester };
+  })()
+);
+</script>
diff --git a/packages/vue-vanilla/src/cells/DateCell.vue b/packages/vue-vanilla/src/cells/DateCell.vue
new file mode 100644
index 000000000..aa5df7f09
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/DateCell.vue
@@ -0,0 +1,33 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="date"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isDateControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.value || undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(2, isDateControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/DateTimeCell.vue b/packages/vue-vanilla/src/cells/DateTimeCell.vue
new file mode 100644
index 000000000..8a52acb4d
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/DateTimeCell.vue
@@ -0,0 +1,44 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    v-model="dataTime"
+    type="datetime-local"
+    :class="styles.control.input"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { RankedTester, ControlElement } from '@jsonforms/core';
+import { isDateTimeControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  '' !== target.value ? toISO(target.value) : undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+const fromISO = (str: string | undefined) => str?.slice(0, 16);
+const toISO = (str: string) => str + ':00.000Z';
+
+const dataTime = ref();
+const setDateTime = (str: string | undefined) => {
+  dataTime.value = fromISO(str);
+};
+
+setDateTime(input.cell.value.data);
+watch(() => input.cell.value.data, setDateTime);
+
+defineOptions({
+  tester: rankWith(2, isDateTimeControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/EnumCell.vue b/packages/vue-vanilla/src/cells/EnumCell.vue
new file mode 100644
index 000000000..6ecd7c4b8
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/EnumCell.vue
@@ -0,0 +1,39 @@
+<template>
+  <select
+    :id="cell.id + '-select'"
+    :class="styles.control.select"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  >
+    <option key="empty" value="" :class="styles.control.option" />
+    <option
+      v-for="optionElement in cell?.options"
+      :key="optionElement.value"
+      :value="optionElement.value"
+      :label="optionElement.label"
+      :class="styles.control.option"
+    ></option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsEnumCell } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import { isEnumControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsEnumCell(props), (target) =>
+  target.selectedIndex === 0 ? undefined : target.value
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(2, isEnumControl),
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/EnumOneOfCell.vue b/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
new file mode 100644
index 000000000..aeade4c75
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/EnumOneOfCell.vue
@@ -0,0 +1,39 @@
+<template>
+  <select
+    :id="cell.id + '-input'"
+    :class="styles.control.select"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  >
+    <option key="empty" value="" :class="styles.control.option" />
+    <option
+      v-for="optionElement in cell.options"
+      :key="optionElement.value"
+      :value="optionElement.value"
+      :label="optionElement.label"
+      :class="styles.control.option"
+    ></option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsOneOfEnumCell } from '@jsonforms/vue';
+import type { RankedTester, ControlElement } from '@jsonforms/core';
+import { isOneOfEnumControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsOneOfEnumCell(props), (target) =>
+  target.selectedIndex === 0 ? undefined : target.value
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(5, isOneOfEnumControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/IntegerCell.vue b/packages/vue-vanilla/src/cells/IntegerCell.vue
new file mode 100644
index 000000000..7966a2fd4
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/IntegerCell.vue
@@ -0,0 +1,33 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="number"
+    :step="1"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { RankedTester, ControlElement } from '@jsonforms/core';
+import { isIntegerControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  target.value === '' ? undefined : parseInt(target.value, 10)
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isIntegerControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/NumberCell.vue b/packages/vue-vanilla/src/cells/NumberCell.vue
new file mode 100644
index 000000000..fe9fb4d29
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/NumberCell.vue
@@ -0,0 +1,39 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="number"
+    :step="step"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isNumberControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  target.value === '' ? undefined : Number(target.value)
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+const step = computed(() => {
+  const options: any = appliedOptions;
+  return options.step ?? 0.1;
+});
+
+defineOptions({
+  tester: rankWith(1, isNumberControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/TextCell.vue b/packages/vue-vanilla/src/cells/TextCell.vue
new file mode 100644
index 000000000..4210e8ae5
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/TextCell.vue
@@ -0,0 +1,32 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isStringControl, rankWith } from '@jsonforms/core';
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.value || undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(1, isStringControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/TextareaCell.vue b/packages/vue-vanilla/src/cells/TextareaCell.vue
new file mode 100644
index 000000000..ef5a95db9
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/TextareaCell.vue
@@ -0,0 +1,37 @@
+<template>
+  <textarea
+    :id="cell.id + '-input'"
+    :class="styles.control.textarea"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import {
+  and,
+  isMultiLineControl,
+  isStringControl,
+  rankWith,
+} from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(
+  useJsonFormsCell(props),
+  (target) => target.value || undefined
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+defineOptions({
+  tester: rankWith(2, and(isStringControl, isMultiLineControl)) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/TimeCell.vue b/packages/vue-vanilla/src/cells/TimeCell.vue
new file mode 100644
index 000000000..d27c4d2dd
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/TimeCell.vue
@@ -0,0 +1,35 @@
+<template>
+  <input
+    :id="cell.id + '-input'"
+    type="time"
+    :class="styles.control.input"
+    :value="cell.data"
+    :disabled="!cell.enabled"
+    :autofocus="appliedOptions.focus"
+    :placeholder="appliedOptions.placeholder"
+    @change="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsCell } from '@jsonforms/vue';
+import type { ControlElement, RankedTester } from '@jsonforms/core';
+import { isTimeControl, rankWith } from '@jsonforms/core';
+import { useVanillaCell } from '../util';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const input = useVanillaCell(useJsonFormsCell(props), (target) =>
+  appendSeconds(target.value || undefined)
+);
+const { styles, cell, appliedOptions, onChange, isFocused } = input;
+
+const appendSeconds = (value: string | undefined) =>
+  value?.split(':').length === 2 ? value + ':00' : value;
+
+defineOptions({
+  tester: rankWith(2, isTimeControl) as RankedTester,
+});
+</script>
diff --git a/packages/vue-vanilla/src/cells/index.ts b/packages/vue-vanilla/src/cells/index.ts
new file mode 100644
index 000000000..5285aacda
--- /dev/null
+++ b/packages/vue-vanilla/src/cells/index.ts
@@ -0,0 +1,24 @@
+import { type JsonFormsCellRendererRegistryEntry } from '@jsonforms/core';
+import TextCell from './TextCell.vue';
+import NumberCell from './NumberCell.vue';
+import IntegerCell from './IntegerCell.vue';
+import DateCell from './DateCell.vue';
+import TimeCell from './TimeCell.vue';
+import DateTimeCell from './DateTimeCell.vue';
+import TextareaCell from './TextareaCell.vue';
+import EnumCell from './EnumCell.vue';
+import EnumOneOfCell from './EnumOneOfCell.vue';
+import BooleanCell from './BooleanCell.vue';
+
+export const vanillaCells: JsonFormsCellRendererRegistryEntry[] = [
+  { cell: TextCell, tester: TextCell.tester },
+  { cell: NumberCell, tester: NumberCell.tester },
+  { cell: IntegerCell, tester: IntegerCell.tester },
+  { cell: DateCell, tester: DateCell.tester },
+  { cell: TimeCell, tester: TimeCell.tester },
+  { cell: DateTimeCell, tester: DateTimeCell.tester },
+  { cell: TextareaCell, tester: TextareaCell.tester },
+  { cell: EnumCell, tester: EnumCell.tester },
+  { cell: EnumOneOfCell, tester: EnumOneOfCell.tester },
+  { cell: BooleanCell, tester: BooleanCell.tester },
+];
diff --git a/packages/vue-vanilla/src/complex/OneOfRenderer.vue b/packages/vue-vanilla/src/complex/OneOfRenderer.vue
index 471d89dd7..7a4e7198d 100644
--- a/packages/vue-vanilla/src/complex/OneOfRenderer.vue
+++ b/packages/vue-vanilla/src/complex/OneOfRenderer.vue
@@ -70,12 +70,15 @@
 
 <script lang="ts">
 import {
+  and,
   CombinatorSubSchemaRenderInfo,
   ControlElement,
   createCombinatorRenderInfos,
   createDefaultValue,
   isOneOfControl,
+  isOneOfEnumControl,
   JsonFormsRendererRegistryEntry,
+  not,
   rankWith,
 } from '@jsonforms/core';
 import {
@@ -192,6 +195,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(3, isOneOfControl),
+  tester: rankWith(3, and(isOneOfControl, not(isOneOfEnumControl))),
 };
 </script>
diff --git a/packages/vue-vanilla/src/controls/BooleanControlRenderer.vue b/packages/vue-vanilla/src/controls/BooleanControlRenderer.vue
deleted file mode 100644
index d8332eb82..000000000
--- a/packages/vue-vanilla/src/controls/BooleanControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="checkbox"
-      :class="styles.control.input"
-      :checked="!!control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isBooleanControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'BooleanControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.checked
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isBooleanControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/DateControlRenderer.vue b/packages/vue-vanilla/src/controls/DateControlRenderer.vue
deleted file mode 100644
index 14ef0e8ff..000000000
--- a/packages/vue-vanilla/src/controls/DateControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="date"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isDateControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'DateControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isDateControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue b/packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue
deleted file mode 100644
index 39b0400b0..000000000
--- a/packages/vue-vanilla/src/controls/DateTimeControlRenderer.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="datetime-local"
-      :class="styles.control.input"
-      :value="dataTime"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isDateTimeControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const toISOString = (inputDateTime: string) => {
-  return inputDateTime === '' ? undefined : inputDateTime + ':00.000Z';
-};
-
-const controlRenderer = defineComponent({
-  name: 'DatetimeControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), (target) =>
-      toISOString(target.value)
-    );
-  },
-  computed: {
-    dataTime(): string {
-      return (this.control.data ?? '').substr(0, 16);
-    },
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isDateTimeControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/EnumControlRenderer.vue b/packages/vue-vanilla/src/controls/EnumControlRenderer.vue
deleted file mode 100644
index d713e584f..000000000
--- a/packages/vue-vanilla/src/controls/EnumControlRenderer.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <select
-      :id="control.id + '-select'"
-      :class="styles.control.select"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    >
-      <option key="empty" value="" :class="styles.control.option" />
-      <option
-        v-for="optionElement in control.options"
-        :key="optionElement.value"
-        :value="optionElement.value"
-        :label="optionElement.label"
-        :class="styles.control.option"
-      ></option>
-    </select>
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isEnumControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsEnumControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'EnumControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsEnumControl(props), (target) =>
-      target.selectedIndex === 0 ? undefined : target.value
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isEnumControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue b/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
deleted file mode 100644
index 0b520279d..000000000
--- a/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <select
-      :id="control.id + '-input'"
-      :class="styles.control.select"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    >
-      <option key="empty" value="" :class="styles.control.option" />
-      <option
-        v-for="optionElement in control.options"
-        :key="optionElement.value"
-        :value="optionElement.value"
-        :label="optionElement.label"
-        :class="styles.control.option"
-      ></option>
-    </select>
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isOneOfEnumControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsOneOfEnumControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'EnumOneofControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsOneOfEnumControl(props), (target) =>
-      target.selectedIndex === 0 ? undefined : target.value
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(5, isOneOfEnumControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/StringControlRenderer.vue b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
similarity index 70%
rename from packages/vue-vanilla/src/controls/StringControlRenderer.vue
rename to packages/vue-vanilla/src/controls/InputControlRenderer.vue
index 958126a33..ccb5af1ea 100644
--- a/packages/vue-vanilla/src/controls/StringControlRenderer.vue
+++ b/packages/vue-vanilla/src/controls/InputControlRenderer.vue
@@ -5,40 +5,37 @@
     :is-focused="isFocused"
     :applied-options="appliedOptions"
   >
-    <input
+    <DispatchCell
       :id="control.id + '-input'"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+      :schema="control.schema"
+      :uischema="control.uischema"
+      :enabled="control.enabled"
+      :path="control.path"
     />
   </control-wrapper>
 </template>
 
 <script lang="ts">
-import {
+import type {
   ControlElement,
   JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
 } from '@jsonforms/core';
+import { isControl, rankWith } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
+  DispatchCell,
   rendererProps,
+  type RendererProps,
   useJsonFormsControl,
-  RendererProps,
 } from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'StringControlRenderer',
+  name: 'InputControlRenderer',
   components: {
     ControlWrapper,
+    DispatchCell,
   },
   props: {
     ...rendererProps<ControlElement>(),
@@ -55,6 +52,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isStringControl),
+  tester: rankWith(1, isControl),
 };
 </script>
diff --git a/packages/vue-vanilla/src/controls/IntegerControlRenderer.vue b/packages/vue-vanilla/src/controls/IntegerControlRenderer.vue
deleted file mode 100644
index 0e0654c5d..000000000
--- a/packages/vue-vanilla/src/controls/IntegerControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="number"
-      :step="1"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isIntegerControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'IntegerControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), (target) =>
-      target.value === '' ? undefined : parseInt(target.value, 10)
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isIntegerControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue b/packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue
deleted file mode 100644
index 0d1b80e36..000000000
--- a/packages/vue-vanilla/src/controls/MultiStringControlRenderer.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <textarea
-      :id="control.id + '-input'"
-      :class="styles.control.textarea"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-  isMultiLineControl,
-  and,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'MultiStringControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, and(isStringControl, isMultiLineControl)),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/NumberControlRenderer.vue b/packages/vue-vanilla/src/controls/NumberControlRenderer.vue
deleted file mode 100644
index 418dca983..000000000
--- a/packages/vue-vanilla/src/controls/NumberControlRenderer.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="number"
-      :step="step"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isNumberControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'NumberControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), (target) =>
-      target.value === '' ? undefined : Number(target.value)
-    );
-  },
-  computed: {
-    step(): number {
-      const options: any = this.appliedOptions;
-      return options.step ?? 0.1;
-    },
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(1, isNumberControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/TimeControlRenderer.vue b/packages/vue-vanilla/src/controls/TimeControlRenderer.vue
deleted file mode 100644
index edae10174..000000000
--- a/packages/vue-vanilla/src/controls/TimeControlRenderer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <control-wrapper
-    v-bind="controlWrapper"
-    :styles="styles"
-    :is-focused="isFocused"
-    :applied-options="appliedOptions"
-  >
-    <input
-      :id="control.id + '-input'"
-      type="time"
-      :class="styles.control.input"
-      :value="control.data"
-      :disabled="!control.enabled"
-      :autofocus="appliedOptions.focus"
-      :placeholder="appliedOptions.placeholder"
-      @change="onChange"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-  </control-wrapper>
-</template>
-
-<script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isTimeControl,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
-  rendererProps,
-  useJsonFormsControl,
-  RendererProps,
-} from '../../config/jsonforms';
-import { default as ControlWrapper } from './ControlWrapper.vue';
-import { useVanillaControl } from '../util';
-
-const controlRenderer = defineComponent({
-  name: 'TimeControlRenderer',
-  components: {
-    ControlWrapper,
-  },
-  props: {
-    ...rendererProps<ControlElement>(),
-  },
-  setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
-  },
-});
-
-export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isTimeControl),
-};
-</script>
diff --git a/packages/vue-vanilla/src/controls/index.ts b/packages/vue-vanilla/src/controls/index.ts
index 6bfaa073a..18f0aba93 100644
--- a/packages/vue-vanilla/src/controls/index.ts
+++ b/packages/vue-vanilla/src/controls/index.ts
@@ -1,35 +1,6 @@
 export { default as ControlWrapper } from './ControlWrapper.vue';
-export { default as StringControlRenderer } from './StringControlRenderer.vue';
-export { default as MultiStringControlRenderer } from './MultiStringControlRenderer.vue';
-export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
-export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
-export { default as EnumControlRenderer } from './EnumControlRenderer.vue';
-export { default as oneOfEnumControlRenderer } from './EnumOneOfControlRenderer.vue';
-export { default as DateControlRenderer } from './DateControlRenderer.vue';
-export { default as DateTimeControlRenderer } from './DateTimeControlRenderer.vue';
-export { default as TimeControlRenderer } from './TimeControlRenderer.vue';
-export { default as BooleanControlRenderer } from './BooleanControlRenderer.vue';
+export { default as InputControlRenderer } from './InputControlRenderer.vue';
 
-import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
-import { entry as multiStringControlRendererEntry } from './MultiStringControlRenderer.vue';
-import { entry as numberControlRendererEntry } from './NumberControlRenderer.vue';
-import { entry as integerControlRendererEntry } from './IntegerControlRenderer.vue';
-import { entry as enumControlRendererEntry } from './EnumControlRenderer.vue';
-import { entry as oneOfEnumControlRendererEntry } from './EnumOneOfControlRenderer.vue';
-import { entry as dateControlRendererEntry } from './DateControlRenderer.vue';
-import { entry as dateTimeControlRendererEntry } from './DateTimeControlRenderer.vue';
-import { entry as timeControlRendererEntry } from './TimeControlRenderer.vue';
-import { entry as booleanControlRendererEntry } from './BooleanControlRenderer.vue';
+import { entry as InputControlRendererEntry } from './InputControlRenderer.vue';
 
-export const controlRenderers = [
-  stringControlRendererEntry,
-  multiStringControlRendererEntry,
-  numberControlRendererEntry,
-  integerControlRendererEntry,
-  enumControlRendererEntry,
-  oneOfEnumControlRendererEntry,
-  dateControlRendererEntry,
-  dateTimeControlRendererEntry,
-  timeControlRendererEntry,
-  booleanControlRendererEntry,
-];
+export const controlRenderers = [InputControlRendererEntry];
diff --git a/packages/vue-vanilla/src/index.ts b/packages/vue-vanilla/src/index.ts
index 90770dbcd..cda18843c 100644
--- a/packages/vue-vanilla/src/index.ts
+++ b/packages/vue-vanilla/src/index.ts
@@ -5,3 +5,4 @@ export * from './renderers';
 export * from './styles';
 export * from './util';
 export * from './label';
+export * from './cells';
diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 89bc88e6d..aa820020b 100644
--- a/packages/vue-vanilla/src/util/composition.ts
+++ b/packages/vue-vanilla/src/util/composition.ts
@@ -9,6 +9,35 @@ import {
   Resolve,
 } from '@jsonforms/core';
 
+/**
+ * Adds styles, isFocused, appliedOptions and onChange
+ */
+export const useVanillaCell = <I extends { cell: any; handleChange: any }>(
+  input: I,
+  adaptTarget: (target: any) => any = (v) => v.value
+) => {
+  const appliedOptions = computed(() =>
+    merge(
+      {},
+      cloneDeep(input.cell.value.config),
+      cloneDeep(input.cell.value.uischema.options)
+    )
+  );
+
+  const isFocused = ref(false);
+  const onChange = (event: Event) => {
+    input.handleChange(input.cell.value.path, adaptTarget(event.target));
+  };
+
+  return {
+    ...input,
+    styles: useStyles(input.cell.value.uischema),
+    isFocused,
+    appliedOptions,
+    onChange,
+  };
+};
+
 /**
  * Adds styles, isFocused, appliedOptions and onChange
  */
diff --git a/packages/vue-vanilla/tests/unit/util/TestComponent.vue b/packages/vue-vanilla/tests/unit/util/TestComponent.vue
index 8e3f764a1..26952ce53 100644
--- a/packages/vue-vanilla/tests/unit/util/TestComponent.vue
+++ b/packages/vue-vanilla/tests/unit/util/TestComponent.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { JsonForms } from '../../../config/jsonforms';
-import { vanillaRenderers } from '../../../src';
+import { vanillaRenderers, vanillaCells } from '../../../src';
 import { JsonFormsChangeEvent } from '@jsonforms/vue';
 
 export default defineComponent({
@@ -14,6 +14,7 @@ export default defineComponent({
   data() {
     return {
       renderers: Object.freeze(vanillaRenderers),
+      cells: Object.freeze(vanillaCells),
       data: this.initialData,
     };
   },
@@ -31,6 +32,7 @@ export default defineComponent({
     :schema="schema"
     :uischema="uischema"
     :renderers="renderers"
+    :cells="cells"
     :config="config"
     @change="onChange"
   />