diff --git a/iq_progressive_decoupler.libraries.yml b/iq_progressive_decoupler.libraries.yml
index 309865b..e00a8fb 100644
--- a/iq_progressive_decoupler.libraries.yml
+++ b/iq_progressive_decoupler.libraries.yml
@@ -6,6 +6,7 @@ initialize:
   js:
     //cdnjs.cloudflare.com/ajax/libs/twig.js/0.8.9/twig.min.js: { type: external, minified: true }
     resources/js/twig-functions.js: {}
+    resources/js/fieldmapper.js: {}
     resources/js/init.js: {}
   dependencies:
     - core/jquery
diff --git a/resources/js/fieldmapper.js b/resources/js/fieldmapper.js
new file mode 100644
index 0000000..5d04b18
--- /dev/null
+++ b/resources/js/fieldmapper.js
@@ -0,0 +1,43 @@
+/**
+ * Field mapper class for rendering patterns.
+ *
+ * @constructor
+ * @param {Object} item - object containing the data to be rendered
+ * @param {Object} mapping  - object containing the mapping
+ */
+
+iq_progessive_decoupler_FieldMapper = function (item, mapping) {
+  var self = this;
+  self.item = item;
+  self.mapping = mapping;
+
+  /**
+   * Apply mapping to item
+   */
+  self.applyMappging = function (item = self.item, mapping = self.mapping) {
+    let output = {};
+    Object.keys(mapping).forEach(function(key){
+      output[key] = self.mapField(item, mapping[key]);
+    });
+    return output;
+  };
+
+
+  /**
+   * Apply mapping to item
+   */
+  self.mapField = function (item, mapping) {
+    if (mapping.type == 'static') {
+      return mapping.value;
+    }
+    if (mapping.type == 'array') {
+      var arrayItem = eval(mapping.value);
+      arrayItem = arrayItem.map(function(item){
+        return self.applyMappging(item, mapping.mapping);
+      });
+      return arrayItem;
+    }
+    return eval(mapping.value);
+  };
+
+}
diff --git a/src/Plugin/Block/DecoupledBlockBase.php b/src/Plugin/Block/DecoupledBlockBase.php
index 060e192..15f348c 100644
--- a/src/Plugin/Block/DecoupledBlockBase.php
+++ b/src/Plugin/Block/DecoupledBlockBase.php
@@ -7,6 +7,9 @@
 use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 use Drupal\ui_patterns\UiPatternsManager;
+use Drupal\Component\Serialization\Yaml;
+use Symfony\Component\Yaml\Yaml as YamlParser;
+use Drupal\Component\Serialization\Yaml as YamlSerializer;
 
 /**
  * Base block for decoupling.
@@ -63,6 +66,13 @@ public function blockForm($form, FormStateInterface $form_state) {
       '#default_value' => isset($this->configuration['ui_pattern']) ? $this->configuration['ui_pattern'] : NULL,
       '#required' => TRUE,
     ];
+
+    $form['field_mapping'] = [
+      '#type' => 'textarea',
+      '#title' => $this->t('Field mapping'),
+      '#default_value' => isset($this->configuration['field_mapping']) ? Yaml::decode($this->configuration['field_mapping']) : NULL,
+    ];
+
     return $form;
   }
 
@@ -82,8 +92,13 @@ public function build() {
     $build['#attached']['drupalSettings']['progressive_decoupler'][$this->configuration['block_id']] = [
       'template' => \file_get_contents($pattern['base path'] . '/' . $pattern['template'] . '.html.twig'),
       'ui_pattern' => $this->configuration['ui_pattern'],
+      'type' => $this->getPluginId(),
     ];
 
+    if (isset($this->configuration['field_mapping'])) {
+      $build['#attached']['drupalSettings']['progressive_decoupler'][$this->configuration['block_id']]['field_mapping'] = YamlParser::parse(YamlSerializer::decode($this->configuration['field_mapping']));
+    }
+
     return $build;
 
   }
@@ -95,6 +110,7 @@ public function blockSubmit($form, FormStateInterface $form_state) {
     parent::blockSubmit($form, $form_state);
     $this->configuration['ui_pattern'] = $form_state->getValue('ui_pattern');
     $this->configuration['block_id'] = str_replace('_', '-', 'block-' . $form['id']['#default_value']);
+    $this->configuration['field_mapping'] = Yaml::encode($form_state->getValue('field_mapping'));
   }
 
 }