diff --git a/packages/examples/src/examples/1884.ts b/packages/examples/src/examples/1884.ts
new file mode 100644
index 000000000..e95cd4ec3
--- /dev/null
+++ b/packages/examples/src/examples/1884.ts
@@ -0,0 +1,187 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'object',
+  required: ['age'],
+  properties: {
+    firstName: {
+      type: 'string',
+      minLength: 2,
+      maxLength: 20
+    },
+    lastName: {
+      type: 'string',
+      minLength: 5,
+      maxLength: 15
+    },
+    age: {
+      type: 'integer',
+      minimum: 18,
+      maximum: 100
+    },
+    gender: {
+      type: 'string',
+      enum: ['Male', 'Female', 'Undisclosed']
+    },
+    height: {
+      type: 'number'
+    },
+    dateOfBirth: {
+      type: 'string',
+      format: 'date'
+    },
+    rating: {
+      type: 'integer'
+    },
+    committer: {
+      type: 'boolean'
+    },
+    address: {
+      type: 'object',
+      properties: {
+        street: {
+          type: 'string'
+        },
+        streetnumber: {
+          type: 'string'
+        },
+        postalCode: {
+          type: 'string'
+        },
+        city: {
+          type: 'string'
+        }
+      }
+    }
+  }
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/firstName'
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/lastName'
+        }
+      ]
+    },
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/age'
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/dateOfBirth'
+        }
+      ]
+    },
+    {
+      type: 'HorizontalLayout',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/height'
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/gender'
+        },
+        {
+          type: 'Control',
+          scope: '#/properties/committer'
+        }
+      ]
+    },
+    {
+      type: 'Group',
+      label: 'Address for Shipping T-Shirt',
+      elements: [
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/address/properties/street'
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/address/properties/streetnumber'
+            }
+          ]
+        },
+        {
+          type: 'HorizontalLayout',
+          elements: [
+            {
+              type: 'Control',
+              scope: '#/properties/address/properties/postalCode'
+            },
+            {
+              type: 'Control',
+              scope: '#/properties/address/properties/city'
+            }
+          ]
+        }
+      ],
+      rule: {
+        effect: 'ENABLE',
+        condition: {
+          scope: '#/properties/committer',
+          schema: {
+            const: true
+          }
+        }
+      }
+    }
+  ]
+};
+
+export const data = {
+  firstName: 'Max',
+  lastName: 'Power',
+  committer: false
+};
+
+registerExamples([
+  {
+    name: '1884',
+    label: 'Issue 1884 - Committer enable/disable Address',
+    data,
+    schema,
+    uischema
+  }
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 73fd1cf15..484243eb7 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -49,6 +49,7 @@ import * as generateSchema from './examples/generate';
 import * as generateUISchema from './examples/generateUI';
 import * as layout from './examples/layout';
 import * as person from './examples/person';
+import * as issue_1884 from './examples/1884';
 import * as rule from './examples/rule';
 import * as ruleInheritance from './examples/ruleInheritance';
 import * as config from './examples/config';
@@ -140,5 +141,6 @@ export {
   bug_1779,
   bug_1645,
   conditionalSchemaComposition,
-  additionalErrors
+  additionalErrors,
+  issue_1884,
 };
diff --git a/packages/vue/vue-vanilla/dev/components/App.vue b/packages/vue/vue-vanilla/dev/components/App.vue
index fcd1711bd..8937df7de 100644
--- a/packages/vue/vue-vanilla/dev/components/App.vue
+++ b/packages/vue/vue-vanilla/dev/components/App.vue
@@ -3,241 +3,53 @@ import { defineComponent } from '../../config/vue';
 import { JsonForms, JsonFormsChangeEvent } from '../../config/jsonforms';
 import { vanillaRenderers, mergeStyles, defaultStyles } from '../../src';
 import '../../vanilla.css';
-import { get } from 'lodash';
 import { JsonFormsI18nState } from '@jsonforms/core';
 import { ErrorObject } from 'ajv';
 
-const schema = {
-  properties: {
-    string: {
-      type: 'string',
-      description: 'a string',
-      pattern: '[a-z]+'
-    },
-    multiString: {
-      type: 'string',
-      description: 'a string',
-    },
-    boolean: {
-      type: 'boolean',
-      description: 'enable / disable number',
-    },
-    boolean2: {
-      type: 'boolean',
-      description: 'show / hide integer',
-    },
-    number: {
-      type: 'number',
-      description: 'a number',
-    },
-    integer: {
-      type: 'integer',
-      description: 'an integer',
-    },
-    enum: {
-      type: 'string',
-      enum: ['a', 'b', 'c'],
-      description: 'an enum',
-    },
-    oneOfEnum: {
-      oneOf: [
-        { const: '1', title: 'Number 1' },
-        { const: 'B', title: 'Foo' },
-      ],
-      description: 'one of enum',
-    },
-    date: {
-      type: 'string',
-      format: 'date',
-      description: 'a date',
-    },
-    dateTime: {
-      type: 'string',
-      format: 'date-time',
-      description: 'a date time',
-    },
-    time: {
-      type: 'string',
-      format: 'time',
-      description: 'a time',
-    },
-    array: {
-      type: 'array',
-      items: {
-        type: 'object',
-        properties: {
-          name: { type: 'string' },
-          age: { type: 'integer' },
-        },
-      },
-    },
-  },
-  required: ['string', 'number'],
-} as any;
-
-const uischema = {
-  type: 'VerticalLayout',
-  elements: [
-    {
-      type: 'HorizontalLayout',
-      elements: [
-        {
-          type: 'VerticalLayout',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/string',
-              options: {
-                placeholder: 'this is a placeholder',
-              },
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/multiString',
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/boolean',
-              options: {
-                placeholder: 'boolean placeholder',
-              },
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/boolean2',
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/number',
-              rule: {
-                effect: 'DISABLE',
-                condition: {
-                  scope: '#/properties/boolean',
-                  schema: {
-                    const: true,
-                  },
-                },
-              },
-            },
-          ],
-        },
-        {
-          type: 'Group',
-          label: 'My group',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/integer',
-              rule: {
-                effect: 'HIDE',
-                condition: {
-                  scope: '#/properties/boolean2',
-                  schema: {
-                    const: true,
-                  },
-                },
-              },
-            },
-            {
-              type: 'HorizontalLayout',
-              elements: [
-                {
-                  type: 'Control',
-                  scope: '#/properties/enum',
-                },
-                {
-                  type: 'Control',
-                  scope: '#/properties/oneOfEnum',
-                },
-                {
-                  type: 'Control',
-                  scope: '#/properties/date',
-                  options: {
-                    placeholder: 'date placeholder',
-                  },
-                },
-              ],
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/dateTime',
-              options: {
-                placeholder: 'date-time placeholder',
-              },
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/time',
-              options: {
-                placeholder: 'time placeholder',
-                styles: {
-                  control: {
-                    root: 'control my-time',
-                  },
-                },
-              },
-            },
-          ],
-        },
-      ],
-    },
-    {
-      type: 'Label',
-      text: 'This is my label',
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/array',
-      options: {
-        childLabelProp: 'age',
-      },
-    },
-  ],
-} as any;
+import { getExamples } from '../../../../examples';
+import get from 'lodash/get';
 
 // mergeStyles combines all classes from both styles definitions into one
 const myStyles = mergeStyles(defaultStyles, {
-  control: { root: 'my-control' },
+  control: { root: 'my-control' }
 });
 
+const examples = getExamples();
+
 export default defineComponent({
   name: 'app',
   components: {
-    JsonForms,
+    JsonForms
   },
-  data: function () {
+  data: function() {
     const i18n: Partial<JsonFormsI18nState> = { locale: 'en' };
     const additionalErrors: ErrorObject[] = [];
     return {
+      data: {},
       renderers: Object.freeze(vanillaRenderers),
-      data: {
-        number: 5,
-      },
-      schema,
-      uischema,
+      currentExampleName: examples[0].name,
+      examples,
       config: {
-        hideRequiredAsterisk: true,
+        hideRequiredAsterisk: true
       },
       i18n,
-      additionalErrors,
+      additionalErrors
     };
   },
+  computed: {
+    example() {
+      const name = (this as any).currentExampleName;
+      return examples.find(ex => ex.name === name)!;
+    }
+  },
   methods: {
-    setSchema() {
-      this.schema = {
-        properties: {
-          name: {
-            type: 'string',
-            title: 'NAME',
-            description: 'The name',
-          },
-        },
-      };
-    },
     onChange(event: JsonFormsChangeEvent) {
       console.log(event);
       this.data = event.data;
     },
+    onExampleChange(event: any) {
+      this.currentExampleName = event.target.value;
+    },
     translationChange(event: any) {
       try {
         const input = JSON.parse(event.target.value);
@@ -249,151 +61,12 @@ export default defineComponent({
         console.log('invalid translation input');
       }
     },
-    switchAsterisk() {
-      this.config.hideRequiredAsterisk = !this.config.hideRequiredAsterisk;
-    },
-    addAdditionalError() {
-      this.additionalErrors = [
-        ...this.additionalErrors,
-        {
-          instancePath: '/dateTime',
-          message: `New error #${this.additionalErrors.length + 1}`,
-          schemaPath: '',
-          keyword: '',
-          params: {},
-        },
-      ];
-    },
-    adaptData() {
-      this.data.number = 10;
-    },
-    adaptUiSchema() {
-      this.uischema = {
-        type: 'VerticalLayout',
-        elements: [
-          {
-            type: 'HorizontalLayout',
-            elements: [
-              {
-                type: 'VerticalLayout',
-                elements: [
-                  {
-                    type: 'Control',
-                    scope: '#/properties/string',
-                    options: {
-                      placeholder: 'this is a placeholder',
-                    },
-                  },
-                  {
-                    type: 'Control',
-                    scope: '#/properties/multiString',
-                  },
-                  {
-                    type: 'Control',
-                    scope: '#/properties/boolean',
-                    options: {
-                      placeholder: 'boolean placeholder',
-                    },
-                  },
-                  {
-                    type: 'Control',
-                    scope: '#/properties/boolean2',
-                  },
-                  {
-                    type: 'Control',
-                    scope: '#/properties/number',
-                    rule: {
-                      effect: 'DISABLE',
-                      condition: {
-                        scope: '#/properties/boolean',
-                        schema: {
-                          const: true,
-                        },
-                      },
-                    },
-                  },
-                ],
-              },
-              {
-                type: 'Group',
-                label: 'My group',
-                elements: [
-                  {
-                    type: 'Control',
-                    scope: '#/properties/integer',
-                    rule: {
-                      effect: 'HIDE',
-                      condition: {
-                        scope: '#/properties/boolean2',
-                        schema: {
-                          const: true,
-                        },
-                      },
-                    },
-                  },
-                  {
-                    type: 'HorizontalLayout',
-                    elements: [
-                      {
-                        type: 'Control',
-                        scope: '#/properties/enum',
-                      },
-                      {
-                        type: 'Control',
-                        scope: '#/properties/oneOfEnum',
-                      },
-                      {
-                        type: 'Control',
-                        scope: '#/properties/date',
-                        options: {
-                          placeholder: 'date placeholder',
-                        },
-                      },
-                    ],
-                  },
-                  {
-                    type: 'Control',
-                    scope: '#/properties/dateTime',
-                    options: {
-                      placeholder: 'date-time placeholder',
-                    },
-                  },
-                  {
-                    type: 'Control',
-                    scope: '#/properties/time',
-                    options: {
-                      placeholder: 'time placeholder',
-                      styles: {
-                        control: {
-                          root: 'control my-time',
-                        },
-                      },
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            type: 'Label',
-            text: 'This is my label',
-          },
-          {
-            type: 'Control',
-            scope: '#/properties/array',
-            options: {
-              childLabelProp: 'age',
-            },
-          },
-        ],
-      };
-    },
   },
   provide() {
     return {
-      styles: myStyles,
+      styles: myStyles
     };
-  },
+  }
 });
 </script>
 
@@ -412,33 +85,37 @@ export default defineComponent({
 
 <template>
   <div class="container">
+    <div className="example-selector">
+      <h4>Select Example:</h4>
+      <select @change="onExampleChange($event)" v-model="currentExampleName">
+        <option
+          v-for="option in examples"
+          :key="option.name"
+          :value="option.name"
+          :label="option.label"
+          >{{ option.label }}</option
+        >
+      </select>
+      <div class="data">
+        <h5>data</h5>
+        <pre>{{ JSON.stringify(data, null, 2) }}
+        </pre>
+        <h5>i18n translator</h5>
+        <textarea @change="translationChange"></textarea>
+      </div>
+    </div>
+
     <div class="form">
       <json-forms
-        :data="data"
-        :schema="schema"
-        :uischema="uischema"
+        :data="example.data"
+        :schema="example.schema"
+        :uischema="example.uischema"
         :renderers="renderers"
         :config="config"
         :i18n="i18n"
         :additional-errors="additionalErrors"
-        @change="onChange"
-      />
-      <button @click="setSchema">Set Schema</button>
-      <button @click="switchAsterisk">Switch Asterisk</button>
-      <button @click="adaptData">Adapt data</button>
-      <button @click="adaptUiSchema">Adapt uischema</button>
-      <button @click="addAdditionalError">Add additional error</button>
-    </div>
-    <div class="data">
-      <pre
-        >{{ JSON.stringify(data, null, 2) }}
-    </pre
-      >
-      <pre
-        >{{ JSON.stringify(config, null, 2) }}
-    </pre
-      >
-      <textarea @change="translationChange" />
+        @change="onChange">
+      </json-forms>
     </div>
   </div>
 </template>