diff --git a/packages/example/package.json b/packages/example/package.json
index ace5b63..76ac86f 100644
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -34,6 +34,7 @@
     "json-refs": "^3.0.15",
     "lodash": "^4.17.15",
     "monaco-editor": "^0.49.0",
+    "ractive": "^1.4.4",
     "splitpanes": "^3.1.5",
     "vue": "^3.5.0",
     "vuetify": "^3.11.0"
diff --git a/packages/example/src/components/ExampleAppBar.vue b/packages/example/src/components/ExampleAppBar.vue
index ede9bbc..ee9afb2 100644
--- a/packages/example/src/components/ExampleAppBar.vue
+++ b/packages/example/src/components/ExampleAppBar.vue
@@ -19,7 +19,7 @@ const { smAndUp } = useDisplay();
     <v-toolbar-title>
       <v-container fill-height fluid class="py-0 pr-0"
         ><v-row align="center" justify="center">
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <JsonFormsLogo
                 @click="appStore.exampleName = ''"
@@ -41,7 +41,7 @@ const { smAndUp } = useDisplay();
       <v-container fill-height fluid justify-end class="pa-0"
         ><v-row align="center" no-gutters class="fill-height">
           <v-col class="d-flex justify-center align-center" v-if="smAndUp">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn-toggle
                   v-bind="props"
@@ -67,7 +67,7 @@ const { smAndUp } = useDisplay();
             </v-tooltip>
           </v-col>
           <v-col class="d-flex justify-center align-center" v-if="smAndUp">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn-toggle
                   v-bind="props"
@@ -102,7 +102,7 @@ const { smAndUp } = useDisplay();
             v-if="smAndUp"
           ></v-divider>
           <v-col class="d-flex justify-center align-center">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn
                   icon
@@ -124,7 +124,7 @@ const { smAndUp } = useDisplay();
             <theme-switcher></theme-switcher>
           </v-col>
           <v-col class="d-flex justify-center align-center">
-            <v-tooltip bottom>
+            <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
                 <v-btn
                   icon
diff --git a/packages/example/src/components/ExampleSettings.vue b/packages/example/src/components/ExampleSettings.vue
index 06c8d4b..75b75ce 100644
--- a/packages/example/src/components/ExampleSettings.vue
+++ b/packages/example/src/components/ExampleSettings.vue
@@ -278,7 +278,7 @@ const darkModeValue = computed({
       <v-row><v-col>Options</v-col></v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.hideRequiredAsterisk"
@@ -292,7 +292,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.showUnfocusedDescription"
@@ -306,7 +306,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.restrict"
@@ -321,7 +321,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.readonly"
@@ -335,7 +335,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.collapseNewItems"
@@ -349,7 +349,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.hideArraySummaryValidation"
@@ -363,7 +363,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.initCollapsed"
@@ -377,7 +377,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="appStore.jsonforms.config.hideAvatar"
@@ -391,7 +391,7 @@ const darkModeValue = computed({
       </v-row>
       <v-row>
         <v-col>
-          <v-tooltip bottom>
+          <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <v-switch
                 v-model="
@@ -405,6 +405,45 @@ const darkModeValue = computed({
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-combobox
+                v-model="
+                  appStore.jsonforms.config.filterErrorKeywordsBeforeTouch
+                "
+                label="Filter Error Keywords Before Touch"
+                placeholder="e.g., required, minLength, pattern"
+                chips
+                closable-chips
+                multiple
+                clearable
+                v-bind="props"
+              ></v-combobox>
+            </template>
+            Hide specific AJV error keywords until the control is touched.
+            Requires "Enable Filter Errors Before Touch".
+          </v-tooltip>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-switch
+                v-model="
+                  appStore.jsonforms.config.allowAdditionalPropertiesIfMissing
+                "
+                label="Allow Additional Properties By Default"
+                v-bind="props"
+              ></v-switch>
+            </template>
+            Allow adding additional properties when the schema does not specify
+            explicitly the addtionalProperties
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-container>
 
     <v-divider />
diff --git a/packages/example/src/components/ThemeSwitcher.vue b/packages/example/src/components/ThemeSwitcher.vue
index 53a3975..8fcbb4d 100644
--- a/packages/example/src/components/ThemeSwitcher.vue
+++ b/packages/example/src/components/ThemeSwitcher.vue
@@ -56,7 +56,7 @@ function switchTheme(themeName: string) {
 <template>
   <v-menu offset-y>
     <template v-slot:activator="{ props: menuProps }">
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template v-slot:activator="{ props: tooltipProps }">
           <v-btn
             icon
diff --git a/packages/example/src/core/jsonschema/specification/uischema.json b/packages/example/src/core/jsonschema/specification/uischema.json
index 5093b6d..3527e93 100644
--- a/packages/example/src/core/jsonschema/specification/uischema.json
+++ b/packages/example/src/core/jsonschema/specification/uischema.json
@@ -364,6 +364,9 @@
         "template": {
           "type": "string"
         },
+        "lang": {
+          "type": "string"
+        },
         "elements": {
           "$ref": "#/definitions/elements"
         },
diff --git a/packages/example/src/examples/button/uischema.json b/packages/example/src/examples/button/uischema.json
index 95c3dcc..d51e670 100644
--- a/packages/example/src/examples/button/uischema.json
+++ b/packages/example/src/examples/button/uischema.json
@@ -44,6 +44,7 @@
         {
           "type": "TemplateLayout",
           "template": "<v-container class='pa-0 ma-0'><v-btn-toggle density='compact' v-tooltip=\"context.uidata.alert ? 'Hide Alert' : 'Show Alert'\" v-model='context.uidata.alert'><v-btn :value='true' :icon='context.uidata.alert ? \"mdi-message-alert\" : \"mdi-message-outline\"'></v-btn></v-btn-toggle><slot name='button'></slot></v-container>",
+          "lang": "vue",
           "elements": [
             {
               "type": "Button",
diff --git a/packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue b/packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue
index 68c6cdf..8a6569c 100644
--- a/packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue
+++ b/packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <array-layout-renderer v-bind="$props">
     <template v-slot:toolbar-elements="actionsProps">
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template v-slot:activator="{ props }">
           <v-btn
             color="primary"
diff --git a/packages/example/src/examples/index.ts b/packages/example/src/examples/index.ts
index 022637b..7a876d7 100644
--- a/packages/example/src/examples/index.ts
+++ b/packages/example/src/examples/index.ts
@@ -7,6 +7,7 @@ import { input as anyOfSimple } from './anyOf-simple';
 import { input as anyOfWithProps } from './anyOf-with-props';
 import { input as array } from './array';
 import { input as arrayRestrict } from './array-restrict';
+import { input as arrayType } from './array-type';
 import { input as arrayWithReorder } from './array-with-reorder';
 import { input as basic } from './basic';
 import { input as basicTypes } from './basic-types';
@@ -64,6 +65,7 @@ import { input as templateSlot } from './template-slot';
 import { input as time } from './time';
 import { input as verticalLayout } from './vertical-layout';
 import { input as verticalSplitLayout } from './vertical-split-layout';
+import { input as vueTemplateLayout } from './vue-template-layout';
 
 export * from './register';
 
@@ -77,6 +79,7 @@ export {
   anyOfWithProps,
   array,
   arrayRestrict,
+  arrayType,
   arrayWithReorder,
   basic,
   basicTypes,
@@ -134,4 +137,5 @@ export {
   time,
   verticalLayout,
   verticalSplitLayout,
+  vueTemplateLayout,
 };
diff --git a/packages/example/src/examples/job/uischema.json b/packages/example/src/examples/job/uischema.json
index 8bca81a..20d69af 100644
--- a/packages/example/src/examples/job/uischema.json
+++ b/packages/example/src/examples/job/uischema.json
@@ -1,19 +1,23 @@
 {
   "type": "TemplateLayout",
   "template": "<v-card class=\"main-form\" flat><slot name=\"toolbar\"></slot><v-container style=\"pa-0\" fluid><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot v-if=\"element.name != 'toolbar'\" :name=\"element.name\"></slot></v-col></v-row></v-container></v-card>",
+  "lang": "vue",
   "elements": [
     {
       "type": "TemplateLayout",
       "template": "<v-toolbar><v-toolbar-title>{{translate('Job Application', 'Job Application')}}</v-toolbar-title><v-toolbar-items class='d-flex align-center'><div v-for=\"element in elements\" :key=\"element.name\"><slot :name=\"element.name\"></slot></div></v-toolbar-items></v-toolbar>",
+      "lang": "vue",
       "name": "toolbar",
       "elements": [
         {
           "type": "TemplateLayout",
-          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": context.translate(\"static-text.English\", \"English\"), \"value\": \"en\"}, {\"label\": context.translate(\"static-text.Bulgarian\", \"Bulgarian\"), \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>"
+          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": context.translate(\"static-text.English\", \"English\"), \"value\": \"en\"}, {\"label\": context.translate(\"static-text.Bulgarian\", \"Bulgarian\"), \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>",
+          "lang": "vue"
         },
         {
           "type": "TemplateLayout",
-          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>"
+          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>",
+          "lang": "vue"
         }
       ]
     },
@@ -27,6 +31,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Template",
@@ -43,6 +48,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Template",
@@ -59,6 +65,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Control",
@@ -75,6 +82,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "ListWithDetail",
diff --git a/packages/example/src/examples/job/uischemas.json b/packages/example/src/examples/job/uischemas.json
index 5365ec2..ea4d1ee 100644
--- a/packages/example/src/examples/job/uischemas.json
+++ b/packages/example/src/examples/job/uischemas.json
@@ -3,6 +3,7 @@
     "tester": "(jsonSchema, schemaPath, path) => { return NOT_APPLICABLE; }",
     "uischema": {
       "type": "TemplateLayout",
+      "lang": "vue",
       "name": "applicant",
       "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
       "elements": [
@@ -12,6 +13,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container class='align-stretch'><v-row><v-col><v-img :src='data.applicant.profilePicture' v-if='data.applicant && data.applicant.profilePicture'></v-img></v-col></v-row><v-row class='mt-auto'><v-col><slot name='upload'></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Control",
@@ -154,6 +156,7 @@
     "uischema": {
       "type": "TemplateLayout",
       "name": "jobDetails",
+      "lang": "vue",
       "template": "<v-container><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
       "elements": [
         {
diff --git a/packages/example/src/examples/template-layout/uischema.json b/packages/example/src/examples/template-layout/uischema.json
index 2feee25..70b2bb3 100644
--- a/packages/example/src/examples/template-layout/uischema.json
+++ b/packages/example/src/examples/template-layout/uischema.json
@@ -1,49 +1,31 @@
 {
   "type": "TemplateLayout",
-  "template": "<v-card class=\"mx-auto my-12\" flat><slot name=\"header\"></slot><slot name=\"title\"></slot><div v-for=\"element in elements\" :key=\"element.name\"><slot v-if=\"element.name != 'header' && element.name != 'title'\" :name=\"element.name\"></slot><v-divider class=\"mx-6\"></v-divider></div></v-card>",
+  "template": "<div class='mx-auto my-12'>{{> header}}{{> title}}<div>{{#each elements:i}}{{#if name !== 'header' && name !== 'title'}}{{> name}}{{/if}}{{/each}}</div></div>",
   "elements": [
     {
       "type": "TemplateLayout",
-      "template": "<v-card-title class=\"d-flex align-center\"><span>{{translate('Custom TemplateLayout with JSONForms and Vuetify', 'Custom TemplateLayout with JSONForms and Vuetify')}}</span><v-spacer /><slot v-for=\"element in elements\" :key=\"element.name\" :name=\"element.name\"></slot></v-card-title>",
+      "template": "<div class='d-flex align-center' style='margin: 0 20px;'><span>{{translate('Custom TemplateLayout with JSONForms and Vuetify','Custom TemplateLayout with JSONForms and Vuetify')}}</span><div style='flex:1'></div>{{#each elements:i}}{{> name}}{{/each}}</div>",
       "name": "title",
       "elements": [
         {
           "type": "Button",
           "label": "EN",
           "action": "changeLang",
-          "params": {
-            "lang": "en"
-          },
-          "options": {
-            "vuetify": {
-              "v-btn": {
-                "small": true,
-                "fab": true
-              }
-            }
-          }
+          "params": { "lang": "en" },
+          "options": { "vuetify": { "v-btn": { "small": true, "fab": true } } }
         },
         {
           "type": "Button",
           "label": "BG",
           "action": "changeLang",
-          "params": {
-            "lang": "bg"
-          },
-          "options": {
-            "vuetify": {
-              "v-btn": {
-                "small": true,
-                "fab": true
-              }
-            }
-          }
+          "params": { "lang": "bg" },
+          "options": { "vuetify": { "v-btn": { "small": true, "fab": true } } }
         }
       ]
     },
     {
       "type": "TemplateLayout",
-      "template": "<v-toolbar><v-row align=\"center\" justify=\"center\" no-gutters><v-col><v-img src=\"https://jsonforms.io/img/logo.svg\" max-width=\"50px\" max-height=\"50px\" style=\"filter: invert(1); margin-left: 20px;\"></v-img></v-col><v-spacer></v-spacer><v-col class=\"d-flex justify-end\"><v-img src=\"https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg\" max-width=\"200px\" max-height=\"200px\" style=\"margin-right: 20px;\"></v-img></v-col></v-row></v-toolbar>",
+      "template": "<div class='d-flex align-center'><div class='d-flex align-center' style='margin-left:20px;'><img src='https://jsonforms.io/img/logo.svg' style='max-width:50px; max-height:50px; filter:invert(1);' /></div><div style='flex:1'></div><div class='d-flex justify-end' style='margin-right:20px;'><img src='https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg' style='max-width:200px; max-height:200px;' /></div></div>",
       "name": "header"
     },
     {
@@ -52,23 +34,17 @@
         {
           "type": "HorizontalLayout",
           "elements": [
-            {
-              "type": "Control",
-              "scope": "#/properties/name"
-            },
+            { "type": "Control", "scope": "#/properties/name" },
             {
               "type": "Control",
               "scope": "#/properties/personalData/properties/age"
             },
-            {
-              "type": "Control",
-              "scope": "#/properties/birthDate"
-            }
+            { "type": "Control", "scope": "#/properties/birthDate" }
           ]
         },
         {
           "type": "TemplateLayout",
-          "template": "<div>{{translate('Additional Information For', 'Additional Information For')}} <strong>{{ data.name }}</strong></div>"
+          "template": "<div>{{translate('Additional Information For','Additional Information For')}} <strong>{{data.name}}</strong></div>"
         },
         {
           "type": "HorizontalLayout",
@@ -77,10 +53,7 @@
               "type": "Control",
               "scope": "#/properties/personalData/properties/height"
             },
-            {
-              "type": "Control",
-              "scope": "#/properties/nationality"
-            },
+            { "type": "Control", "scope": "#/properties/nationality" },
             {
               "type": "Control",
               "scope": "#/properties/occupation",
@@ -103,11 +76,25 @@
     },
     {
       "type": "TemplateLayout",
-      "template": "<v-card-text><v-card-title><div style='display: flex; gap: 1rem;'><span>JSON Data</span><validation-icon v-if='errors' :errors='errors'></validation-icon></div></v-card-title><slot name=\"0\"></slot></v-card-text>",
+      "template": "<div class='pa-4'><div class='d-flex align-center mb-2'><span>JSON Data</span>{{#if errors}}<span class='ml-2'><i class=\"mdi-alert-circle-outline mdi text-error\"></i></span>{{/if}}</div>{{> jsoneditor}}</div>",
       "elements": [
         {
-          "type": "TemplateLayout",
-          "template": "<v-container fluid><v-row><v-col><v-monaco-editor language='json' readonly :model-value='JSON.stringify(data, null, 2)' :autoGrow='true' :maxRows='15' :options='{ minimap: { enabled: false } }'></v-monaco-editor></v-col></v-row></v-container>"
+          "type": "Control",
+          "scope": "#",
+          "options": {
+            "format": "code",
+            "language": "json",
+            "convertJson": true,
+            "vuetify": {
+              "v-monaco-editor": {
+                "initActions": ["editor.action.formatDocument"],
+                "readonly": false,
+                "autoGrow": true,
+                "maxRows": 15
+              }
+            }
+          },
+          "name": "jsoneditor"
         }
       ]
     }
diff --git a/packages/example/src/examples/vue-template-layout/actions.ts b/packages/example/src/examples/vue-template-layout/actions.ts
new file mode 100644
index 0000000..a0c88c7
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/actions.ts
@@ -0,0 +1,20 @@
+import type { ActionEvent } from '@chobantonov/jsonforms-vuetify-renderers';
+
+const changeLang = (event: ActionEvent) => {
+  if (event.context.appStore) {
+    // demo app
+    event.context.appStore.jsonforms.locale = event.params.lang;
+  } else if (event.$el.getRootNode() instanceof ShadowRoot) {
+    // web component
+    const form = (event.$el.getRootNode() as ShadowRoot).host;
+    if (form) {
+      form.setAttribute('locale', event.params.lang);
+    }
+  }
+};
+
+export const onHandleAction = (event: ActionEvent) => {
+  if (event.action === 'changeLang') {
+    event.callback = changeLang;
+  }
+};
diff --git a/packages/example/src/examples/vue-template-layout/config.json b/packages/example/src/examples/vue-template-layout/config.json
new file mode 100644
index 0000000..d264bd8
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/config.json
@@ -0,0 +1,3 @@
+{
+  "defaultTemplateLang": "vue"
+}
diff --git a/packages/example/src/examples/vue-template-layout/data.json b/packages/example/src/examples/vue-template-layout/data.json
new file mode 100644
index 0000000..44a8183
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/data.json
@@ -0,0 +1,10 @@
+{
+  "name": "John Doe",
+  "vegetarian": false,
+  "birthDate": "1985-06-02",
+  "personalData": {
+    "age": 34,
+    "drivingSkill": 7
+  },
+  "postalCode": "12345"
+}
diff --git a/packages/example/src/examples/vue-template-layout/i18n.json b/packages/example/src/examples/vue-template-layout/i18n.json
new file mode 100644
index 0000000..e67a3ac
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/i18n.json
@@ -0,0 +1,86 @@
+{
+  "en": {
+    "name": {
+      "label": "Name",
+      "description": "The name of the person"
+    },
+    "vegetarian": {
+      "label": "Vegetarian",
+      "description": "Whether the person is a vegetarian"
+    },
+    "birth": {
+      "label": "Birth Date",
+      "description": ""
+    },
+    "nationality": {
+      "label": "Nationality",
+      "description": ""
+    },
+    "personal-data": {
+      "age": {
+        "label": "Age"
+      },
+      "driving": {
+        "label": "Driving Skill",
+        "description": "Indicating experience level"
+      }
+    },
+    "height": {
+      "label": "Height"
+    },
+    "occupation": {
+      "label": "Occupation",
+      "description": ""
+    },
+    "postal-code": {
+      "label": "Postal Code"
+    },
+    "error": {
+      "required": "field is required"
+    }
+  },
+  "bg": {
+    "name": {
+      "label": "Име",
+      "description": "Името на лицето"
+    },
+    "vegetarian": {
+      "label": "Вегетарианец",
+      "description": "Дали човекът е вегетарианец"
+    },
+    "birth": {
+      "label": "Рождена дата",
+      "description": ""
+    },
+    "nationality": {
+      "label": "Националност",
+      "description": ""
+    },
+    "personal-data": {
+      "age": {
+        "label": "Възраст",
+        "description": "Моля, въведете вашата възраст."
+      },
+      "driving": {
+        "label": "Шофьорски умения",
+        "description": "Показва ниво на опит"
+      }
+    },
+    "height": {
+      "label": "Височина"
+    },
+    "occupation": {
+      "label": "Професия",
+      "description": ""
+    },
+    "postal-code": {
+      "label": "Пощенски код"
+    },
+    "error": {
+      "required": "полето е задължително"
+    },
+    "Additional Information": "Допълнителна информация",
+    "Custom TemplateLayout with JSONForms and Vuetify": "Персонализиран TemplateLayout с JSONForms и Vuetify",
+    "Additional Information For": "Допълнителна информация за"
+  }
+}
diff --git a/packages/example/src/examples/vue-template-layout/index.ts b/packages/example/src/examples/vue-template-layout/index.ts
new file mode 100644
index 0000000..5f846ea
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/index.ts
@@ -0,0 +1,25 @@
+import type { ExampleInputDescription } from '@/core/types';
+import { registerExamples } from '../register';
+import { onHandleAction } from './actions';
+import data from './data.json';
+import i18n from './i18n.json';
+import schema from './schema.json';
+import uischema from './uischema.json';
+import config from './config.json';
+
+export const input: ExampleInputDescription = {
+  schema,
+  uischema,
+  data,
+  i18n,
+  onHandleAction,
+  config,
+};
+
+registerExamples([
+  {
+    name: 'vue-template-layout',
+    label: 'Vue Template Layout',
+    input,
+  },
+]);
diff --git a/packages/example/src/examples/vue-template-layout/schema.json b/packages/example/src/examples/vue-template-layout/schema.json
new file mode 100644
index 0000000..65f55ed
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/schema.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "minLength": 3,
+      "description": "Please enter your name",
+      "i18n": "name"
+    },
+    "vegetarian": {
+      "type": "boolean",
+      "i18n": "vegetarian"
+    },
+    "birthDate": {
+      "type": "string",
+      "format": "date",
+      "i18n": "birth"
+    },
+    "nationality": {
+      "type": "string",
+      "enum": ["US", "BG", "DE", "JP", "RU", "Other"],
+      "i18n": "nationality"
+    },
+    "personalData": {
+      "type": "object",
+      "properties": {
+        "age": {
+          "type": "integer",
+          "description": "Please enter your age.",
+          "i18n": "personal-data.age"
+        },
+        "height": {
+          "type": "number",
+          "i18n": "height"
+        },
+        "drivingSkill": {
+          "type": "number",
+          "maximum": 10,
+          "minimum": 1,
+          "default": 7,
+          "i18n": "personal-data.driving"
+        }
+      },
+      "required": ["age", "height"]
+    },
+    "occupation": {
+      "type": "string",
+      "i18n": "occupation"
+    },
+    "postalCode": {
+      "type": "string",
+      "maxLength": 5,
+      "i18n": "postal-code"
+    }
+  },
+  "required": ["occupation", "nationality"]
+}
diff --git a/packages/example/src/examples/vue-template-layout/uischema.json b/packages/example/src/examples/vue-template-layout/uischema.json
new file mode 100644
index 0000000..959a86a
--- /dev/null
+++ b/packages/example/src/examples/vue-template-layout/uischema.json
@@ -0,0 +1,121 @@
+{
+  "type": "TemplateLayout",
+  "template": "<v-card class=\"mx-auto my-12\" flat><slot name=\"header\"></slot><slot name=\"title\"></slot><div v-for=\"element in elements\" :key=\"element.name\"><slot v-if=\"element.name != 'header' && element.name != 'title'\" :name=\"element.name\"></slot><v-divider class=\"mx-6\"></v-divider></div></v-card>",
+  "lang": "vue",
+  "elements": [
+    {
+      "type": "TemplateLayout",
+      "template": "<v-card-title class=\"d-flex align-center\"><span>{{translate('Custom TemplateLayout with JSONForms and Vuetify', 'Custom TemplateLayout with JSONForms and Vuetify')}}</span><v-spacer /><slot v-for=\"element in elements\" :key=\"element.name\" :name=\"element.name\"></slot></v-card-title>",
+      "lang": "vue",
+      "name": "title",
+      "elements": [
+        {
+          "type": "Button",
+          "label": "EN",
+          "action": "changeLang",
+          "params": {
+            "lang": "en"
+          },
+          "options": {
+            "vuetify": {
+              "v-btn": {
+                "small": true,
+                "fab": true
+              }
+            }
+          }
+        },
+        {
+          "type": "Button",
+          "label": "BG",
+          "action": "changeLang",
+          "params": {
+            "lang": "bg"
+          },
+          "options": {
+            "vuetify": {
+              "v-btn": {
+                "small": true,
+                "fab": true
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "type": "TemplateLayout",
+      "template": "<v-toolbar><v-row align=\"center\" justify=\"center\" no-gutters><v-col><v-img src=\"https://jsonforms.io/img/logo.svg\" max-width=\"50px\" max-height=\"50px\" style=\"filter: invert(1); margin-left: 20px;\"></v-img></v-col><v-spacer></v-spacer><v-col class=\"d-flex justify-end\"><v-img src=\"https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg\" max-width=\"200px\" max-height=\"200px\" style=\"margin-right: 20px;\"></v-img></v-col></v-row></v-toolbar>",
+      "lang": "vue",
+      "name": "header"
+    },
+    {
+      "type": "VerticalLayout",
+      "elements": [
+        {
+          "type": "HorizontalLayout",
+          "elements": [
+            {
+              "type": "Control",
+              "scope": "#/properties/name"
+            },
+            {
+              "type": "Control",
+              "scope": "#/properties/personalData/properties/age"
+            },
+            {
+              "type": "Control",
+              "scope": "#/properties/birthDate"
+            }
+          ]
+        },
+        {
+          "type": "TemplateLayout",
+          "template": "<div>{{translate('Additional Information For', 'Additional Information For')}} <strong>{{ data.name }}</strong></div>",
+          "lang": "ractive"
+        },
+        {
+          "type": "HorizontalLayout",
+          "elements": [
+            {
+              "type": "Control",
+              "scope": "#/properties/personalData/properties/height"
+            },
+            {
+              "type": "Control",
+              "scope": "#/properties/nationality"
+            },
+            {
+              "type": "Control",
+              "scope": "#/properties/occupation",
+              "options": {
+                "suggestion": [
+                  "Accountant",
+                  "Engineer",
+                  "Freelancer",
+                  "Journalism",
+                  "Physician",
+                  "Student",
+                  "Teacher",
+                  "Other"
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "TemplateLayout",
+      "template": "<v-card-text><v-card-title><div style='display: flex; gap: 1rem;'><span>JSON Data</span><validation-icon v-if='errors' :errors='errors'></validation-icon></div></v-card-title><slot name=\"0\"></slot></v-card-text>",
+      "lang": "vue",
+      "elements": [
+        {
+          "type": "TemplateLayout",
+          "template": "<v-container fluid><v-row><v-col><v-monaco-editor language='json' readonly :model-value='JSON.stringify(data, null, 2)' :autoGrow='true' :maxRows='15' :options='{ minimap: { enabled: false } }'></v-monaco-editor></v-col></v-row></v-container>",
+          "lang": "vue"
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/example/src/store/index.ts b/packages/example/src/store/index.ts
index 236005e..b113a77 100644
--- a/packages/example/src/store/index.ts
+++ b/packages/example/src/store/index.ts
@@ -68,6 +68,8 @@ const appstore = reactive({
       hideAvatar: false,
       hideArraySummaryValidation: false,
       enableFilterErrorsBeforeTouch: false,
+      filterErrorKeywordsBeforeTouch: ['required'],
+      allowAdditionalPropertiesIfMissing: false,
     },
     locale: useLocalStorage('vuetify-example-locale', 'en'),
   },
diff --git a/packages/example/src/views/ExampleView.vue b/packages/example/src/views/ExampleView.vue
index 88538ba..caa69f9 100644
--- a/packages/example/src/views/ExampleView.vue
+++ b/packages/example/src/views/ExampleView.vue
@@ -599,7 +599,7 @@ const wrapperProps = computed(() => ({
                           class="pr-4 mt-1"
                         >
                           <v-col cols="auto">
-                            <v-tooltip bottom>
+                            <v-tooltip location="bottom">
                               <template v-slot:activator="{ props }">
                                 <WebComponentLogo
                                   v-bind="props"
@@ -635,7 +635,7 @@ const wrapperProps = computed(() => ({
                         <v-toolbar flat>
                           <v-toolbar-title>Data</v-toolbar-title>
                           <v-spacer></v-spacer>
-                          <v-tooltip bottom>
+                          <v-tooltip location="bottom">
                             <template v-slot:activator="{ props }">
                               <v-btn
                                 icon
@@ -647,7 +647,7 @@ const wrapperProps = computed(() => ({
                             </template>
                             {{ `Reload Example Data` }}
                           </v-tooltip>
-                          <v-tooltip bottom>
+                          <v-tooltip location="bottom">
                             <template v-slot:activator="{ props }">
                               <v-btn
                                 icon
@@ -678,7 +678,7 @@ const wrapperProps = computed(() => ({
                   >
                     <v-row slot="form-header" justify="end" class="pr-4 mt-1">
                       <v-col cols="auto">
-                        <v-tooltip bottom>
+                        <v-tooltip location="bottom">
                           <template v-slot:activator="{ props }">
                             <WebComponentLogo
                               v-bind="props"
@@ -716,7 +716,7 @@ const wrapperProps = computed(() => ({
                 <v-toolbar flat>
                   <v-toolbar-title>Schema</v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="reloadMonacoSchema" v-bind="props">
                         <v-icon>$reload</v-icon>
@@ -724,7 +724,7 @@ const wrapperProps = computed(() => ({
                     </template>
                     {{ `Reload Example Schema` }}
                   </v-tooltip>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="saveMonacoSchema" v-bind="props">
                         <v-icon>$save</v-icon>
@@ -749,7 +749,7 @@ const wrapperProps = computed(() => ({
                 <v-toolbar flat>
                   <v-toolbar-title>UI Schema</v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="reloadMonacoUiSchema" v-bind="props">
                         <v-icon>$reload</v-icon>
@@ -757,7 +757,7 @@ const wrapperProps = computed(() => ({
                     </template>
                     {{ `Reload Example UI Schema` }}
                   </v-tooltip>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="saveMonacoUiSchema" v-bind="props">
                         <v-icon>$save</v-icon>
@@ -782,7 +782,7 @@ const wrapperProps = computed(() => ({
                 <v-toolbar flat>
                   <v-toolbar-title>UI Schemas</v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="reloadMonacoUiSchemas" v-bind="props">
                         <v-icon>$reload</v-icon>
@@ -790,7 +790,7 @@ const wrapperProps = computed(() => ({
                     </template>
                     {{ `Reload Example UI Schemas` }}
                   </v-tooltip>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="saveMonacoUiSchemas" v-bind="props">
                         <v-icon>$save</v-icon>
@@ -815,7 +815,7 @@ const wrapperProps = computed(() => ({
                 <v-toolbar flat>
                   <v-toolbar-title>Internationalization</v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="reloadMonacoI18N" v-bind="props">
                         <v-icon>$reload</v-icon>
@@ -823,7 +823,7 @@ const wrapperProps = computed(() => ({
                     </template>
                     {{ `Reload Example Internationalization` }}
                   </v-tooltip>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="saveMonacoI18N" v-bind="props">
                         <v-icon>$save</v-icon>
@@ -848,7 +848,7 @@ const wrapperProps = computed(() => ({
                 <v-toolbar flat>
                   <v-toolbar-title>Config</v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="reloadMonacoConfig" v-bind="props">
                         <v-icon>$reload</v-icon>
@@ -856,7 +856,7 @@ const wrapperProps = computed(() => ({
                     </template>
                     {{ `Reload Example Config` }}
                   </v-tooltip>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="saveMonacoConfig" v-bind="props">
                         <v-icon>$save</v-icon>
@@ -881,7 +881,7 @@ const wrapperProps = computed(() => ({
                 <v-toolbar flat>
                   <v-toolbar-title>Data</v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="reloadMonacoData" v-bind="props">
                         <v-icon>$reload</v-icon>
@@ -889,7 +889,7 @@ const wrapperProps = computed(() => ({
                     </template>
                     {{ `Reload Example Data` }}
                   </v-tooltip>
-                  <v-tooltip bottom>
+                  <v-tooltip location="bottom">
                     <template v-slot:activator="{ props }">
                       <v-btn icon @click="saveMonacoData" v-bind="props">
                         <v-icon>$save</v-icon>
diff --git a/packages/jsonforms-vuetify-renderers/package.json b/packages/jsonforms-vuetify-renderers/package.json
index 245bc08..31dfbce 100644
--- a/packages/jsonforms-vuetify-renderers/package.json
+++ b/packages/jsonforms-vuetify-renderers/package.json
@@ -62,6 +62,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "monaco-editor": "^0.49.0",
+    "ractive": "^1.4.4",
     "splitpanes": "^3.2.0",
     "vue": "^3.5.0",
     "vuetify": "^3.11.0"
@@ -87,6 +88,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "monaco-editor": "^0.49.0",
+    "ractive": "^1.4.4",
     "resize-observer-polyfill": "^1.5.1",
     "splitpanes": "^3.2.0",
     "vue": "^3.5.0",
diff --git a/packages/jsonforms-vuetify-renderers/src/components/ResolvedJsonForms.vue b/packages/jsonforms-vuetify-renderers/src/components/ResolvedJsonForms.vue
index 900d19d..bf1883c 100644
--- a/packages/jsonforms-vuetify-renderers/src/components/ResolvedJsonForms.vue
+++ b/packages/jsonforms-vuetify-renderers/src/components/ResolvedJsonForms.vue
@@ -279,10 +279,13 @@ const createMiddlewareWrapper = (wrappedFunction: Middleware): Middleware => {
   };
 };
 
-const errorMessage = computed(() => {
+const errorTitle = computed(() => {
   const message = 'Error resolving schema';
   if (props.state.i18n?.translate) {
-    return props.state.i18n.translate(message, message);
+    return props.state.i18n.translate(
+      'ResolvedJsonForms.resolve_schema_error_title',
+      message,
+    );
   }
   return message;
 });
@@ -479,8 +482,11 @@ if (!handleActionEmitter) {
             justify="center"
           >
             <v-col class="text-subtitle-1 text-center" cols="12">
-              <v-alert color="red" dark>
-                {{ errorMessage }}: {{ resolvedSchema.error }}
+              <v-alert
+                :title="errorTitle"
+                :text="resolvedSchema.error"
+                type="error"
+              >
               </v-alert>
             </v-col>
           </v-row>
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/AgGridArrayControlRenderer.vue b/packages/jsonforms-vuetify-renderers/src/renderers/AgGridArrayControlRenderer.vue
index a3a55d1..f3b3ab3 100644
--- a/packages/jsonforms-vuetify-renderers/src/renderers/AgGridArrayControlRenderer.vue
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/AgGridArrayControlRenderer.vue
@@ -22,7 +22,7 @@
           v-if="control.childErrors.length > 0"
           :errors="control.childErrors"
         />
-        <v-tooltip bottom>
+        <v-tooltip location="bottom">
           <template v-slot:activator="{ props }">
             <v-btn
               icon
@@ -46,7 +46,7 @@
           </template>
           {{ control.translations.addTooltip }}
         </v-tooltip>
-        <v-tooltip bottom>
+        <v-tooltip location="bottom">
           <template v-slot:activator="{ props }">
             <v-btn
               v-bind="props"
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.entry.ts b/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.entry.ts
index 1b769ba..e7da8d3 100644
--- a/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.entry.ts
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.entry.ts
@@ -4,6 +4,7 @@ import {
   optionIs,
   or,
   rankWith,
+  uiTypeIs,
   type JsonFormsRendererRegistryEntry,
   type Tester,
   type UISchemaElement,
@@ -30,11 +31,24 @@ const hasStringValueOption =
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: monacoRenderer,
   tester: rankWith(
-    2,
+    3,
     and(
-      isStringControl,
       optionIs('format', 'code'),
-      or(hasStringValueOption('language'), hasStringValueOption(':language')),
+      or(
+        and(
+          isStringControl,
+          or(
+            hasStringValueOption('language'),
+            hasStringValueOption(':language'),
+          ),
+        ),
+        // if the language is set to 'json' we can use the monaco editor for any type
+        and(
+          and(uiTypeIs('Control')),
+          optionIs('language', 'json'),
+          optionIs('convertJson', true),
+        ),
+      ),
     ),
   ),
 };
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.vue b/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.vue
index 888aed0..654efff 100644
--- a/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.vue
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/MonacoRenderer.vue
@@ -20,7 +20,7 @@
         :persistent-hint="persistentHint()"
         :required="control.required"
         :error-messages="control.errors"
-        :model-value="control.data"
+        :model-value="adaptModelToEditorValue(control.data)"
         v-bind="vuetifyProps('v-monaco-editor')"
         :language="language"
         @update:model-value="onChange"
@@ -55,7 +55,7 @@
               :placeholder="appliedOptions.placeholder"
               :required="control.required"
               :error-messages="control.errors"
-              :model-value="control.data"
+              :model-value="adaptModelToEditorValue(control.data)"
               v-bind="vuetifyProps('v-monaco-editor')"
               :language="language"
               @update:model-value="onChange"
@@ -87,6 +87,7 @@ import {
   useVuetifyControl,
 } from '@jsonforms/vue-vuetify';
 import { defineComponent, ref, nextTick, watch } from 'vue';
+import { computed } from 'vue';
 import { defineAsyncComponent } from 'vue';
 import {
   VBtn,
@@ -123,14 +124,50 @@ const controlRenderer = defineComponent({
     const editorRef = ref<any>(null);
 
     const clearValue = determineClearValue('');
-    const adaptValue = (value: any) => value || clearValue;
 
-    const vuetifyControl = useVuetifyControl(
-      useJsonFormsControl(props),
-      adaptValue,
-      300,
+    const control = useJsonFormsControl(props);
+    const language = computed(() => {
+      const langOption = control.control.value.uischema.options?.[':language'];
+      if (langOption) {
+        const rootData = jsonforms.core?.data;
+        return Resolve.data(rootData, langOption);
+      }
+      return control.control.value.uischema.options?.language;
+    });
+
+    const convertJson = computed(
+      () => control.control.value.uischema.options?.convertJson ?? false,
     );
 
+    const adaptModelToEditorValue = (value: any): string => {
+      if (language.value === 'json' && convertJson.value) {
+        return value != undefined ? JSON.stringify(value, null, 2) : '';
+      }
+
+      if (value === undefined || value === null) {
+        return '';
+      }
+
+      return typeof value === 'string' ? value : String(value);
+    };
+
+    const vuetifyControl = useVuetifyControl(control, (v) => v, 300);
+
+    const onChange = (value: string) => {
+      let model = value || clearValue;
+
+      if (language.value === 'json' && convertJson.value) {
+        try {
+          model = JSON.parse(value);
+        } catch {
+          // do not update the model if JSON is invalid
+          return;
+        }
+      }
+
+      vuetifyControl.onChange(model);
+    };
+
     const toggleMaximize = () => {
       isMaximized.value = !isMaximized.value;
       nextTick(() => {
@@ -148,23 +185,16 @@ const controlRenderer = defineComponent({
 
     return {
       ...vuetifyControl,
+      onChange,
       jsonforms,
       icons,
       isMaximized,
       editorRef,
       toggleMaximize,
+      language,
+      adaptModelToEditorValue,
     };
   },
-  computed: {
-    language(): string | undefined {
-      const language = this.control.uischema.options?.[':language'];
-      if (language) {
-        const rootData = this.jsonforms.core?.data;
-        return Resolve.data(rootData, language);
-      }
-      return this.control.uischema.options?.language;
-    },
-  },
 });
 
 export default controlRenderer;
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.entry.ts b/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.entry.ts
index 3566c29..0817646 100644
--- a/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.entry.ts
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.entry.ts
@@ -1,11 +1,32 @@
 import {
+  and,
   rankWith,
   uiTypeIs,
   type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+  type Tester,
+  type TesterContext,
+  type UISchemaElement,
 } from '@jsonforms/core';
 
 import templateLayoutRenderer from './TemplateLayoutRenderer.vue';
+export const langIs =
+  (expected: string): Tester =>
+  (
+    uischema: UISchemaElement & { lang?: string },
+    schema: JsonSchema,
+    context: TesterContext,
+  ): boolean => {
+    return (
+      uischema.lang === expected ||
+      (uischema.lang === undefined &&
+        (!context.config ||
+          context.config.defaultTemplateLang === expected ||
+          context.config.defaultTemplateLang === undefined))
+    );
+  };
+
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: templateLayoutRenderer,
-  tester: rankWith(2, uiTypeIs('TemplateLayout')),
+  tester: rankWith(2, and(uiTypeIs('TemplateLayout'), langIs('ractive'))),
 };
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.vue b/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.vue
index 4925aa1..113c5ad 100644
--- a/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.vue
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.vue
@@ -3,33 +3,37 @@
     :disabled="!vuetifyProps('defaults')"
     :defaults="vuetifyProps('defaults')"
   >
-    <div v-if="templateError !== null" class="error">
-      Template Error: {{ templateError }}
-    </div>
-
-    <template-compiler
-      v-else-if="layout.visible"
-      :template="template"
-      :parent="parentComponent"
-      :elements="namedElements"
-      :componentComputed="componentComputed"
-      :componentDirectives="componentDirectives"
-      :componentMethods="componentMethods"
-      :componentFilters="componentFilters"
-      :componentComponents="componentComponents"
-      :layout="layout"
+    <v-alert
+      v-if="templateError !== null"
+      :title="errorTitle"
+      :text="templateError"
+      type="error"
+    />
+
+    <div ref="templateRoot" style="display: contents"></div>
+
+    <slot-host
+      v-for="{ name, el } in slotPlaceholders"
+      :key="name"
+      :mount-to="el"
     >
-    </template-compiler>
+      <dispatch-renderer
+        v-if="namedElementMap[name]"
+        :schema="layout.schema"
+        :uischema="namedElementMap[name]"
+        :path="layout.path"
+        :enabled="layout.enabled"
+        :renderers="layout.renderers"
+        :cells="layout.cells"
+      />
+    </slot-host>
   </v-defaults-provider>
 </template>
 
 <script lang="ts">
+import { type Layout } from '@jsonforms/core';
 import {
-  type JsonFormsSubStates,
-  type Layout,
-  type UISchemaElement,
-} from '@jsonforms/core';
-import {
+  DispatchRenderer,
   rendererProps,
   useJsonFormsLayout,
   type RendererProps,
@@ -38,197 +42,175 @@ import {
   useJsonForms,
   useTranslator,
   useVuetifyLayout,
-  ValidationIcon,
 } from '@jsonforms/vue-vuetify';
-
-import { type ErrorObject } from 'ajv';
 import {
-  defineAsyncComponent,
+  computed,
   defineComponent,
-  inject,
+  h,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
   ref,
-  unref,
-  type Component,
-  type ComponentPublicInstance,
-  type ComputedOptions,
-  type Directive,
-  type MethodOptions,
+  watch,
 } from 'vue';
-import TemplateCompiler from '../components/TemplateCompiler.vue';
+import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider';
+import { VAlert } from 'vuetify/components';
+import { type NamedUISchemaElement } from '../core/types';
+import { useFormContext, type TemplateLayout } from '../util';
 import {
-  TemplateComponentsKey,
-  TemplateComputedKey,
-  TemplateDirectivesKey,
-  TemplateFiltersKey,
-  TemplateMethodsKey,
-  type NamedUISchemaElement,
-} from '../core/types';
-import { useFormContext } from '../util';
+  RactiveTemplateController,
+  type SlotPlaceholder,
+} from '../util/ractive-template-controller';
 
-import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider';
-import * as defaultDirectives from 'vuetify/directives';
-import SlotElement from '../components/SlotElement.vue';
-import VPane from '../components/VPane.vue';
-import VSplitpanes from '../components/VSplitpanes.vue';
-
-const VMonacoEditor = defineAsyncComponent(() =>
-  import('../components/VMonacoEditor').then((m) => m.VMonacoEditor),
-);
-export interface TemplateLayout extends Layout {
-  type: 'TemplateLayout';
-  /**
-   * The template string.
-   */
-  template: string;
-}
-
-const controlRenderer = defineComponent({
+const SlotHost = defineComponent({
+  name: 'SlotHost',
+  props: {
+    mountTo: {
+      type: Object as () => HTMLElement,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const root = ref<HTMLElement | null>(null);
+
+    onMounted(() => {
+      if (root.value && props.mountTo) {
+        props.mountTo.appendChild(root.value);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (root.value && root.value.parentNode) {
+        root.value.parentNode.removeChild(root.value);
+      }
+    });
+
+    return () =>
+      h(
+        'div',
+        {
+          ref: root,
+          style: { display: 'contents' },
+        },
+        slots.default ? slots.default() : [],
+      );
+  },
+});
+
+export default defineComponent({
   name: 'template-layout-renderer',
   inheritAttrs: false,
   components: {
-    TemplateCompiler,
-    VDefaultsProvider: VDefaultsProvider,
+    VDefaultsProvider,
+    VAlert,
+    DispatchRenderer,
+    SlotHost,
   },
-  props: {
-    ...rendererProps<TemplateLayout>(),
-  },
-  async setup(props: RendererProps<TemplateLayout>) {
-    const t = useTranslator();
-    const layout = useVuetifyLayout(useJsonFormsLayout(props));
+  props: { ...rendererProps<TemplateLayout>() },
 
+  setup(props: RendererProps<TemplateLayout>) {
+    const t = useTranslator();
+    const input = useVuetifyLayout(useJsonFormsLayout(props));
     const jsonforms = useJsonForms();
     const context = useFormContext();
-    const templateError = ref<string | null>(null);
 
-    const defaultComponents = await import('vuetify/components');
+    const templateRoot = ref<HTMLElement | null>(null);
+    const templateError = ref<string | null>(null);
 
-    return {
-      ...layout,
-      t,
-      jsonforms,
-      parentComponent: this,
-      templateError,
-      context,
-      defaultComponents,
-      defaultDirectives,
+    const slotPlaceholders = ref<SlotPlaceholder[]>([]);
+
+    const layout = computed(() => input.layout.value);
+    const data = computed(() => jsonforms.core?.data);
+    const errors = computed(() => jsonforms.core?.errors);
+
+    const template = computed(
+      () => (layout.value.uischema as TemplateLayout).template,
+    );
+
+    const namedElements = computed((): NamedUISchemaElement[] => {
+      const uischema = layout.value.uischema as TemplateLayout;
+      return (uischema.elements || []).map((element, index) => ({
+        ...element,
+        name: (element as any).name ?? `${index}`,
+      }));
+    });
+
+    const namedElementMap = computed<Record<string, NamedUISchemaElement>>(() =>
+      Object.fromEntries(namedElements.value.map((e) => [e.name, e])),
+    );
+
+    const controller = markRaw(
+      new RactiveTemplateController((slots) => {
+        slotPlaceholders.value = slots;
+      }),
+    );
+
+    const isVisible = computed(() => input.layout.value.visible);
+    watch(isVisible, (visible) => {
+      controller.updateVisibility(visible);
+    });
+
+    const initializeRactive = async () => {
+      await nextTick();
+      if (!template.value || !templateRoot.value) return;
+
+      templateError.value = null;
+
+      try {
+        await controller.setup(
+          templateRoot.value,
+          template.value,
+          {
+            data: data.value,
+            errors: errors.value,
+            context: context.value,
+            elements: namedElements.value,
+            translate: (k: string, d?: string) => t.value(k, d || ''),
+          },
+          isVisible.value,
+        );
+      } catch (e: any) {
+        templateError.value = e?.message ?? String(e);
+      }
     };
-  },
-  errorCaptured: function (
-    err: unknown,
-    _instance: ComponentPublicInstance | null,
-    info: string,
-  ) {
-    if (info == 'render') {
-      this.templateError = err instanceof Error ? err.message : String(err);
-    }
-  },
-  computed: {
-    data(): any {
-      const jsonforms: JsonFormsSubStates = this.jsonforms;
-      return jsonforms.core?.data;
-    },
-    errors(): ErrorObject[] | undefined {
-      const jsonforms: JsonFormsSubStates = this.jsonforms;
-      return jsonforms.core?.errors;
-    },
-    template(): string | undefined {
-      return (this.layout.uischema as TemplateLayout).template;
-    },
-    namedElements(): NamedUISchemaElement[] {
-      return (this.layout.uischema as TemplateLayout).elements?.map(
-        (element, index) => {
-          if ((element as any).name === undefined) {
-            (element as any).name = `${index}`;
-          }
-          return element as UISchemaElement & { name: string };
-        },
-      );
-    },
-    componentDirectives(): Record<string, Directive> {
-      const override = unref(
-        inject<Record<string, Directive> | undefined>(
-          TemplateDirectivesKey,
-          undefined,
-        ),
-      );
-
-      return override
-        ? {
-            ...(this.defaultDirectives as Record<string, Directive>),
-            ...override,
-          }
-        : (this.defaultDirectives as Record<string, Directive>);
-    },
-    componentComputed(): ComputedOptions {
-      const defaultComputed = {} as ComputedOptions;
-
-      defaultComputed.data = () => this.data;
-      defaultComputed.errors = () => this.errors;
-      defaultComputed.elements = () => this.namedElements;
-      defaultComputed.context = () => this.context;
 
-      const override = unref(
-        inject<ComputedOptions | undefined>(TemplateComputedKey, undefined),
+    watch(template, initializeRactive);
+
+    watch(data, (v) => controller.updateData('data', v), { deep: true });
+    watch(errors, (v) => controller.updateData('errors', v), { deep: true });
+    watch(context, (v) => controller.updateData('context', v), { deep: true });
+    watch(namedElements, (v) => controller.updateData('elements', v), {
+      deep: true,
+    });
+    watch(t, () => {
+      // Force Ractive to rerender by updating a reactive key
+      controller.updateData('translate', (k: string, d?: string) =>
+        t.value(k, d || ''),
       );
-      return override ? { ...defaultComputed, ...override } : defaultComputed;
-    },
-    componentMethods() {
-      const defaultMethods = {
-        translate: this.translate.bind(this.parentComponent),
-      } as MethodOptions;
+    });
 
-      const override = unref(
-        inject<MethodOptions | undefined>(TemplateMethodsKey, undefined),
-      );
+    onMounted(initializeRactive);
 
-      return override ? { ...defaultMethods, ...override } : defaultMethods;
-    },
-    componentFilters() {
-      const defaultFilters = {
-        translate: this.translate.bind(this.parentComponent),
-      } as MethodOptions;
+    onBeforeUnmount(async () => {
+      await controller.destroy();
+      slotPlaceholders.value = [];
+    });
 
-      const override = unref(
-        inject<MethodOptions | undefined>(TemplateFiltersKey, undefined),
-      );
-      return override ? { ...defaultFilters, ...override } : defaultFilters;
-    },
-    componentComponents(): Record<string, Component> {
-      // by default we use only Vuetify components that are already used by other renderers
-      const override = unref(
-        inject<Record<string, Component> | undefined>(
-          TemplateComponentsKey,
-          undefined,
-        ),
-      );
+    const errorTitle = computed(() =>
+      t.value('TemplateLayoutRenderer.template_error_title', 'Template Error'),
+    );
 
-      return {
-        ...this.defaultComponents,
-        VMonacoEditor,
-        ValidationIcon,
-        SlotElement,
-        VSplitpanes,
-        VPane,
-        ...(override ? override : {}),
-      };
-    },
-  },
-  methods: {
-    translate(
-      key: string,
-      defaultMessage: string | undefined,
-    ): string | undefined {
-      return this.t(key, defaultMessage ?? '');
-    },
-  },
-  filters: {
-    translate: function (value: any) {
-      if (!value) return '';
-      value = value.toString();
-      return this.t(value, '');
-    },
+    return {
+      ...input,
+      layout,
+      templateRoot,
+      templateError,
+      errorTitle,
+      slotPlaceholders,
+      namedElementMap,
+      vuetifyProps: input.vuetifyProps,
+    };
   },
 });
-
-export default controlRenderer;
 </script>
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/VueTemplateLayoutRenderer.entry.ts b/packages/jsonforms-vuetify-renderers/src/renderers/VueTemplateLayoutRenderer.entry.ts
new file mode 100644
index 0000000..ff71b7f
--- /dev/null
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/VueTemplateLayoutRenderer.entry.ts
@@ -0,0 +1,31 @@
+import {
+  and,
+  rankWith,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+  type Tester,
+  type TesterContext,
+  type UISchemaElement,
+} from '@jsonforms/core';
+
+import vueTemplateLayoutRenderer from './VueTemplateLayoutRenderer.vue';
+export const langIs =
+  (expected: string): Tester =>
+  (
+    uischema: UISchemaElement & { lang?: string },
+    schema: JsonSchema,
+    context: TesterContext,
+  ): boolean => {
+    return (
+      uischema.lang === expected ||
+      (uischema.lang === undefined &&
+        context.config &&
+        context.config.defaultTemplateLang === expected)
+    );
+  };
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: vueTemplateLayoutRenderer,
+  tester: rankWith(2, and(uiTypeIs('TemplateLayout'), langIs('vue'))),
+};
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/VueTemplateLayoutRenderer.vue b/packages/jsonforms-vuetify-renderers/src/renderers/VueTemplateLayoutRenderer.vue
new file mode 100644
index 0000000..373e764
--- /dev/null
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/VueTemplateLayoutRenderer.vue
@@ -0,0 +1,227 @@
+<template>
+  <v-defaults-provider
+    :disabled="!vuetifyProps('defaults')"
+    :defaults="vuetifyProps('defaults')"
+  >
+    <div v-if="templateError !== null" class="error">
+      Template Error: {{ templateError }}
+    </div>
+
+    <template-compiler
+      v-else-if="layout.visible"
+      :template="template"
+      :parent="parentComponent"
+      :elements="namedElements"
+      :componentComputed="componentComputed"
+      :componentDirectives="componentDirectives"
+      :componentMethods="componentMethods"
+      :componentFilters="componentFilters"
+      :componentComponents="componentComponents"
+      :layout="layout"
+    >
+    </template-compiler>
+  </v-defaults-provider>
+</template>
+
+<script lang="ts">
+import {
+  type JsonFormsSubStates,
+  type Layout,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import {
+  rendererProps,
+  useJsonFormsLayout,
+  type RendererProps,
+} from '@jsonforms/vue';
+import {
+  useJsonForms,
+  useTranslator,
+  useVuetifyLayout,
+  ValidationIcon,
+} from '@jsonforms/vue-vuetify';
+
+import { type ErrorObject } from 'ajv';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  inject,
+  ref,
+  unref,
+  type Component,
+  type ComponentPublicInstance,
+  type ComputedOptions,
+  type Directive,
+  type MethodOptions,
+} from 'vue';
+import TemplateCompiler from '../components/TemplateCompiler.vue';
+import {
+  TemplateComponentsKey,
+  TemplateComputedKey,
+  TemplateDirectivesKey,
+  TemplateFiltersKey,
+  TemplateMethodsKey,
+  type NamedUISchemaElement,
+} from '../core/types';
+import { useFormContext, type TemplateLayout } from '../util';
+
+import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider';
+import * as defaultDirectives from 'vuetify/directives';
+import SlotElement from '../components/SlotElement.vue';
+import VPane from '../components/VPane.vue';
+import VSplitpanes from '../components/VSplitpanes.vue';
+
+const VMonacoEditor = defineAsyncComponent(() =>
+  import('../components/VMonacoEditor').then((m) => m.VMonacoEditor),
+);
+
+const controlRenderer = defineComponent({
+  name: 'vue-template-layout-renderer',
+  inheritAttrs: false,
+  components: {
+    TemplateCompiler,
+    VDefaultsProvider: VDefaultsProvider,
+  },
+  props: {
+    ...rendererProps<TemplateLayout>(),
+  },
+  async setup(props: RendererProps<TemplateLayout>) {
+    const t = useTranslator();
+    const layout = useVuetifyLayout(useJsonFormsLayout(props));
+
+    const jsonforms = useJsonForms();
+    const context = useFormContext();
+    const templateError = ref<string | null>(null);
+
+    const defaultComponents = await import('vuetify/components');
+
+    return {
+      ...layout,
+      t,
+      jsonforms,
+      parentComponent: this,
+      templateError,
+      context,
+      defaultComponents,
+      defaultDirectives,
+    };
+  },
+  errorCaptured: function (
+    err: unknown,
+    _instance: ComponentPublicInstance | null,
+    info: string,
+  ) {
+    if (info == 'render') {
+      this.templateError = err instanceof Error ? err.message : String(err);
+    }
+  },
+  computed: {
+    data(): any {
+      const jsonforms: JsonFormsSubStates = this.jsonforms;
+      return jsonforms.core?.data;
+    },
+    errors(): ErrorObject[] | undefined {
+      const jsonforms: JsonFormsSubStates = this.jsonforms;
+      return jsonforms.core?.errors;
+    },
+    template(): string | undefined {
+      return (this.layout.uischema as TemplateLayout).template;
+    },
+    namedElements(): NamedUISchemaElement[] {
+      return (this.layout.uischema as TemplateLayout).elements?.map(
+        (element, index) => {
+          if ((element as any).name === undefined) {
+            (element as any).name = `${index}`;
+          }
+          return element as UISchemaElement & { name: string };
+        },
+      );
+    },
+    componentDirectives(): Record<string, Directive> {
+      const override = unref(
+        inject<Record<string, Directive> | undefined>(
+          TemplateDirectivesKey,
+          undefined,
+        ),
+      );
+
+      return override
+        ? {
+            ...(this.defaultDirectives as Record<string, Directive>),
+            ...override,
+          }
+        : (this.defaultDirectives as Record<string, Directive>);
+    },
+    componentComputed(): ComputedOptions {
+      const defaultComputed = {} as ComputedOptions;
+
+      defaultComputed.data = () => this.data;
+      defaultComputed.errors = () => this.errors;
+      defaultComputed.elements = () => this.namedElements;
+      defaultComputed.context = () => this.context;
+
+      const override = unref(
+        inject<ComputedOptions | undefined>(TemplateComputedKey, undefined),
+      );
+      return override ? { ...defaultComputed, ...override } : defaultComputed;
+    },
+    componentMethods() {
+      const defaultMethods = {
+        translate: this.translate.bind(this.parentComponent),
+      } as MethodOptions;
+
+      const override = unref(
+        inject<MethodOptions | undefined>(TemplateMethodsKey, undefined),
+      );
+
+      return override ? { ...defaultMethods, ...override } : defaultMethods;
+    },
+    componentFilters() {
+      const defaultFilters = {
+        translate: this.translate.bind(this.parentComponent),
+      } as MethodOptions;
+
+      const override = unref(
+        inject<MethodOptions | undefined>(TemplateFiltersKey, undefined),
+      );
+      return override ? { ...defaultFilters, ...override } : defaultFilters;
+    },
+    componentComponents(): Record<string, Component> {
+      // by default we use only Vuetify components that are already used by other renderers
+      const override = unref(
+        inject<Record<string, Component> | undefined>(
+          TemplateComponentsKey,
+          undefined,
+        ),
+      );
+
+      return {
+        ...this.defaultComponents,
+        VMonacoEditor,
+        ValidationIcon,
+        SlotElement,
+        VSplitpanes,
+        VPane,
+        ...(override ? override : {}),
+      };
+    },
+  },
+  methods: {
+    translate(
+      key: string,
+      defaultMessage: string | undefined,
+    ): string | undefined {
+      return this.t(key, defaultMessage ?? '');
+    },
+  },
+  filters: {
+    translate: function (value: any) {
+      if (!value) return '';
+      value = value.toString();
+      return this.t(value, '');
+    },
+  },
+});
+
+export default controlRenderer;
+</script>
diff --git a/packages/jsonforms-vuetify-renderers/src/renderers/index.ts b/packages/jsonforms-vuetify-renderers/src/renderers/index.ts
index bb0cca3..a58a360 100644
--- a/packages/jsonforms-vuetify-renderers/src/renderers/index.ts
+++ b/packages/jsonforms-vuetify-renderers/src/renderers/index.ts
@@ -7,6 +7,7 @@ import { default as MonacoRenderer } from './MonacoRenderer.vue';
 import { default as NullControlRenderer } from './NullControlRenderer.vue';
 import { default as SlotRenderer } from './SlotRenderer.vue';
 import { default as TemplateLabelRenderer } from './TemplateLabelRenderer.vue';
+import { default as VueTemplateLayoutRenderer } from './VueTemplateLayoutRenderer.vue';
 import { default as TemplateLayoutRenderer } from './TemplateLayoutRenderer.vue';
 import { default as TemplateRenderer } from './TemplateRenderer.vue';
 import { default as SplitLayoutRenderer } from './SplitLayoutRenderer.vue';
@@ -21,6 +22,7 @@ import { entry as monacoRendererEntry } from './MonacoRenderer.entry';
 import { entry as nullControlRendererEntry } from './NullControlRenderer.entry';
 import { entry as slotRendererEntry } from './SlotRenderer.entry';
 import { entry as templateLabelRendererEntry } from './TemplateLabelRenderer.entry';
+import { entry as vueTemplateLayoutRendererEntry } from './VueTemplateLayoutRenderer.entry';
 import { entry as templateLayoutRendererEntry } from './TemplateLayoutRenderer.entry';
 import { entry as templateRendererEntry } from './TemplateRenderer.entry';
 import { entry as splitLayoutRendererEntry } from './SplitLayoutRenderer.entry';
@@ -36,6 +38,7 @@ export const extraVuetifyRenderers = [
   nullControlRendererEntry,
   slotRendererEntry,
   templateLabelRendererEntry,
+  vueTemplateLayoutRendererEntry,
   templateLayoutRendererEntry,
   templateRendererEntry,
   splitLayoutRendererEntry,
@@ -52,6 +55,7 @@ export {
   NullControlRenderer,
   SlotRenderer,
   TemplateLabelRenderer,
+  VueTemplateLayoutRenderer,
   TemplateLayoutRenderer,
   TemplateRenderer,
   SplitLayoutRenderer,
diff --git a/packages/jsonforms-vuetify-renderers/src/util/ractive-template-controller.ts b/packages/jsonforms-vuetify-renderers/src/util/ractive-template-controller.ts
new file mode 100644
index 0000000..b5336f3
--- /dev/null
+++ b/packages/jsonforms-vuetify-renderers/src/util/ractive-template-controller.ts
@@ -0,0 +1,99 @@
+import Ractive, {
+  type Data,
+  type DataFn,
+  type ParsedTemplate,
+  type Partial,
+  type Registry,
+} from 'ractive';
+
+export interface SlotPlaceholder {
+  name: string;
+  el: HTMLElement;
+}
+
+export class RactiveTemplateController<T extends Ractive<T> = Ractive> {
+  private ractive: Ractive | null = null;
+  private onMountSlots: (slots: SlotPlaceholder[]) => void;
+  private container: HTMLElement | null = null;
+  private template: ParsedTemplate | null = null;
+  private data: any = null;
+
+  constructor(onMountSlots: (slots: SlotPlaceholder[]) => void) {
+    this.onMountSlots = onMountSlots;
+  }
+
+  async destroy() {
+    if (this.ractive) {
+      this.ractive.off();
+      await this.ractive.teardown().catch(() => {});
+      this.ractive = null;
+    }
+  }
+
+  updateData(keyPath: string, value: any) {
+    if (this.ractive) {
+      this.ractive.set(keyPath, value);
+    }
+  }
+
+  async setup(
+    container: HTMLElement,
+    template: string,
+    data: (Data | DataFn<T>) & { elements?: { name: string }[] },
+    visible: boolean,
+  ) {
+    this.container = container;
+    this.template = Ractive.parse(template);
+    this.data = data;
+
+    if (!visible) {
+      await this.destroy();
+      return;
+    }
+
+    await this.render();
+  }
+
+  async updateVisibility(visible: boolean) {
+    if (visible && !this.ractive) {
+      await this.render();
+    } else if (!visible && this.ractive) {
+      await this.destroy();
+    }
+  }
+
+  private async render() {
+    if (!this.container) return;
+
+    await this.destroy();
+    this.container.innerHTML = '';
+
+    const partials: Registry<Partial> = {};
+
+    this.data.elements?.forEach((el: any) => {
+      partials[el.name] = `<div data-slot="${el.name}"></div>`;
+    });
+
+    this.ractive = new Ractive({
+      el: this.container,
+      template: this.template!,
+      partials,
+      data: this.data,
+      twoway: true,
+      lazy: false,
+    });
+
+    const runMount = () => {
+      const els = this.container!.querySelectorAll('[data-slot]');
+      const slots = Array.from(els).map((el) => ({
+        name: el.getAttribute('data-slot')!,
+        el: el as HTMLElement,
+      }));
+      this.onMountSlots(slots);
+    };
+
+    this.ractive.on('render', runMount);
+    this.ractive.on('update', runMount);
+    runMount();
+  }
+}
diff --git a/packages/jsonforms-vuetify-renderers/src/util/util.ts b/packages/jsonforms-vuetify-renderers/src/util/util.ts
index f2110ea..05b9618 100644
--- a/packages/jsonforms-vuetify-renderers/src/util/util.ts
+++ b/packages/jsonforms-vuetify-renderers/src/util/util.ts
@@ -1,5 +1,6 @@
 import {
   type JsonFormsUISchemaRegistryEntry,
+  type Layout,
   type UISchemaElement,
   type UISchemaTester,
   type ValidateFunctionContext,
@@ -176,3 +177,16 @@ export const getLightDarkTheme = (
 
   return newTheme;
 };
+
+export interface TemplateLayout extends Layout {
+  type: 'TemplateLayout';
+  /**
+   * The template string.
+   */
+  template: string;
+
+  /**
+   * The template language.
+   */
+  lang: string;
+}
diff --git a/packages/jsonforms-vuetify-tooling/schemas/uischema.json b/packages/jsonforms-vuetify-tooling/schemas/uischema.json
index 533ff9e..777bf47 100644
--- a/packages/jsonforms-vuetify-tooling/schemas/uischema.json
+++ b/packages/jsonforms-vuetify-tooling/schemas/uischema.json
@@ -364,6 +364,9 @@
         "template": {
           "type": "string"
         },
+        "lang": {
+          "type": "string"
+        },
         "elements": {
           "$ref": "#/definitions/elements"
         },
diff --git a/packages/jsonforms-vuetify-webcomponent/package.json b/packages/jsonforms-vuetify-webcomponent/package.json
index ba374e1..0d5893e 100644
--- a/packages/jsonforms-vuetify-webcomponent/package.json
+++ b/packages/jsonforms-vuetify-webcomponent/package.json
@@ -62,6 +62,7 @@
     "json-refs": "^3.0.15",
     "lodash": "^4.17.15",
     "monaco-editor": "^0.49.0",
+    "ractive": "^1.4.4",
     "shady-css-parser": "^0.1.0",
     "vue": "^3.5.0",
     "vue-plugin-load-script": "^2.1.1",
diff --git a/packages/jsonforms-vuetify-webcomponent/src/examples/basic/uischema.json b/packages/jsonforms-vuetify-webcomponent/src/examples/basic/uischema.json
index 2c8c644..5ae279e 100644
--- a/packages/jsonforms-vuetify-webcomponent/src/examples/basic/uischema.json
+++ b/packages/jsonforms-vuetify-webcomponent/src/examples/basic/uischema.json
@@ -1,24 +1,29 @@
 {
   "type": "TemplateLayout",
   "template": "<v-app><v-app-bar app><v-toolbar-title>{{translate('Vuetify JSON Forms Demo', 'Vuetify JSON Forms Demo')}}</v-toolbar-title><v-spacer expand></v-spacer><slot name='0'></slot></v-app-bar><slot name='1'></slot></v-app>",
+  "lang": "vue",
   "elements": [
     {
       "type": "TemplateLayout",
       "template": "<v-toolbar-items class='d-flex align-center'><div v-for=\"element in elements\" :key=\"element.name\"><slot :name=\"element.name\"></slot></div></v-toolbar-items>",
+      "lang": "vue",
       "elements": [
         {
           "type": "TemplateLayout",
-          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": \"English\", \"value\": \"en\"}, {\"label\": \"Bulgarian\", \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>"
+          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": \"English\", \"value\": \"en\"}, {\"label\": \"Bulgarian\", \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>",
+          "lang": "vue"
         },
         {
           "type": "TemplateLayout",
-          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>"
+          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>",
+          "lang": "vue"
         }
       ]
     },
     {
       "type": "TemplateLayout",
       "template": "<v-card><v-card-title>Example</v-card-title><v-card-text v-for=\"element in elements\" :key=\"element.name\"><slot :name=\"element.name\"></slot></v-card-text></v-card>",
+      "lang": "vue",
       "elements": [
         {
           "type": "VerticalLayout",
@@ -139,7 +144,8 @@
           "elements": [
             {
               "type": "TemplateLayout",
-              "template": "<v-textarea readonly :value='JSON.stringify(data, null, 2)' id='data'></v-textarea>"
+              "template": "<v-textarea readonly :value='JSON.stringify(data, null, 2)' id='data'></v-textarea>",
+              "lang": "vue"
             }
           ]
         },
@@ -148,7 +154,8 @@
           "elements": [
             {
               "type": "TemplateLayout",
-              "template": "<v-dialog id='dialog' v-model='context.uidata.errorDialog.show' width='500'><v-card><v-card-title>{{ context.uidata.errorDialog.title }}</v-card-title><v-card-text>{{ context.uidata.errorDialog.text }}</v-card-text><v-divider></v-divider><v-card-actions><v-spacer></v-spacer><v-btn color='primary' text @click='context.uidata.errorDialog.show = false'> OK </v-btn></v-card-actions></v-card></v-dialog>"
+              "template": "<v-dialog id='dialog' v-model='context.uidata.errorDialog.show' width='500'><v-card><v-card-title>{{ context.uidata.errorDialog.title }}</v-card-title><v-card-text>{{ context.uidata.errorDialog.text }}</v-card-text><v-divider></v-divider><v-card-actions><v-spacer></v-spacer><v-btn color='primary' text @click='context.uidata.errorDialog.show = false'> OK </v-btn></v-card-actions></v-card></v-dialog>",
+              "lang": "vue"
             }
           ]
         }
diff --git a/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischema.json b/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischema.json
index 01cb231..903547d 100644
--- a/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischema.json
+++ b/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischema.json
@@ -1,19 +1,23 @@
 {
   "type": "TemplateLayout",
   "template": "<v-card class=\"main-form\" part=\"main-form\" flat><slot name=\"toolbar\"></slot><v-container style=\"pa-0\" fluid><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot v-if=\"element.name != 'toolbar'\" :name=\"element.name\"></slot></v-col></v-row></v-container></v-card>",
+  "lang": "vue",
   "elements": [
     {
       "type": "TemplateLayout",
       "template": "<v-toolbar><v-toolbar-title>{{translate('Job Application', 'Job Application')}}</v-toolbar-title><v-toolbar-items class='d-flex align-center'><div v-for=\"element in elements\" :key=\"element.name\"><slot :name=\"element.name\"></slot></div></v-toolbar-items></v-toolbar>",
+      "lang": "vue",
       "name": "toolbar",
       "elements": [
         {
           "type": "TemplateLayout",
-          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": context.translate(\"static-text.English\", \"English\"), \"value\": \"en\"}, {\"label\": context.translate(\"static-text.Bulgarian\", \"Bulgarian\"), \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>"
+          "template": "<v-select variant='plain' density='compact' hide-details='true' :model-value='context.locale' @update:modelValue='(value) => context.fireActionEvent(\"changeLang\", {\"lang\": value})' :items='[{\"label\": context.translate(\"static-text.English\", \"English\"), \"value\": \"en\"}, {\"label\": context.translate(\"static-text.Bulgarian\", \"Bulgarian\"), \"value\": \"bg\"}]' item-title='label' item-value='value'></v-select>",
+          "lang": "vue"
         },
         {
           "type": "TemplateLayout",
-          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>"
+          "template": "<v-btn icon @click='() => context.fireActionEvent(\"toggleDarkMode\")'><v-icon>{{ context.vuetify.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon></v-btn>",
+          "lang": "vue"
         }
       ]
     },
@@ -27,6 +31,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Template",
@@ -43,6 +48,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Template",
@@ -59,6 +65,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Control",
@@ -75,6 +82,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "ListWithDetail",
diff --git a/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischemas.json b/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischemas.json
index 5365ec2..1962b6a 100644
--- a/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischemas.json
+++ b/packages/jsonforms-vuetify-webcomponent/src/examples/job/uischemas.json
@@ -5,6 +5,7 @@
       "type": "TemplateLayout",
       "name": "applicant",
       "template": "<v-container style=\"pa-0\"><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+      "lang": "vue",
       "elements": [
         {
           "type": "HorizontalLayout",
@@ -12,6 +13,7 @@
             {
               "type": "TemplateLayout",
               "template": "<v-container class='align-stretch'><v-row><v-col><v-img :src='data.applicant.profilePicture' v-if='data.applicant && data.applicant.profilePicture'></v-img></v-col></v-row><v-row class='mt-auto'><v-col><slot name='upload'></slot></v-col></v-row></v-container>",
+              "lang": "vue",
               "elements": [
                 {
                   "type": "Control",
@@ -155,6 +157,7 @@
       "type": "TemplateLayout",
       "name": "jobDetails",
       "template": "<v-container><v-row v-for=\"element in elements\" :key=\"element.name\"><v-col><slot :name=\"element.name\"></slot></v-col></v-row></v-container>",
+      "lang": "vue",
       "elements": [
         {
           "type": "Control",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a523f65..f5fb287 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,6 +176,9 @@ importers:
       monaco-editor:
         specifier: ^0.49.0
         version: 0.49.0
+      ractive:
+        specifier: ^1.4.4
+        version: 1.4.4
       splitpanes:
         specifier: ^3.1.5
         version: 3.2.0(vue@3.5.13(typescript@5.4.5))
@@ -271,6 +274,9 @@ importers:
       monaco-editor:
         specifier: ^0.49.0
         version: 0.49.0
+      ractive:
+        specifier: ^1.4.4
+        version: 1.4.4
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
@@ -392,6 +398,9 @@ importers:
       monaco-editor:
         specifier: ^0.49.0
         version: 0.49.0
+      ractive:
+        specifier: ^1.4.4
+        version: 1.4.4
       shady-css-parser:
         specifier: ^0.1.0
         version: 0.1.0
@@ -4452,6 +4461,11 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  ractive@1.4.4:
+    resolution: {integrity: sha512-FFKmPox5nJQeBNPWLl2dsVC47z44O0NNx2vtGwjWYTtICIyVDyoKex8AAV99Cv07j6njFm3O70Pi96QxVu5rzA==}
+    engines: {node: '>=4.0.0', npm: '>=2.14.2'}
+    hasBin: true
+
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
@@ -10160,6 +10174,8 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  ractive@1.4.4: {}
+
   randombytes@2.1.0:
     dependencies:
       safe-buffer: 5.2.1