diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue
index 3c4e3b2d7..39381803c 100644
--- a/src/admin/components/lists/metadata-list.vue
+++ b/src/admin/components/lists/metadata-list.vue
@@ -171,6 +171,21 @@
                                         :class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': isRepositoryLevel }"
                                         v-for="(metadatum, index) in availableMetadatumList"
                                         :key="index">
+                                    <div 
+                                            v-if="metadatum.preview_template"
+                                            class="metadata-type-preview tainacan-form">
+                                        <div class="field">
+                                            <span class="collapse-handle">
+                                                <span class="icon">
+                                                    <i class="has-text-secondary tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
+                                                </span> 
+                                                <label class="label has-tooltip">
+                                                    {{ metadatum.name }}
+                                                </label>
+                                            </span>
+                                            <div v-html="metadatum.preview_template"/>
+                                        </div>
+                                    </div>
                                     <span class="icon grip-icon">
                                         <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
                                     </span>
@@ -1089,8 +1104,8 @@ export default {
                     max-width: 180px;
                     width: 60%;
                 }
-                &:after,
-                &:before {
+                &::after,
+                &::before {
                     content: '';
                     display: block;
                     position: absolute;
@@ -1099,7 +1114,7 @@ export default {
                     height: 0;
                     border-style: solid;
                 }
-                &:after {
+                &::after {
                     top: -1px;
                     border-color: transparent white transparent transparent;
                     border-right-width: 16px;
@@ -1107,7 +1122,7 @@ export default {
                     border-bottom-width: 20px;
                     left: -19px;
                 }
-                &:before {
+                &::before {
                     top: -1px;
                     border-color: transparent $gray2 transparent transparent;
                     border-right-width: 16px;
@@ -1115,6 +1130,42 @@ export default {
                     border-bottom-width: 20px;
                     left: -20px;
                 }
+                &:hover {
+                    .metadata-type-preview {
+                        visibility: visible;
+                        opacity: 1;
+                        left: -210px;
+                        transition-delay: 1s;
+
+                        &::before {
+                            border-color: transparent $gray1 transparent transparent;
+                            border-left-width: 16px;
+                            border-top-width: 20px;
+                            border-bottom-width: 20px;
+                            right: -19px;
+                        }
+                    }
+                }
+
+                .metadata-type-preview {
+                    position: absolute;
+                    background: $gray1;
+                    padding: 12px;
+                    border-radius: 3px;
+                    z-index: 9999999999999;
+                    width: 180px;
+                    height: 120px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    left: -180px;
+                    top: -40px;
+                    visibility: hidden;
+                    opacity: 0;
+                    transition: opacity ease 0.3s, visibility ease 0.3s, left ease 0.3s;
+                    transition-delay: 0.1s;
+
+                }
             }
 
             .sortable-drag {
diff --git a/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php b/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php
index 04ad260fb..77056237d 100644
--- a/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php
+++ b/src/api/endpoints/class-tainacan-rest-metadata-types-controller.php
@@ -51,7 +51,10 @@ class REST_Metadata_Types_Controller extends REST_Controller {
 								],
 								'form_component'      => [
 									'type' => 'boolean'
-								]
+								],
+								'preview_template'    => [
+									'type' => 'string'
+								],
 							]
 						]
 					]
diff --git a/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php b/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php
index f7a7d8b08..612ac8b2b 100644
--- a/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php
+++ b/src/classes/metadata-types/metadata-type/class-tainacan-metadata-type.php
@@ -73,6 +73,12 @@ abstract class Metadata_Type  {
      * The Metadata type description. Metadata type classes must set an internationalized string for this property
      */
     private $description;
+
+    /**
+     * The html template featuring a preview of how this metadata type componenet
+     * @var string
+     */
+    private $preview_template;
     
     abstract function render( $itemMetadata );
 
@@ -124,6 +130,14 @@ abstract class Metadata_Type  {
     	$this->form_component = $form_component;
     }
 
+    public function get_preview_template() {
+        return $this->preview_template;
+    }
+
+    public function set_preview_template($preview_template){
+    	$this->preview_template = $preview_template;
+    }
+
     public function get_name(){
         return $this->name;
     }
@@ -189,8 +203,8 @@ abstract class Metadata_Type  {
     public function _toArray(){
 	    $attributes = [];
 
-        $attributes['name']              = $this->get_name();
-        $attributes['description']              = $this->get_description();
+        $attributes['name']                = $this->get_name();
+        $attributes['description']         = $this->get_description();
         $attributes['errors']              = $this->get_errors();
 	    $attributes['related_mapped_prop'] = $this->get_related_mapped_prop();
 	    $attributes['options']             = $this->get_options();
@@ -199,6 +213,7 @@ abstract class Metadata_Type  {
         $attributes['component']           = $this->get_component();
         $attributes['primitive_type']      = $this->get_primitive_type();
         $attributes['form_component']      = $this->get_form_component();
+        $attributes['preview_template']    = $this->get_preview_template();
 
         return $attributes;
         
diff --git a/src/classes/metadata-types/text/class-tainacan-text.php b/src/classes/metadata-types/text/class-tainacan-text.php
index 35aa83cac..5e20fcdb6 100644
--- a/src/classes/metadata-types/text/class-tainacan-text.php
+++ b/src/classes/metadata-types/text/class-tainacan-text.php
@@ -16,7 +16,14 @@ class Text extends Metadata_Type {
         parent::set_primitive_type('string');
 		parent::set_component('tainacan-text');
 		$this->set_name( __('Text', 'tainacan') );
-        $this->set_description( __('A simple, one line, text input', 'tainacan') );
+		$this->set_description( __('A simple, one line, text input', 'tainacan') );
+		// $this->set_preview_template('
+		// 	<div>
+		// 		<div class="control is-clearfix">
+		// 			<input type="text" autocomplete="on" class="input"> 
+		// 		</div>
+		// 	</div>
+		// ');
     }
 
     /**