diff --git a/core/src/main/java/com/themecleanflex/models/ExternalModel.java b/core/src/main/java/com/themecleanflex/models/ExternalModel.java
new file mode 100644
index 00000000..dc056b0b
--- /dev/null
+++ b/core/src/main/java/com/themecleanflex/models/ExternalModel.java
@@ -0,0 +1,78 @@
+package com.themecleanflex.models;
+
+import com.peregrine.nodetypes.models.AbstractComponent;
+import com.peregrine.nodetypes.models.IComponent;
+import com.peregrine.nodetypes.models.Container;
+import org.apache.sling.api.resource.Resource;
+import org.apache.sling.models.annotations.Default;
+import org.apache.sling.models.annotations.DefaultInjectionStrategy;
+import org.apache.sling.models.annotations.Exporter;
+import org.apache.sling.models.annotations.Model;
+import java.util.List;
+
+import javax.inject.Inject;
+import javax.inject.Named;
+
+/*
+    //GEN[:DATA
+    {
+  "definitions": {
+    "External": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {
+        "text": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-type": "texteditor"
+        }
+      }
+    }
+  },
+  "name": "External",
+  "componentPath": "themecleanflex/components/external",
+  "package": "com.themecleanflex.models",
+  "modelName": "External",
+  "classNameParent": "AbstractComponent"
+}
+//GEN]
+*/
+
+//GEN[:DEF
+@Model(
+        adaptables = Resource.class,
+        resourceType = "themecleanflex/components/external",
+        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+        adapters = IComponent.class
+)
+@Exporter(
+        name = "jackson",
+        extensions = "json"
+)
+
+//GEN]
+public class ExternalModel extends AbstractComponent {
+
+    public ExternalModel(Resource r) { super(r); }
+
+    //GEN[:INJECT
+    	/* {"type":"string","x-source":"inject","x-form-type":"texteditor"} */
+	@Inject
+	private String text;
+
+
+//GEN]
+
+    //GEN[:GETTERS
+    	/* {"type":"string","x-source":"inject","x-form-type":"texteditor"} */
+	public String getText() {
+		return text;
+	}
+
+
+//GEN]
+
+    //GEN[:CUSTOMGETTERS
+    //GEN]
+
+}
diff --git a/fragments/external/hatch.js b/fragments/external/hatch.js
new file mode 100644
index 00000000..c478156d
--- /dev/null
+++ b/fragments/external/hatch.js
@@ -0,0 +1,5 @@
+module.exports = {
+    convert: function($, f) {
+        f.bindPath($)
+    }
+}
\ No newline at end of file
diff --git a/fragments/external/model.json b/fragments/external/model.json
new file mode 100644
index 00000000..c80c4cc7
--- /dev/null
+++ b/fragments/external/model.json
@@ -0,0 +1,15 @@
+{
+  "definitions": {
+    "External": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {
+        "htmlCode": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-type": "textarea"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/fragments/external/sample.json b/fragments/external/sample.json
new file mode 100644
index 00000000..641e4369
--- /dev/null
+++ b/fragments/external/sample.json
@@ -0,0 +1,7 @@
+{
+  "title": "External",
+  "group": "",
+  "model": {
+    "htmlCode": "<h1>code</h1>"
+  }
+}
\ No newline at end of file
diff --git a/fragments/external/template.html b/fragments/external/template.html
new file mode 100644
index 00000000..e44ce188
--- /dev/null
+++ b/fragments/external/template.html
@@ -0,0 +1 @@
+<div>external</div>
\ No newline at end of file
diff --git a/fragments/external/template.vue b/fragments/external/template.vue
new file mode 100644
index 00000000..65a63536
--- /dev/null
+++ b/fragments/external/template.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="p-5" v-if="model.text == undefined">no content defined for component</div>
+    <div v-bind:data-per-path="model.path" v-html="model.text">
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['model']
+    }
+</script>
+
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/.content.xml
new file mode 100644
index 00000000..a8679c9b
--- /dev/null
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/.content.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Component"
+          jcr:title="External"
+          group=""
+          />
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/dialog.json b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/dialog.json
new file mode 100644
index 00000000..b77d0cbc
--- /dev/null
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/dialog.json
@@ -0,0 +1,13 @@
+{
+    "fields":[
+        {
+            "type":"material-textarea",
+            "rows":50,
+            "placeholder":"text",
+            "label":"HTML Code",
+            "model":"text",
+            "hint": "Embed external code with caution",
+            "x_form_group": "content"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/template.vue
new file mode 100644
index 00000000..1476f721
--- /dev/null
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/external/template.vue
@@ -0,0 +1,14 @@
+<template>
+    <div v-bind:data-per-path="model.path" style="width:100%; padding: 6px;">
+        <div class="p-5" v-if="model.text == undefined">no content defined for component</div>
+        <div v-html="model.text" style="padding:6px;">
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['model']
+    }
+</script>
+