diff --git a/app/components/maglev/content/builder.rb b/app/components/maglev/content/builder.rb
index b32366ce..842a9bbb 100644
--- a/app/components/maglev/content/builder.rb
+++ b/app/components/maglev/content/builder.rb
@@ -3,26 +3,19 @@
 module Maglev
   module Content
     module Builder
-      TYPES = {
-        text: Maglev::Content::Text,
-        image: Maglev::Content::Image,
-        link: Maglev::Content::Link,
-        checkbox: Maglev::Content::Checkbox,
-        color: Maglev::Content::Color,
-        select: Maglev::Content::Select,
-        collection_item: Maglev::Content::CollectionItem,
-        icon: Maglev::Content::Icon
-      }.freeze
-
       def build(scope, content, setting)
-        klass = TYPES[setting.type.to_sym]
+        klass = find_klass(setting.type.to_sym)
 
         raise "[Maglev] Unknown setting type: #{setting.type}" unless klass
 
         klass.new(scope, content, setting)
       end
 
-      module_function :build
+      def find_klass(type)
+        Maglev::Content.const_get(type.to_s.camelize)
+      end
+
+      module_function :build, :find_klass
     end
   end
 end
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input.vue b/app/javascript/editor/components/dynamic-form/dynamic-input.vue
deleted file mode 100644
index 21473573..00000000
--- a/app/javascript/editor/components/dynamic-form/dynamic-input.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div>
-    <text-input
-      :label="setting.label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      @blur="$emit('blur')"
-      v-model="inputValue"
-      v-if="
-        setting.type == 'text' &&
-        !options.html &&
-        parseInt(options.nbRows || 1) < 2
-      "
-    />
-    <textarea-input
-      :label="setting.label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      :rows="options.nbRows"
-      @blur="$emit('blur')"
-      v-model="inputValue"
-      v-if="
-        setting.type == 'text' && !options.html && parseInt(options.nbRows) > 1
-      "
-    />
-    <rich-text-input
-      :label="setting.label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      :lineBreak="options.lineBreak"
-      :rows="options.nbRows"
-      @blur="$emit('blur')"
-      v-model="inputValue"
-      v-if="setting.type == 'text' && options.html"
-    />
-    <image-input
-      :label="setting.label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      v-model="inputValue"
-      v-if="setting.type == 'image'"
-    />
-    <icon-input
-      :label="setting.label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      v-model="inputValue"
-      v-if="setting.type == 'icon'"
-    />
-    <checkbox-input
-      :label="setting.label"
-      :name="setting.id"
-      v-model="inputValue"
-      v-if="setting.type == 'checkbox'"
-    />
-    <link-input
-      :label="setting.label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      :withText="options.withText"
-      v-model="inputValue"
-      v-if="setting.type == 'link'"
-    />
-    <color-picker
-      :label="setting.label"
-      :name="setting.id"
-      v-model="inputValue"
-      :presets="options.presets"
-      v-if="setting.type == 'color'"
-    />
-    <simple-select
-      :label="setting.label"
-      :name="setting.id"
-      v-model="inputValue"
-      :selectOptions="options.selectOptions"
-      v-if="setting.type == 'select'"
-    />
-    <collection-item-input
-      :label="setting.label"
-      :name="setting.id"
-      v-model="inputValue"
-      v-if="setting.type == 'collection_item'"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DynamicInput',
-  props: {
-    setting: { type: Object, default: () => ({ type: 'text' }) },
-    content: { type: Array, required: true },
-    isFocused: { type: Boolean, default: false },
-  },
-  computed: {
-    options() {
-      return this.setting.options
-    },
-    value() {
-      const content = this.content.find(
-        (sectionContent) => sectionContent.id === this.setting.id,
-      )
-      return content?.value
-    },
-    inputValue: {
-      get() {
-        return this.value
-      },
-      set(value) {
-        this.$emit('change', {
-          settingId: this.setting.id,
-          settingType: this.setting.type,
-          settingOptions: this.setting.options,
-          value,
-        })
-      },
-    },
-  },
-}
-</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/checkbox.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/checkbox.vue
new file mode 100644
index 00000000..ddaf9775
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/checkbox.vue
@@ -0,0 +1,16 @@
+<template>
+  <checkbox-input
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicCheckboxInput',
+  mixins: [DynamicInputMixin],
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/collection-item.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/collection-item.vue
new file mode 100644
index 00000000..21b2e00b
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/collection-item.vue
@@ -0,0 +1,16 @@
+<template>
+  <collection-item-input
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicCollectionItemInput',
+  mixins: [DynamicInputMixin],
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/color.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/color.vue
new file mode 100644
index 00000000..7af83af9
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/color.vue
@@ -0,0 +1,17 @@
+<template>
+  <color-picker
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+    :presets="options.presets"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicColorInput',
+  mixins: [DynamicInputMixin],
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/dictionnary.js b/app/javascript/editor/components/dynamic-form/dynamic-input/dictionnary.js
new file mode 100644
index 00000000..451b059b
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/dictionnary.js
@@ -0,0 +1,41 @@
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+import TextInput from './text'
+import ImageInput from './image'
+import ColorInput from './color'
+import LinkInput from './link'
+import CheckboxInput from './checkbox'
+import SelectInput from './select'
+import IconInput from './icon'
+import CollectionItemInput from './collection-item'
+
+let registeredInputs = {}
+
+// key names must be "underscored" (since they're coming from the Rails API)
+const CORE_INPUTS = {
+  text: TextInput,
+  image: ImageInput,
+  color: ColorInput,
+  link: LinkInput,
+  checkbox: CheckboxInput,
+  select: SelectInput,
+  icon: IconInput,
+  collection_item: CollectionItemInput,
+}
+
+export const register = (type, component) => {
+  registeredInputs[type] = component
+}
+
+export const get = (type) => {
+  const component = registeredInputs[type] || CORE_INPUTS[type]
+
+  if (!component) {
+    console.log(`[Maglev] we couldn't find a component for the "${type}" type`)
+  }
+
+  return component
+}
+
+window.registerMaglevSetting = register
+window.maglevSettingMixin = DynamicInputMixin
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/icon.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/icon.vue
new file mode 100644
index 00000000..5763a178
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/icon.vue
@@ -0,0 +1,17 @@
+<template>
+  <icon-input
+    :label="setting.label"
+    :name="setting.id"
+    :isFocused="isFocused"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicIconInput',
+  mixins: [DynamicInputMixin],
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/image.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/image.vue
new file mode 100644
index 00000000..93b91b2f
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/image.vue
@@ -0,0 +1,17 @@
+<template>
+  <image-input
+    :label="setting.label"
+    :name="setting.id"
+    :isFocused="isFocused"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicImageInput',
+  mixins: [DynamicInputMixin],
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/index.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/index.vue
new file mode 100644
index 00000000..b59d10db
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <component
+    v-bind:is="inputComponent"
+    :setting="setting"
+    :value="value"
+    :isFocused="isFocused"
+    :options="options"
+    v-on="$listeners"
+  ></component>
+</template>
+
+<script>
+import * as InputDictionnary from './dictionnary'
+
+export default {
+  name: 'DynamicInput',
+  props: {
+    setting: { type: Object, default: () => ({ type: 'text' }) },
+    content: { type: Array, required: true },
+    isFocused: { type: Boolean, default: false },
+  },
+  computed: {
+    inputComponent() {
+      return InputDictionnary.get(this.setting.type)
+    },
+    options() {
+      return this.setting.options
+    },
+    value() {
+      const content = this.content.find(
+        (sectionContent) => sectionContent.id === this.setting.id,
+      )
+      return content?.value
+    },
+  },
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/link.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/link.vue
new file mode 100644
index 00000000..b0ec82ab
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/link.vue
@@ -0,0 +1,23 @@
+<template>
+  <link-input
+    :label="setting.label"
+    :name="setting.id"
+    :isFocused="isFocused"
+    :withText="withText"
+    v-model="inputValue"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicLinkInput',
+  mixins: [DynamicInputMixin],
+  props: {
+    withText() {
+      return !!this.options.withText
+    },
+  },
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/select.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/select.vue
new file mode 100644
index 00000000..ef69ea8e
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/select.vue
@@ -0,0 +1,17 @@
+<template>
+  <simple-select
+    :label="setting.label"
+    :name="setting.id"
+    v-model="inputValue"
+    :selectOptions="options.selectOptions"
+  />
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicSelectInput',
+  mixins: [DynamicInputMixin],
+}
+</script>
diff --git a/app/javascript/editor/components/dynamic-form/dynamic-input/text.vue b/app/javascript/editor/components/dynamic-form/dynamic-input/text.vue
new file mode 100644
index 00000000..abfaac03
--- /dev/null
+++ b/app/javascript/editor/components/dynamic-form/dynamic-input/text.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <text-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      @blur="$emit('blur')"
+      v-model="inputValue"
+      v-if="isSimpleText"
+    />
+    <textarea-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      :rows="options.nbRows"
+      @blur="$emit('blur')"
+      v-model="inputValue"
+      v-if="isTextarea"
+    />
+    <rich-text-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      :lineBreak="options.lineBreak"
+      :rows="options.nbRows"
+      @blur="$emit('blur')"
+      v-model="inputValue"
+      v-if="isRichText"
+    />
+  </div>
+</template>
+
+<script>
+import DynamicInputMixin from '@/mixins/dynamic-input'
+
+export default {
+  name: 'DynamicTextInput',
+  mixins: [DynamicInputMixin],
+  computed: {
+    isSimpleText() {
+      return !this.isRichText && this.numberOfRows < 2
+    },
+    isTextarea() {
+      return !this.isRichText && this.numberOfRows > 1
+    },
+    isRichText() {
+      return !!this.options.html
+    },
+    numberOfRows() {
+      return parseInt(this.options.nbRows || 1)
+    },
+  },
+}
+</script>
diff --git a/app/javascript/editor/mixins/dynamic-input.js b/app/javascript/editor/mixins/dynamic-input.js
new file mode 100644
index 00000000..a3c90d33
--- /dev/null
+++ b/app/javascript/editor/mixins/dynamic-input.js
@@ -0,0 +1,23 @@
+export default {
+  props: {
+    setting: { type: Object, default: () => ({ type: 'text' }) },
+    value: { required: true },
+    isFocused: { type: Boolean, default: false },
+    options: { type: Object },
+  },
+  computed: {
+    inputValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('change', {
+          settingId: this.setting.id,
+          settingType: this.setting.type,
+          settingOptions: this.setting.options,
+          value,
+        })
+      },
+    },
+  },
+}
diff --git a/app/models/maglev/section/setting.rb b/app/models/maglev/section/setting.rb
index c367554a..b441b441 100644
--- a/app/models/maglev/section/setting.rb
+++ b/app/models/maglev/section/setting.rb
@@ -2,6 +2,8 @@
 
 # rubocop:disable Style/ClassAndModuleChildren
 class Maglev::Section::Setting
+  DEFAULT_TYPES = %w[text image checkbox link color select collection_item icon].freeze
+
   ## concerns ##
   include ActiveModel::Model
 
@@ -10,17 +12,18 @@ class Maglev::Section::Setting
 
   ## validations ##
   validates :id, :label, :type, :default, 'maglev/presence': true
-  validates :type, inclusion: { in: %w[text image checkbox link color select collection_item icon] }
+  validates :type, inclusion: { in: DEFAULT_TYPES + Maglev.config.custom_setting_types }
 
   ## methods ##
 
   # NOTE: any modification to that method must be reflected to the JS editor
   def build_default_content(custom_default = nil)
     default = custom_default || self.default
-    case type.to_sym
-    when :image then build_default_image_content(default)
-    when :link then build_default_link_content(default)
-    when :checkbox then build_default_checkbox_content(default)
+
+    default_method_name = :"build_default_#{type}_content"
+
+    if respond_to?(default_method_name)
+      public_send(default_method_name, default)
     else
       default || label
     end
diff --git a/lib/maglev.rb b/lib/maglev.rb
index 1653b188..47f278d4 100644
--- a/lib/maglev.rb
+++ b/lib/maglev.rb
@@ -39,6 +39,7 @@ def config
         c.admin_password = nil
         c.static_pages = []
         c.reserved_paths = []
+        c.custom_setting_types = []
       end
     end
     # rubocop:enable Metrics/MethodLength, Metrics/AbcSize
diff --git a/lib/maglev/config.rb b/lib/maglev/config.rb
index 3b968c5c..6467e8ad 100644
--- a/lib/maglev/config.rb
+++ b/lib/maglev/config.rb
@@ -3,6 +3,6 @@
 module Maglev
   Config = Struct.new(:primary_color, :title, :favicon, :logo, :back_action, :uploader, :services,
                       :collections, :is_authenticated, :ui_locale, :default_site_locales,
-                      :static_pages, :reserved_paths,
+                      :static_pages, :reserved_paths, :custom_setting_types,
                       :admin_username, :admin_password)
 end