diff --git a/zero.Web.UI/App/components/tabs/tabs.vue b/zero.Web.UI/App/components/tabs/tabs.vue
index 0c08b508..0ac20a4c 100644
--- a/zero.Web.UI/App/components/tabs/tabs.vue
+++ b/zero.Web.UI/App/components/tabs/tabs.vue
@@ -34,14 +34,11 @@
       tabs: []
     }),
 
-    created()
+    mounted()
     {
       this.cacheKey = this.cache ? `zero.ui-tabs.cache.${this.cache}` : null;
       this.tabs = this.$children;
-    },
 
-    mounted()
-    {
       if (this.cache)
       {
         const cachedActiveTab = localStorage.getItem(this.cacheKey);
diff --git a/zero.Web.UI/App/core/editor-field.js b/zero.Web.UI/App/core/editor-field.js
index c9dd0bb7..51b3ad4d 100644
--- a/zero.Web.UI/App/core/editor-field.js
+++ b/zero.Web.UI/App/core/editor-field.js
@@ -6,21 +6,21 @@ import Rte from '../editor/fields/rte.vue';
 import Select from '../editor/fields/select.vue';
 import Textarea from '../editor/fields/textarea.vue';
 import Toggle from '../editor/fields/toggle.vue';
-import Alias from '../editor/fields/toggle.vue';
-import Output from '../editor/fields/toggle.vue';
-import Checklist from '../editor/fields/toggle.vue';
-import ColorPicker from '../editor/fields/toggle.vue';
-import CountryPicker from '../editor/fields/toggle.vue';
-import CulturePicker from '../editor/fields/toggle.vue';
-import DateRangePicker from '../editor/fields/toggle.vue';
-import IconPicker from '../editor/fields/toggle.vue';
-import LanguagePicker from '../editor/fields/toggle.vue';
-import InputList from '../editor/fields/toggle.vue';
-import Media from '../editor/fields/toggle.vue';
-import Modules from '../editor/fields/toggle.vue';
-import Nested from '../editor/fields/toggle.vue';
-import State from '../editor/fields/toggle.vue';
-import Tags from '../editor/fields/toggle.vue';
+import Alias from '../editor/fields/alias.vue';
+import Output from '../editor/fields/output.vue';
+import Checklist from '../editor/fields/checklist.vue';
+import ColorPicker from '../editor/fields/colorpicker.vue';
+import CountryPicker from '../editor/fields/countrypicker.vue';
+import CulturePicker from '../editor/fields/culturepicker.vue';
+import DateRangePicker from '../editor/fields/daterangepicker.vue';
+import IconPicker from '../editor/fields/iconPicker.vue';
+import LanguagePicker from '../editor/fields/language.vue';
+import InputList from '../editor/fields/inputlist.vue';
+import Media from '../editor/fields/media.vue';
+import Modules from '../editor/fields/modules.vue';
+import Nested from '../editor/fields/nested.vue';
+import State from '../editor/fields/state.vue';
+import Tags from '../editor/fields/tags.vue';
 
 
 class EditorField
@@ -28,6 +28,7 @@ class EditorField
   path = null;
   options = {
     label: null,
+    hideLabel: false,
     description: null,
     helpText: null,
     condition: null,
@@ -48,6 +49,22 @@ class EditorField
   }
 
 
+  get component()
+  {
+    return this.#component;
+  }
+
+  get componentOptions()
+  {
+    return this.#componentOptions;
+  }
+
+  get isRequired()
+  {
+    return this.#required;
+  }
+
+
   /**
    * 
    */
@@ -87,7 +104,7 @@ class EditorField
    * @param {object} [options] - Custom options
    * @returns {EditorField}
    */
-  component(component, options)
+  custom(component, options)
   {
     return this._setComponent(component, { ...options });
   }
@@ -281,7 +298,7 @@ class EditorField
    * @param {string} [addLabel] - Label for the add button
    * @returns {EditorField}
    */
-  inputList(limit, maxItemLength)
+  inputList(limit, maxItemLength, addLabel)
   {
     return this._setComponent(InputList, { limit, maxItemLength, addLabel });
   }
diff --git a/zero.Web.UI/App/core/editor.js b/zero.Web.UI/App/core/editor.js
index 5ee126a2..d82761da 100644
--- a/zero.Web.UI/App/core/editor.js
+++ b/zero.Web.UI/App/core/editor.js
@@ -4,8 +4,15 @@ import EditorField from './editor-field.js';
 class Editor
 {
   #alias;
-  #templateLabel = field => field;
-  #templateDescription = field => field;
+
+  /**
+   * Overrides the string generation for the label
+   */
+  templateLabel = field => field;
+  /**
+   * Overrides the string generation for the description
+   */
+  templateDescription = field => field;
 
   tabs = [];
   fields = [];
@@ -22,34 +29,6 @@ class Editor
     return this.#alias;
   }
 
-  /**
-   * Overrides the string generation for the label
-   * @param {function} callback - Called when a label is constructed
-   */
-  set onLabelCreate(callback)
-  {
-    if (typeof callback !== 'function')
-    {
-      console.warn(`[zero] onLabelCreate excepts a function as the first parameter`);
-      return;
-    }
-    this.#templateLabel = callback;
-  }
-
-  /**
-   * Overrides the string generation for the label description
-   * @param {function} callback - Called when a description is constructed
-   */
-  set onDescriptionCreate(callback)
-  {
-    if (typeof callback !== 'function')
-    {
-      console.warn(`[zero] onDescriptionCreate excepts a function as the first parameter`);
-      return;
-    }
-    this.#templateDescription = callback;
-  }
-
 
   /**
    * A tab within an editor
@@ -100,6 +79,7 @@ class Editor
    * @param {string} path - Model path
    * @param {object} [options] - Custom options
    * @param {string} [options.label] - A custom label for this field (otherwise it's generated via `onLabelCreate`)
+   * @param {string} [options.hideLabel] - Hide the field label and make the content full-width
    * @param {string} [options.description] - A custom description for this field (otherwise it's generated via `onDescriptionCreate`)
    * @param {string} [options.helpText] - Display a help text below the field
    * @param {boolean|function} [options.condition] - Conditionally hide the field
@@ -111,10 +91,23 @@ class Editor
   field(path, options)
   {
     const field = new EditorField(path, options);
+    this.fields.push(field);
     return field;
   }
 
 
+  /**
+   * Get fields for the specified tab
+   * @param {string|EditorTab} [tab] - Pass the tab or its alias
+   * @returns {EditorField[]}
+   */
+  getFields(tab)
+  {
+    const alias = typeof tab === 'undefined' ? null : (typeof tab === 'string' ? tab : tab.alias);
+    return this.fields.filter(x => !alias ? true : x.options.tab === alias);
+  }
+
+
   /**
    * Create a new tab instance
    * @returns {EditorTab}
diff --git a/zero.Web.UI/App/core/plugin.js b/zero.Web.UI/App/core/plugin.js
index 82a4c168..cecca522 100644
--- a/zero.Web.UI/App/core/plugin.js
+++ b/zero.Web.UI/App/core/plugin.js
@@ -5,7 +5,7 @@ class Plugin
   #onInstall;
 
   routes = [];
-  renderers = [];
+  editors = [];
 
 
   constructor(name)
@@ -33,20 +33,19 @@ class Plugin
   /*
    * Add a new vue form renderer to the global configuration 
    */
-  addRenderer(alias, config)
+  addEditor(config)
   {
-    config.alias = alias;
-    this.renderers.push(config);
+    this.editors.push(config);
   }
 
   /*
    * Adds new form renderers to the global configuration 
    * Can either by an array (where a key of the child object is `alias`) or an object where the key is the renderer alias
    */
-  addRenderers(renderers)
+  addEditors(editors)
   {
-    let items = !Array.isArray(renderers) ? Object.values(renderers) : renderers;
-    items.forEach(item => this.addRenderer(item.alias, item));
+    let items = !Array.isArray(editors) ? Object.values(editors) : editors;
+    items.forEach(item => this.addEditor(item));
   }
 
   /*
diff --git a/zero.Web.UI/App/core/plugin.zero.js b/zero.Web.UI/App/core/plugin.zero.js
index 04793aab..561fcc60 100644
--- a/zero.Web.UI/App/core/plugin.zero.js
+++ b/zero.Web.UI/App/core/plugin.zero.js
@@ -1,12 +1,12 @@
 
 import Plugin from './plugin.js';
-import renderers from '../renderers/all.js';
+import editors from '../editors/all.js';
 import routes from './routes.js';
 
 const plugin = new Plugin('zero');
 
 // add renderers
-plugin.addRenderers(renderers);
+plugin.addEditors(editors);
 
 // add routes
 plugin.addRoutes(routes);
diff --git a/zero.Web.UI/App/core/zero.js b/zero.Web.UI/App/core/zero.js
index 222b614e..73ff3f26 100644
--- a/zero.Web.UI/App/core/zero.js
+++ b/zero.Web.UI/App/core/zero.js
@@ -19,7 +19,7 @@ class Zero
 
   #vue = null;
   #plugins = [];
-  #renderers = [];
+  #editors = [];
   #routes = [];
   #router = null;
 
@@ -95,8 +95,8 @@ class Zero
     // append routes
     plugin.routes.forEach(x => this.#routes.push(x));
 
-    // append renderers
-    plugin.renderers.forEach(x => this.#renderers.push(x));
+    // append editors
+    plugin.editors.forEach(x => this.#editors.push(x));
 
     console.log(`[zero] Installed %c${plugin.name}%cplugin`, 'font-style:italic;');
   }
@@ -105,9 +105,9 @@ class Zero
   /*
    * Returns a renderer
    */
-  getRenderer(alias)
+  getEditor(alias)
   {
-    const renderer = this.#renderers.find(x => x.alias === alias);
+    const renderer = this.#editors.find(x => x.alias === alias);
 
     if (!renderer)
     {
diff --git a/zero.Web.UI/App/directives/localize.js b/zero.Web.UI/App/directives/localize.js
index d1c85c36..cd1fa6c5 100644
--- a/zero.Web.UI/App/directives/localize.js
+++ b/zero.Web.UI/App/directives/localize.js
@@ -8,11 +8,12 @@ Vue.directive('localize', (el, binding) =>
 {
   if (binding.value !== binding.oldValue || !el.innerText)
   {
+    const hasValue = !!binding.value;
     const isObject = typeof binding.value === 'object';
-    let key = isObject ? binding.value.key : binding.value;
-    let options = isObject ? binding.value : null;
+    let key = hasValue ? (isObject ? binding.value.key : binding.value) : null;
+    let options = hasValue && isObject ? binding.value : null;
 
-    const result = Localization.localize(key, options);
+    const result = hasValue ? Localization.localize(key, options) : '';
 
     // set content as html
     if (binding.arg === 'html')
diff --git a/zero.Web.UI/App/editor/editor-component-old.vue b/zero.Web.UI/App/editor/editor-component-old.vue
new file mode 100644
index 00000000..9e3c94e7
--- /dev/null
+++ b/zero.Web.UI/App/editor/editor-component-old.vue
@@ -0,0 +1,251 @@
+<template>
+  <ui-property v-if="!isHidden" :field="config.field" :label="label" :hide-label="config.hideLabel || isStatic" :description="description" :required="config.required" :class="classList" :is-text="view === 'output'">
+    <component v-if="fieldComponent" :is="fieldComponent" :config="config" :value="model" :entity="value" @input="onChange" :meta="meta" :disabled="isDisabled" :depth="depth" />
+    <p v-if="config.helpText" class="ui-property-help" v-localize="config.helpText"></p>
+  </ui-property>
+</template>
+
+
+<script>
+  import Strings from 'zero/services/strings';
+  import Objects from 'zero/services/objects';
+  import Localization from 'zero/services/localization';
+
+  const staticViews = ['line'];
+
+  export default {
+    name: 'uiEditorComponent',
+
+    props: {
+      value: {
+        type: [ Object, Array ]
+      },
+      config: {
+        type: Object,
+        required: true,
+        default: () =>
+        {
+          hidden: false
+        }
+      },
+      renderer: {
+        type: Object,
+        default: () =>
+        {
+          return {};
+        }
+      },
+      meta: {
+        type: Object,
+        default: () =>
+        {
+          return {};
+        }
+      },
+      depth: {
+        type: Number,
+        default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    watch: {
+      value: {
+        deep: true,
+        handler: function ()
+        {
+          this.rebuildModel();
+        }
+      },
+      config: {
+        deep: true,
+        handler: function ()
+        {
+          this.rebuildConfig();
+        }
+      },
+      renderer: {
+        deep: true,
+        handler: function ()
+        {
+          this.rebuildConfig();
+        }
+      }
+    },
+
+    data: () => ({
+      fieldComponent: null,
+      model: null,
+      selector: [],
+      classList: [],
+      label: null,
+      description: null
+    }),
+
+    mounted()
+    {
+      this.rebuildModel();
+    },
+
+    computed: {
+      view()
+      {
+        return this.config.display;
+      },
+      isHidden()
+      {
+        return this.config.hidden || (typeof this.config.condition === 'function' && !this.config.condition(this.value));
+      },
+      isDisabled()
+      {
+        return this.disabled || (typeof this.config.disabled === 'boolean' && this.config.disabled) || (typeof this.config.disabled === 'function' && this.config.disabled(this.value));
+      },
+      isStatic()
+      {
+        return staticViews.indexOf(this.config.display) > -1;
+      }
+    },
+
+    created()
+    {
+      this.fieldComponent = () =>
+      {
+        if (this.view === 'custom')
+        {
+          if (this.config.path.indexOf('@zero') === 0)
+          {
+            return import(`zero/` + this.config.path.substring(6));
+          }
+          else if (this.config.path.indexOf('@shop') === 0) // TODO common system for plugins
+          {
+            return import(`shop/` + this.config.path.substring(6));
+          }
+          else
+          {
+            // TODO external imports
+          }
+        }
+        else if (this.view === 'renderer')
+        {
+          return import(`zero/editor/editor`);
+        }
+        else if (this.isStatic)
+        {
+          return import(`zero/editor/fields/static/${this.view.toLowerCase()}`);
+        }
+        else
+        {
+          return import(`zero/editor/fields/${this.view.toLowerCase()}`);
+        }
+      }
+
+      this.rebuildModel();
+      this.rebuildConfig();
+    },
+
+    methods: {
+
+      rebuildModel()
+      {
+        this.selector = Strings.selectorToArray(this.config.field);
+        var currentValue = this.value;
+
+        if (!this.selector || !this.selector.length || !currentValue)
+        {
+          this.model = null;
+        }
+        else
+        {
+          for (var key of this.selector)
+          {
+            if (key in currentValue)
+            {
+              currentValue = currentValue[key];
+            }
+            else
+            {
+              break;
+            }
+          }
+
+          this.model = currentValue;
+        }
+      },
+
+
+      rebuildConfig()
+      {
+        // build class list
+        let classes = typeof this.config.class === 'string' ? this.config.class.split(' ') : (this.config.class || []);
+        if (this.view === 'renderer' || this.view === 'nested')
+        {
+          classes.push('full-width');
+        }
+        if (this.depth > 0)
+        {
+          classes.push('is-nested');
+        }
+        if (this.isStatic)
+        {
+          classes.push('is-static');
+        }
+        this.classList = classes;
+
+
+        // build label
+        let label = null;
+        if (this.config.label && this.config.label.indexOf('@') === 0)
+        {
+          label = this.config.label;
+        }
+        else if (this.renderer.labelTemplate)
+        {
+          label = this.renderer.labelTemplate(this.config.label || this.config.field);
+        }
+        else
+        {
+          label = this.config.label || this.config.field;
+        }
+        this.label = Localization.localize(label);
+
+
+        // build description
+        let description = null;
+        if (this.config.description && this.config.description.indexOf('@') === 0)
+        {
+          description = this.config.description;
+        }
+        else if (this.config.description === null)
+        {
+          description = null;
+        }
+        else if (this.renderer.descriptionTemplate)
+        {
+          description = this.renderer.descriptionTemplate(this.config.description || this.config.field);
+        }
+        else
+        {
+          description = this.config.description;
+        }
+        this.description = Localization.localize(description, { hideEmpty: true });
+      },
+
+
+      onChange(value)
+      {
+        if (typeof value === 'function')
+        {
+          value(this.value);
+        }
+        else
+        {
+          Objects.setValue(this.value, this.selector, value);
+        }
+        this.$emit('input', this.value);
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index 9e3c94e7..115c5cba 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -1,7 +1,8 @@
 <template>
-  <ui-property v-if="!isHidden" :field="config.field" :label="label" :hide-label="config.hideLabel || isStatic" :description="description" :required="config.required" :class="classList" :is-text="view === 'output'">
-    <component v-if="fieldComponent" :is="fieldComponent" :config="config" :value="model" :entity="value" @input="onChange" :meta="meta" :disabled="isDisabled" :depth="depth" />
-    <p v-if="config.helpText" class="ui-property-help" v-localize="config.helpText"></p>
+  <ui-property v-if="!isHidden" :field="config.path" :label="label" :hide-label="config.options.hideLabel" 
+               :description="description" :required="isRequired">
+    <component :is="config.component" v-bind="config.componentOptions" :value="model" @input="onChange" />
+    <p v-if="config.options.helpText" class="ui-property-help" v-localize="config.options.helpText"></p>
   </ui-property>
 </template>
 
@@ -9,46 +10,31 @@
 <script>
   import Strings from 'zero/services/strings';
   import Objects from 'zero/services/objects';
+  import Editor from 'zero/core/editor.js';
+  import EditorField from 'zero/core/editor-field.js';
   import Localization from 'zero/services/localization';
 
-  const staticViews = ['line'];
-
   export default {
     name: 'uiEditorComponent',
 
+    inject: [ 'meta', 'disabled' ],
+
     props: {
-      value: {
-        type: [ Object, Array ]
-      },
       config: {
-        type: Object,
-        required: true,
-        default: () =>
-        {
-          hidden: false
-        }
+        type: EditorField,
+        required: true
       },
-      renderer: {
-        type: Object,
-        default: () =>
-        {
-          return {};
-        }
+      editor: {
+        type: Editor,
+        required: true
       },
       meta: {
         type: Object,
-        default: () =>
-        {
-          return {};
-        }
+        default: () => { }
       },
-      depth: {
-        type: Number,
-        default: 0
-      },
-      disabled: {
-        type: Boolean,
-        default: false
+      value: {
+        type: Object,
+        required: true
       }
     },
 
@@ -67,7 +53,7 @@
           this.rebuildConfig();
         }
       },
-      renderer: {
+      editor: {
         deep: true,
         handler: function ()
         {
@@ -77,84 +63,54 @@
     },
 
     data: () => ({
-      fieldComponent: null,
-      model: null,
-      selector: [],
-      classList: [],
-      label: null,
-      description: null
+      model: null
     }),
 
+    created()
+    {
+      this.rebuildModel();
+      this.rebuildConfig();
+    },
+
     mounted()
     {
       this.rebuildModel();
     },
 
     computed: {
-      view()
-      {
-        return this.config.display;
-      },
       isHidden()
       {
-        return this.config.hidden || (typeof this.config.condition === 'function' && !this.config.condition(this.value));
+        return typeof this.config.options.condition === 'function' && !this.config.options.condition(this.value);
+      },
+      isRequired()
+      {
+        return typeof this.config.isRequired === 'function' ? this.config.isRequired(this.value) : this.config.isRequired;
       },
       isDisabled()
       {
-        return this.disabled || (typeof this.config.disabled === 'boolean' && this.config.disabled) || (typeof this.config.disabled === 'function' && this.config.disabled(this.value));
+        return this.disabled || (typeof this.config.options.disabled === 'boolean' && this.config.options.disabled) || (typeof this.config.options.disabled === 'function' && this.config.options.disabled(this.value));
       },
-      isStatic()
+      label()
       {
-        return staticViews.indexOf(this.config.display) > -1;
-      }
-    },
-
-    created()
-    {
-      this.fieldComponent = () =>
+        return this.config.options.label || this.editor.templateLabel(this.config.path);
+      },
+      description()
       {
-        if (this.view === 'custom')
-        {
-          if (this.config.path.indexOf('@zero') === 0)
-          {
-            return import(`zero/` + this.config.path.substring(6));
-          }
-          else if (this.config.path.indexOf('@shop') === 0) // TODO common system for plugins
-          {
-            return import(`shop/` + this.config.path.substring(6));
-          }
-          else
-          {
-            // TODO external imports
-          }
-        }
-        else if (this.view === 'renderer')
-        {
-          return import(`zero/editor/editor`);
-        }
-        else if (this.isStatic)
-        {
-          return import(`zero/editor/fields/static/${this.view.toLowerCase()}`);
-        }
-        else
-        {
-          return import(`zero/editor/fields/${this.view.toLowerCase()}`);
-        }
+        return this.config.options.description || this.editor.templateDescription(this.config.path);
       }
-
-      this.rebuildModel();
-      this.rebuildConfig();
     },
 
     methods: {
 
       rebuildModel()
       {
-        this.selector = Strings.selectorToArray(this.config.field);
-        var currentValue = this.value;
+        this.selector = Strings.selectorToArray(this.config.path);
+        let currentValue = this.value;
+        let found = false;
 
         if (!this.selector || !this.selector.length || !currentValue)
         {
+          found = true;
           this.model = null;
         }
         else
@@ -163,6 +119,7 @@
           {
             if (key in currentValue)
             {
+              found = true;
               currentValue = currentValue[key];
             }
             else
@@ -171,7 +128,7 @@
             }
           }
 
-          this.model = currentValue;
+          this.model = found ? currentValue : null;
         }
       },
 
@@ -179,58 +136,58 @@
       rebuildConfig()
       {
         // build class list
-        let classes = typeof this.config.class === 'string' ? this.config.class.split(' ') : (this.config.class || []);
-        if (this.view === 'renderer' || this.view === 'nested')
-        {
-          classes.push('full-width');
-        }
-        if (this.depth > 0)
-        {
-          classes.push('is-nested');
-        }
-        if (this.isStatic)
-        {
-          classes.push('is-static');
-        }
-        this.classList = classes;
+        //let classes = typeof this.config.class === 'string' ? this.config.class.split(' ') : (this.config.class || []);
+        //if (this.view === 'renderer' || this.view === 'nested')
+        //{
+        //  classes.push('full-width');
+        //}
+        //if (this.depth > 0)
+        //{
+        //  classes.push('is-nested');
+        //}
+        //if (this.isStatic)
+        //{
+        //  classes.push('is-static');
+        //}
+        //this.classList = classes;
 
 
-        // build label
-        let label = null;
-        if (this.config.label && this.config.label.indexOf('@') === 0)
-        {
-          label = this.config.label;
-        }
-        else if (this.renderer.labelTemplate)
-        {
-          label = this.renderer.labelTemplate(this.config.label || this.config.field);
-        }
-        else
-        {
-          label = this.config.label || this.config.field;
-        }
-        this.label = Localization.localize(label);
+        //// build label
+        //let label = null;
+        //if (this.config.label && this.config.label.indexOf('@') === 0)
+        //{
+        //  label = this.config.label;
+        //}
+        //else if (this.renderer.labelTemplate)
+        //{
+        //  label = this.renderer.labelTemplate(this.config.label || this.config.field);
+        //}
+        //else
+        //{
+        //  label = this.config.label || this.config.field;
+        //}
+        //this.label = Localization.localize(label);
 
 
-        // build description
-        let description = null;
-        if (this.config.description && this.config.description.indexOf('@') === 0)
-        {
-          description = this.config.description;
-        }
-        else if (this.config.description === null)
-        {
-          description = null;
-        }
-        else if (this.renderer.descriptionTemplate)
-        {
-          description = this.renderer.descriptionTemplate(this.config.description || this.config.field);
-        }
-        else
-        {
-          description = this.config.description;
-        }
-        this.description = Localization.localize(description, { hideEmpty: true });
+        //// build description
+        //let description = null;
+        //if (this.config.description && this.config.description.indexOf('@') === 0)
+        //{
+        //  description = this.config.description;
+        //}
+        //else if (this.config.description === null)
+        //{
+        //  description = null;
+        //}
+        //else if (this.renderer.descriptionTemplate)
+        //{
+        //  description = this.renderer.descriptionTemplate(this.config.description || this.config.field);
+        //}
+        //else
+        //{
+        //  description = this.config.description;
+        //}
+        //this.description = Localization.localize(description, { hideEmpty: true });
       },
 
 
diff --git a/zero.Web.UI/App/editor/editor-old.vue b/zero.Web.UI/App/editor/editor-old.vue
new file mode 100644
index 00000000..9c076471
--- /dev/null
+++ b/zero.Web.UI/App/editor/editor-old.vue
@@ -0,0 +1,412 @@
+<template>
+  <div>
+    <div class="editor-outer" v-if="loaded && !rendererNotFound" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested, 'is-page': isPage }" :renderer="config">
+      <ui-tabs class="editor" :active="activeTab">
+        <ui-tab v-if="!tabDisabled(tab)" class="ui-box" :class="tab.class" :label="tab.label" :count="tab.count(value)" v-for="(tab, index) in tabs" :key="index" :depth="depth" :name="tab.name">
+          <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" :renderer="configuration" v-model="value" @input="onChange" :meta="meta" :depth="depth" :disabled="disabled" />
+          <component v-if="tab.component" :is="tab.component" v-model="value" :disabled="disabled" />
+        </ui-tab>
+      </ui-tabs>
+      <aside v-if="!nested && infos && infos != 'none'" class="editor-infos">
+        <slot name="info-boxes"></slot>
+        <div class="ui-box" v-if="isShared" :class="{'is-active': value.isActive }">
+          <div class="editor-global-flag">
+            <i class="fth-radio"></i>
+            <p>
+              <b>This entity is bound to a parent</b> and automatically synchronised.<br>
+              <!--<a href="/">Edit parent</a>-->
+            </p>
+          </div>
+          <ui-button type="light small" label="Settings" @click="editBlueprint(value.blueprint)" />
+          <ui-button type="light small" label="Edit parent" @click="editBlueprint(value.blueprint)" />
+        </div>
+        <div class="ui-box editor-active-toggle" v-if="activeToggle" :class="{'is-active': value.isActive }">
+          <slot name="settings">
+            <ui-property v-if="activeToggle" label="@ui.active" :is-text="true" class="is-toggle">
+              <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
+            </ui-property>
+          </slot>
+          <slot name="settings-properties"></slot>
+        </div>
+        <div class="ui-box is-light" v-if="value.id">
+          <slot name="infos">
+            <ui-property v-if="value.id" label="@ui.id" :is-text="true">
+              {{value.id}}
+            </ui-property>
+            <ui-property v-if="value.id && value.lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
+              <ui-date v-model="value.lastModifiedDate" />
+            </ui-property>
+            <ui-property v-if="value.id" label="@ui.createdDate" :is-text="true">
+              <ui-date v-model="value.createdDate" />
+            </ui-property>
+            <slot name="infos-more"></slot>
+          </slot>
+        </div>
+        <slot name="infos-after"></slot>
+      </aside>
+    </div>
+    <div class="page page-error editor-error" v-if="loaded && rendererNotFound">
+      <i class="page-error-icon fth-cloud-snow"></i>
+      <p class="page-error-text">
+        <strong class="page-error-headline">Not found</strong><br>
+        The renderer <code>[{{config}}]</code> could not be found
+      </p>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  import EditorComponent from 'zero/editor/editor-component.vue';
+  //import Editor from '@zero/core/editor.js';
+  //import EditorField from '@zero/core/editor-field.js';
+  import { each as _each, map as _map, filter as _filter, isArray as _isArray } from 'underscore';
+
+  export default {
+    name: 'uiEditor',
+
+    props: {
+      config: {
+        type: [ String, Object ],
+        required: true
+      },
+      meta: {
+        type: Object,
+        default: () => { }
+      },
+      value: {
+        type: Object
+      },
+      infos: {
+        type: String,
+        default: 'aside'
+      },
+      activeToggle: {
+        type: Boolean,
+        default: true
+      },
+      nested: {
+        type: Boolean,
+        default: false
+      },
+      isPage: {
+        type: Boolean,
+        default: false
+      },
+      depth: {
+        type: Number,
+        default: 0
+      },
+      onConfigure: {
+        type: Function,
+        default: () => { }
+      },
+      activeTab: {
+        type: Number,
+        default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: { EditorComponent },
+
+    data: () => ({
+      rendererNotFound: false,
+      configuration: {},
+      loaded: false,
+      hasTabs: false,
+      tabs: [],
+      fields: [],
+      renderInfo: true
+    }),
+
+    computed: {
+      isShared()
+      {
+        return this.value && this.value.blueprint != null;
+      }
+    },
+
+    watch: {
+      config: {
+        deep: true,
+        handler: function()
+        {
+          this.load();
+        }
+      }
+    },  
+
+    created()
+    {
+      this.load();
+    },
+
+    methods: {
+
+      load()
+      {
+        if (typeof this.config === 'string')
+        {
+          this.finishLoad(zero.renderers[this.config]);
+        }
+        else
+        {
+          this.finishLoad(this.config);
+        }
+      },
+
+
+      finishLoad(config)
+      {
+        this.configuration = config;
+
+        if (!config || !config.fields)
+        {
+          this.rendererNotFound = true;
+          this.loaded = true;
+          return;
+        }
+
+        this.fields = config.fields;
+
+        let tabs = this.configuration.tabs || [];
+
+        this.tabs = _map(tabs, (tab, index) =>
+        {
+          let tabConfig = tab;
+          tabConfig.count = typeof tabConfig.count === 'function' ? tabConfig.count : () => null;
+          tabConfig.fields = _filter(this.configuration.fields, x => index === 0 ? !x.tab || x.tab === tab.name : x.tab === tab.name);
+          return tabConfig;
+        });
+
+        this.hasTabs = this.tabs.length > 0 && !this.nested;
+
+        if (this.tabs.length < 1)
+        {
+          this.tabs.push({
+            label: '@ui.tab_general',
+            fields: this.configuration.fields,
+            count: () => null
+          });
+
+          if (this.isPage)
+          {
+            this.tabs[0].label = '@ui.tab_content';
+            this.hasTabs = true;
+          }
+        }
+
+        this.onConfigure(this);
+
+        this.rendererNotFound = false;
+        this.loaded = true;
+      },
+
+
+      onChange()
+      {
+        this.$emit('input', this.value);
+      },
+
+
+      tabDisabled(tab)
+      {
+        if (typeof tab.disabled !== 'function')
+        {
+          return false;
+        }
+
+        return tab.disabled(this.value);
+      },
+
+
+      editBlueprint(blueprint)
+      {
+        let params = this.$route.params;
+        params.id = blueprint.id;
+
+        this.$router.push({
+          name: this.$route.name,
+          params: params
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .editor > .ui-view-box
+  {
+    padding-top: 0;
+  }
+
+  .editor
+  {
+    .ui-tabs-list
+    {
+      padding-top: 0;
+    }
+  }
+
+  .editor-outer
+  {
+    &.-infos-aside:not(.is-page)
+    {
+      display: grid;
+      grid-template-columns: 1fr 340px var(--padding);
+      align-items: flex-start;
+    }
+
+    &:not(.has-tabs) 
+    {
+      .ui-tabs-list
+      {
+        display: none;
+      }
+
+      .ui-tab, .editor-infos
+      {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .editor-infos
+  {
+    margin: 50px 0 0;
+    position: sticky;
+    top: var(--padding);
+
+    .ui-box
+    {
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+
+    .ui-box:first-child
+    {
+      margin-top: 0;
+    }
+
+    .ui-box + .ui-box
+    {
+      margin-top: 16px;
+    }
+
+    .ui-box + .ui-box.is-light
+    {
+      margin-top: 1px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .ui-property + .ui-property
+    {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: none;
+    }
+
+    .is-toggle
+    {
+      align-items: center;
+    }
+
+    .ui-property-label
+    {
+      width: auto;
+      padding-right: 20px;
+    }
+
+    .ui-property-content
+    {
+      flex: 0 1 auto;
+    }
+
+    .ui-property
+    {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .editor-active-toggle
+  {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /*.editor-active-toggle.is-active
+  {
+    background: var(--color-accent-info-bg);   
+
+    .ui-property-label
+    {
+      color: var(--color-accent-info);
+    }
+  }*/
+
+
+  .editor-global-flag
+  {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-gap: 16px;
+    padding-bottom: 10px;
+    align-items: center;
+    font-size: var(--font-size);
+    line-height: 1.5;
+    position: relative;
+
+    p
+    {
+      margin: 0;
+      color: var(--color-text);
+    }
+
+    i
+    {
+      font-size: 24px;
+      color: var(--color-primary);
+      margin-top: -2px;
+    }
+
+    & + .ui-button
+    {
+      margin-top: 1.2rem;
+    }
+
+    & + .ui-property
+    {
+      margin-top: 32px;
+      padding-top: 32px;
+      border-top: 1px solid var(--color-line);
+    }
+
+    &.is-block
+    {
+      padding: 20px;
+      padding-right: 70px;
+      border-radius: var(--radius);
+      background: var(--color-box-nested);
+      margin-bottom: var(--padding);
+
+      i
+      {
+        margin-top: -22px;
+        right: 20px;
+      }
+    }
+  }
+
+  .editor-error
+  {
+    background: transparent;
+    min-height: calc(100vh - 100px);
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index 08a8c7e7..df141709 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -1,71 +1,35 @@
 <template>
   <div>
-    <div class="editor-outer" v-if="loaded && !rendererNotFound" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested, 'is-page': isPage }" :renderer="config">
-      <ui-tabs class="editor" :active="activeTab">
-        <ui-tab v-if="!tabDisabled(tab)" class="ui-box" :class="tab.class" :label="tab.label" :count="tab.count(value)" v-for="(tab, index) in tabs" :key="index" :depth="depth" :name="tab.name">
-          <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" :renderer="configuration" v-model="value" @input="onChange" :meta="meta" :depth="depth" :disabled="disabled" />
-          <component v-if="tab.component" :is="tab.component" v-model="value" :disabled="disabled" />
+    <div class="editor-outer" v-if="loaded" :class="{ 'has-tabs': true }">
+      <ui-tabs class="editor">
+        <ui-tab v-if="!tab.disabled(value)" v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(value)" :key="index">
+          <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value" />
+          <!--<component v-if="tab.component" :is="tab.component" v-model="value" :disabled="disabled" />-->
         </ui-tab>
       </ui-tabs>
-      <aside v-if="!nested && infos && infos != 'none'" class="editor-infos">
-        <slot name="info-boxes"></slot>
-        <div class="ui-box" v-if="isShared" :class="{'is-active': value.isActive }">
-          <div class="editor-global-flag">
-            <i class="fth-radio"></i>
-            <p>
-              <b>This entity is bound to a parent</b> and automatically synchronised.<br>
-              <!--<a href="/">Edit parent</a>-->
-            </p>
-          </div>
-          <ui-button type="light small" label="Settings" @click="editBlueprint(value.blueprint)" />
-          <ui-button type="light small" label="Edit parent" @click="editBlueprint(value.blueprint)" />
-        </div>
-        <div class="ui-box editor-active-toggle" v-if="activeToggle" :class="{'is-active': value.isActive }">
-          <slot name="settings">
-            <ui-property v-if="activeToggle" label="@ui.active" :is-text="true" class="is-toggle">
-              <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
-            </ui-property>
-          </slot>
-          <slot name="settings-properties"></slot>
-        </div>
-        <div class="ui-box is-light" v-if="value.id">
-          <slot name="infos">
-            <ui-property v-if="value.id" label="@ui.id" :is-text="true">
-              {{value.id}}
-            </ui-property>
-            <ui-property v-if="value.id && value.lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
-              <ui-date v-model="value.lastModifiedDate" />
-            </ui-property>
-            <ui-property v-if="value.id" label="@ui.createdDate" :is-text="true">
-              <ui-date v-model="value.createdDate" />
-            </ui-property>
-            <slot name="infos-more"></slot>
-          </slot>
-        </div>
-        <slot name="infos-after"></slot>
-      </aside>
-    </div>
-    <div class="page page-error editor-error" v-if="loaded && rendererNotFound">
-      <i class="page-error-icon fth-cloud-snow"></i>
-      <p class="page-error-text">
-        <strong class="page-error-headline">Not found</strong><br>
-        The renderer <code>[{{config}}]</code> could not be found
-      </p>
     </div>
   </div>
 </template>
 
 
 <script>
-  import EditorComponent from 'zero/editor/editor-component';
-  import { each as _each, map as _map, filter as _filter, isArray as _isArray } from 'underscore';
+  import EditorComponent from 'zero/editor/editor-component.vue';
+  import Editor from 'zero/core/editor.js';
 
   export default {
     name: 'uiEditor',
 
+    provide: function ()
+    {
+      return {
+        meta: this.meta,
+        disabled: false
+      };
+    },
+
     props: {
-      config: {
-        type: [ String, Object ],
+      editor: {
+        type: [String, Editor],
         required: true
       },
       meta: {
@@ -74,163 +38,38 @@
       },
       value: {
         type: Object
-      },
-      infos: {
-        type: String,
-        default: 'aside'
-      },
-      activeToggle: {
-        type: Boolean,
-        default: true
-      },
-      nested: {
-        type: Boolean,
-        default: false
-      },
-      isPage: {
-        type: Boolean,
-        default: false
-      },
-      depth: {
-        type: Number,
-        default: 0
-      },
-      onConfigure: {
-        type: Function,
-        default: () => { }
-      },
-      activeTab: {
-        type: Number,
-        default: 0
-      },
-      disabled: {
-        type: Boolean,
-        default: false
       }
     },
 
     components: { EditorComponent },
 
     data: () => ({
-      rendererNotFound: false,
-      configuration: {},
+      editorConfig: null,
       loaded: false,
-      hasTabs: false,
-      tabs: [],
-      fields: [],
-      renderInfo: true
+      tabs: []
     }),
 
-    computed: {
-      isShared()
-      {
-        return this.value && this.value.blueprint != null;
-      }
-    },
-
-    watch: {
-      config: {
-        deep: true,
-        handler: function()
-        {
-          this.load();
-        }
-      }
-    },  
-
     created()
     {
-      this.load();
+      this.editorConfig = typeof this.editor === 'string' ? this.zero.getEditor(this.editor) : this.editor;
+      this.tabs = this.editorConfig.tabs.map(tab =>
+      {
+        return {
+          ...tab,
+          count: value => typeof tab.count === 'number' ? tab.count : (typeof tab.count === 'function' ? tab.count(value) : 0),
+          disabled: value => typeof tab.disabled === 'boolean' ? tab.disabled : (typeof tab.disabled === 'function' ? tab.disabled(value) : false),
+          fields: this.editorConfig.getFields(tab)
+        };
+      });
+
+      this.loaded = true;
     },
 
     methods: {
 
-      load()
-      {
-        if (typeof this.config === 'string')
-        {
-          this.finishLoad(zero.renderers[this.config]);
-        }
-        else
-        {
-          this.finishLoad(this.config);
-        }
-      },
-
-
-      finishLoad(config)
-      {
-        this.configuration = config;
-
-        if (!config || !config.fields)
-        {
-          this.rendererNotFound = true;
-          this.loaded = true;
-          return;
-        }
-
-        this.fields = config.fields;
-
-        let tabs = this.configuration.tabs || [];
-
-        this.tabs = _map(tabs, (tab, index) =>
-        {
-          let tabConfig = tab;
-          tabConfig.count = typeof tabConfig.count === 'function' ? tabConfig.count : () => null;
-          tabConfig.fields = _filter(this.configuration.fields, x => index === 0 ? !x.tab || x.tab === tab.name : x.tab === tab.name);
-          return tabConfig;
-        });
-
-        this.hasTabs = this.tabs.length > 0 && !this.nested;
-
-        if (this.tabs.length < 1)
-        {
-          this.tabs.push({
-            label: '@ui.tab_general',
-            fields: this.configuration.fields,
-            count: () => null
-          });
-
-          if (this.isPage)
-          {
-            this.tabs[0].label = '@ui.tab_content';
-            this.hasTabs = true;
-          }
-        }
-
-        this.onConfigure(this);
-
-        this.rendererNotFound = false;
-        this.loaded = true;
-      },
-
-
       onChange()
       {
         this.$emit('input', this.value);
-      },
-
-
-      tabDisabled(tab)
-      {
-        if (typeof tab.disabled !== 'function')
-        {
-          return false;
-        }
-
-        return tab.disabled(this.value);
-      },
-
-
-      editBlueprint(blueprint)
-      {
-        let params = this.$route.params;
-        params.id = blueprint.id;
-
-        this.$router.push({
-          name: this.$route.name,
-          params: params
-        });
       }
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/inputlist.vue b/zero.Web.UI/App/editor/fields/inputlist.vue
index 09c01585..7410c2fe 100644
--- a/zero.Web.UI/App/editor/fields/inputlist.vue
+++ b/zero.Web.UI/App/editor/fields/inputlist.vue
@@ -1,5 +1,7 @@
 <template>
-  <ui-input-list :value="value" @input="$emit('input', $event)" :add-label="config.addLabel || '@ui.add'" :disabled="disabled" :inline="true" />
+  <ui-input-list :value="value" @input="$emit('input', $event)" :add-label="addLabel" :disabled="disabled" 
+                 :max-items="limit"
+                 :inline="true" :max-length="maxItemLength" />
 </template>
 
 <script>
@@ -13,7 +15,18 @@
         type: Boolean,
         default: false
       },
-      config: Object
+      limit: {
+        type: Number,
+        default: 10
+      },
+      maxItemLength: {
+        type: Number,
+        default: 10
+      },
+      addLabel: {
+        type: String,
+        default: '@ui.add'
+      }
     },
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/text.vue b/zero.Web.UI/App/editor/fields/text.vue
index 9e186990..0e5e4e43 100644
--- a/zero.Web.UI/App/editor/fields/text.vue
+++ b/zero.Web.UI/App/editor/fields/text.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="ui-box">
-    <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="config.placeholder" :maxlength="maxLength" :disabled="disabled" />
-  </div>
+  <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="placeholder" :maxlength="maxLength" />
 </template>
 
 
@@ -12,17 +10,13 @@
         type: String,
         default: null
       },
-      config: Object,
-      disabled: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    computed: {
-      maxLength()
-      {
-        return this.config.maxLength > 0 ? this.config.maxLength : null;
+      maxLength: {
+        type: Number,
+        default: null
+      },
+      placeholder: {
+        type: String,
+        default: null
       }
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/toggle.vue b/zero.Web.UI/App/editor/fields/toggle.vue
index d9322a05..e01d4796 100644
--- a/zero.Web.UI/App/editor/fields/toggle.vue
+++ b/zero.Web.UI/App/editor/fields/toggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-toggle :value="value" @input="$emit('input', $event)" :disabled="disabled" :negative="config.negative || false" />
+  <ui-toggle :value="value" @input="$emit('input', $event)" :disabled="disabled" :negative="negative" />
 </template>
 
 
@@ -14,7 +14,10 @@
         type: Boolean,
         default: false
       },
-      config: Object
+      negative: {
+        type: Boolean,
+        default: false
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/all.js b/zero.Web.UI/App/editors/all.js
new file mode 100644
index 00000000..a46add92
--- /dev/null
+++ b/zero.Web.UI/App/editors/all.js
@@ -0,0 +1,18 @@
+
+import application from './application.js';
+//import country from './country.js';
+//import language from './language.js';
+//import media from './media.js';
+//import translation from './translation.js';
+//import user from './user.js';
+//import userRole from './userRole.js';
+
+export default {
+  application,
+  //country,
+  //language,
+  //media,
+  //translation,
+  //user,
+  //userRole
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/application.js b/zero.Web.UI/App/editors/application.js
new file mode 100644
index 00000000..cfbbfce9
--- /dev/null
+++ b/zero.Web.UI/App/editors/application.js
@@ -0,0 +1,23 @@
+
+import Editor from '../core/editor.js';
+import ApplicationFeatures from '../pages/settings/application-features.vue';
+
+const editor = new Editor('application');
+const prefix = '@application.fields.';
+
+editor.templateLabel = x => prefix + x;
+editor.templateDescription = x => prefix + x + '_text';
+
+const general = editor.tab('general', '@ui.tab_general');
+const domains = editor.tab('domains', '@application.tab_domains', x => x.domains.length);
+const features = editor.tab('features', '@application.tab_features', x => x.features.length);
+
+general.field('name', { label: '@ui.name' }).text(50).required();
+general.field('fullName').text(120);
+general.field('email').text(120).required();
+general.field('imageId').image();
+general.field('iconId').image();
+domains.field('domains', { helpText: prefix + 'domains_help' }).inputList(10, null, prefix + 'domains_add').required();
+features.field('features').custom(ApplicationFeatures);
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/country.js b/zero.Web.UI/App/editors/country.js
similarity index 100%
rename from zero.Web.UI/App/renderers/country.js
rename to zero.Web.UI/App/editors/country.js
diff --git a/zero.Web.UI/App/renderers/language.js b/zero.Web.UI/App/editors/language.js
similarity index 100%
rename from zero.Web.UI/App/renderers/language.js
rename to zero.Web.UI/App/editors/language.js
diff --git a/zero.Web.UI/App/renderers/media.js b/zero.Web.UI/App/editors/media.js
similarity index 100%
rename from zero.Web.UI/App/renderers/media.js
rename to zero.Web.UI/App/editors/media.js
diff --git a/zero.Web.UI/App/renderers/translation.js b/zero.Web.UI/App/editors/translation.js
similarity index 100%
rename from zero.Web.UI/App/renderers/translation.js
rename to zero.Web.UI/App/editors/translation.js
diff --git a/zero.Web.UI/App/renderers/user.js b/zero.Web.UI/App/editors/user.js
similarity index 100%
rename from zero.Web.UI/App/renderers/user.js
rename to zero.Web.UI/App/editors/user.js
diff --git a/zero.Web.UI/App/renderers/userRole.js b/zero.Web.UI/App/editors/userRole.js
similarity index 100%
rename from zero.Web.UI/App/renderers/userRole.js
rename to zero.Web.UI/App/editors/userRole.js
diff --git a/zero.Web.UI/App/pages/settings/application.vue b/zero.Web.UI/App/pages/settings/application.vue
index 7f945064..9f83fe9d 100644
--- a/zero.Web.UI/App/pages/settings/application.vue
+++ b/zero.Web.UI/App/pages/settings/application.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="application" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@application.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="application" v-model="model" :meta="meta" :disabled="disabled" />
+    <ui-editor editor="application" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
 
@@ -26,7 +26,8 @@
 
       onLoad(form)
       {
-        form.load(!this.id ? ApplicationsApi.getEmpty() : ApplicationsApi.getById(this.id)).then(response =>
+        const id = this.$route.params.id;
+        form.load(!id ? ApplicationsApi.getEmpty() : ApplicationsApi.getById(id)).then(response =>
         {
           this.disabled = !response.meta.canEdit;
           this.meta = response.meta;
diff --git a/zero.Web.UI/App/renderers/all.js b/zero.Web.UI/App/renderers/all.js
deleted file mode 100644
index c364b0ae..00000000
--- a/zero.Web.UI/App/renderers/all.js
+++ /dev/null
@@ -1,18 +0,0 @@
-
-import application from './application.js';
-import country from './country.js';
-import language from './language.js';
-import media from './media.js';
-import translation from './translation.js';
-import user from './user.js';
-import userRole from './userRole.js';
-
-export default {
-  application,
-  country,
-  language,
-  media,
-  translation,
-  user,
-  userRole
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/application-new.js b/zero.Web.UI/App/renderers/application-new.js
deleted file mode 100644
index 1bdb386f..00000000
--- a/zero.Web.UI/App/renderers/application-new.js
+++ /dev/null
@@ -1,23 +0,0 @@
-
-import Editor from '../core/editor.js';
-import ApplicationFeatures from '../pages/settings/application-features.vue';
-
-const editor = new Editor('application');
-const prefix = '@application.fields.';
-
-editor.onLabelCreate = x => prefix + x;
-editor.onDescriptionCreate = x => prefix + x + '_text';
-
-editor.tab('general', '@ui.tab_general');
-const domains = editor.tab('domains', '@application.tab_domains', x => x.domains.length);
-const features = editor.tab('features', '@application.tab_features', x => x.features.length);
-
-editor.field('name', { label: '@ui.name' }).text(50);
-editor.field('fullName').text(120);
-editor.field('email').text(120);
-editor.field('imageId').image();
-editor.field('iconId').image();
-domains.field('domains', { helpText: prefix + 'domains_help' }).inputList(10, null, prefix + 'domains_add');
-features.field('features').component(ApplicationFeatures);
-
-export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/application.js b/zero.Web.UI/App/renderers/application.js
deleted file mode 100644
index f4a61661..00000000
--- a/zero.Web.UI/App/renderers/application.js
+++ /dev/null
@@ -1,77 +0,0 @@
-export default {
-  alias: 'application',
-
-  tabs: [
-    {
-      name: 'general',
-      label: '@ui.tab_general'
-    },
-    {
-      name: 'domains',
-      label: '@application.tab_domains',
-      count: x => x.domains.length
-    },
-    {
-      name: 'features',
-      label: '@application.tab_features',
-      count: x => x.features.length
-    }
-  ],
-
-  labelTemplate(field)
-  {
-    return "@application.fields." + field;
-  },
-
-  descriptionTemplate(field)
-  {
-    return "@application.fields." + field + "_text";
-  },
-
-  fields: [
-    {
-      field: 'name',
-      display: 'text',
-      label: '@ui.name',
-      required: true,
-      maxLength: 50
-    },
-    {
-      field: 'fullName',
-      display: 'text',
-      maxLength: 120
-    },
-    {
-      field: 'email',
-      display: 'text',
-      required: true,
-      maxLength: 120
-    },
-    {
-      field: 'imageId',
-      display: 'media',
-      type: 'image',
-      class: 'my-image'
-    },
-    {
-      field: 'iconId',
-      display: 'media',
-      type: 'image'
-    },
-    {
-      tab: 'domains',
-      field: 'domains',
-      display: 'inputList',
-      required: true,
-      limit: 10,
-      addLabel: '@application.fields.domains_add',
-      helpText: '@application.fields.domains_help'
-    },
-    {
-      tab: 'features',
-      field: 'features',
-      display: 'custom',
-      path: '@zero/pages/settings/application-features.vue'
-    }
-  ]
-};
\ No newline at end of file