diff --git a/www/api/data/components/component-remote/actions/syncRemoteComponent.js b/www/api/data/components/component-remote/actions/syncRemoteComponent.js
new file mode 100644
index 0000000..5bd8488
--- /dev/null
+++ b/www/api/data/components/component-remote/actions/syncRemoteComponent.js
@@ -0,0 +1,36 @@
+function(remote) {
+  let original = {
+    "url" : simplyRawApi.url,
+    "headers" : simplyRawApi.headers
+  };
+  simplyRawApi.url = remote.url;
+  simplyRawApi.headers = {
+    "accept" : "application/json"
+  };
+  let fetchFunctions = {
+    "base-component" : simplyDataApi.getBaseComponent,
+    "component" : simplyDataApi.getComponent,
+    "page" : simplyDataApi.getPage,
+    "page-frame" : simplyDataApi.getPageFrame
+  };
+  
+  fetchFunctions[remote.type](remote.component)
+  .then(function(parts) {    
+    parts.forEach(function(part) {
+      if (part.id == "meta") {
+        return;
+      }
+      editor.pageData.component.parts[part.id] = JSON.parse(part.contents);
+    });
+  })
+  .then(function() {
+    for (i in original) {
+      simplyRawApi[i] = original[i];
+    }
+  })
+  .catch(function() {
+   for (i in original) {
+      simplyRawApi[i] = original[i];
+    }
+  });
+}
\ No newline at end of file
diff --git a/www/api/data/components/component-remote/commands/syncRemoteComponent.js b/www/api/data/components/component-remote/commands/syncRemoteComponent.js
new file mode 100644
index 0000000..2709058
--- /dev/null
+++ b/www/api/data/components/component-remote/commands/syncRemoteComponent.js
@@ -0,0 +1,3 @@
+function(el) {
+  return simplyApp.actions.syncRemoteComponent(editor.pageData.component.remote);
+}
\ No newline at end of file
diff --git a/www/api/data/components/component-remote/componentTemplates/componentRemote.html b/www/api/data/components/component-remote/componentTemplates/componentRemote.html
new file mode 100644
index 0000000..903bc39
--- /dev/null
+++ b/www/api/data/components/component-remote/componentTemplates/componentRemote.html
@@ -0,0 +1,14 @@
+<details class="sb-component">
+  <summary title="Remote API URL to fetch this component from">
+    Remote API URL
+  </summary>
+  <input placeholder="https://..." data-simply-field="component.remote.url">
+  <select data-simply-field="component.remote.type">
+    <option value="base-component">Base component</option>
+    <option value="component">Component</option>
+    <option value="page-frame">Page frame</option>
+    <option value="page">Page</option>
+  </select>
+  <input placeholder="component path" data-simply-field="component.remote.component"><br>
+  <button class="sb-button" data-simply-command="syncRemoteComponent">Sync from remote</button>
+</details>
\ No newline at end of file
diff --git a/www/api/data/components/component-remote/meta.json b/www/api/data/components/component-remote/meta.json
new file mode 100644
index 0000000..6840e1a
--- /dev/null
+++ b/www/api/data/components/component-remote/meta.json
@@ -0,0 +1 @@
+{"id":"component-remote","description":"","remoteURL":"","remote":{"url":"","type":"base-component","component":""}}
\ No newline at end of file
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index 793fe33..982d80a 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -1256,6 +1256,42 @@
                   return 'name';
               }
             },
+            "syncRemoteComponent" : function(remote) {
+              let original = {
+                "url" : simplyRawApi.url,
+                "headers" : simplyRawApi.headers
+              };
+              simplyRawApi.url = remote.url;
+              simplyRawApi.headers = {
+                "accept" : "application/json"
+              };
+              let fetchFunctions = {
+                "base-component" : simplyDataApi.getBaseComponent,
+                "component" : simplyDataApi.getComponent,
+                "page" : simplyDataApi.getPage,
+                "page-frame" : simplyDataApi.getPageFrame
+              };
+              
+              fetchFunctions[remote.type](remote.component)
+              .then(function(parts) {    
+                parts.forEach(function(part) {
+                  if (part.id == "meta") {
+                    return;
+                  }
+                  editor.pageData.component.parts[part.id] = JSON.parse(part.contents);
+                });
+              })
+              .then(function() {
+                for (i in original) {
+                  simplyRawApi[i] = original[i];
+                }
+              })
+              .catch(function() {
+               for (i in original) {
+                  simplyRawApi[i] = original[i];
+                }
+              });
+            },
             "browse" : function(path) {
               return simplyDataApi.browse(path)
                 .catch(function(error) {
@@ -1691,6 +1727,9 @@
             "addRawApiMethod" : function(el) {
               editor.pageData.component.parts.rawApi.push({});
             },
+            "syncRemoteComponent" : function(el) {
+              return simplyApp.actions.syncRemoteComponent(editor.pageData.component.remote);
+            },
             "addRoute" : function(el) {
               editor.pageData.component.parts.routes.push({});
             },
@@ -2959,6 +2998,22 @@
       </div>
     </details>
     </template>
+    <template id="componentRemote">
+      <details class="sb-component">
+      <summary title="Remote API URL to fetch this component from">
+        Remote API URL
+      </summary>
+      <input placeholder="https://..." data-simply-field="component.remote.url">
+      <select data-simply-field="component.remote.type">
+        <option value="base-component">Base component</option>
+        <option value="component">Component</option>
+        <option value="page-frame">Page frame</option>
+        <option value="page">Page</option>
+      </select>
+      <input placeholder="component path" data-simply-field="component.remote.component"><br>
+      <button class="sb-button" data-simply-command="syncRemoteComponent">Sync from remote</button>
+    </details>
+    </template>
     <template id="componentRoutes">
       <details class="sb-component">
       <summary data-simply-command="initEditors" title="Routes provide a translation from a URL to something the app should do. Routes make use of actions to fetch or store data">
@@ -3153,6 +3208,7 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
           <button class="sb-button" data-simply-command="deleteBaseComponent">Delete</button>
         </div>
       </div>
+      <div is="simply-component" rel="componentRemote"></div>
       <div is="simply-component" rel="componentDescription"></div>
       <div is="simply-component" rel="componentHeadHtml"></div>
       <div is="simply-component" rel="componentBodyHtml"></div>
@@ -3201,6 +3257,7 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
           <button class="sb-button" data-simply-command="deleteComponent">Delete</button>
         </div>
       </div>
+      <div is="simply-component" rel="componentRemote"></div>
       <div is="simply-component" rel="componentDescription"></div>
       <div is="simply-component" rel="componentComponentTemplate"></div>
       <div is="simply-component" rel="componentComponentCss"></div>
@@ -3252,6 +3309,7 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
           <button class="sb-button" data-simply-command="deletePage">Delete</button>
         </div>
       </div>
+      <div is="simply-component" rel="componentRemote"></div>
       <div is="simply-component" rel="componentDescription"></div>
       <div is="simply-component" rel="componentPageTemplate"></div>
       <div is="simply-component" rel="componentPageCss"></div>
@@ -3272,6 +3330,7 @@ <h1>Edit page frame</h1>
           <button class="sb-button" data-simply-command="savePageFrame">Save</button>
         </div>
       </div>
+      <div is="simply-component" rel="componentRemote"></div>
       <div is="simply-component" rel="componentDescription"></div>
       <div is="simply-component" rel="componentPageFrame"></div>
     </main>
diff --git a/www/api/data/pages/base-component/pageTemplates/Edit base component.html b/www/api/data/pages/base-component/pageTemplates/Edit base component.html
index e201d7b..70884ae 100644
--- a/www/api/data/pages/base-component/pageTemplates/Edit base component.html	
+++ b/www/api/data/pages/base-component/pageTemplates/Edit base component.html	
@@ -6,6 +6,7 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       <button class="sb-button" data-simply-command="deleteBaseComponent">Delete</button>
     </div>
   </div>
+  <div is="simply-component" rel="componentRemote"></div>
   <div is="simply-component" rel="componentDescription"></div>
   <div is="simply-component" rel="componentHeadHtml"></div>
   <div is="simply-component" rel="componentBodyHtml"></div>
diff --git a/www/api/data/pages/component/pageTemplates/Edit component.html b/www/api/data/pages/component/pageTemplates/Edit component.html
index 9676ba0..e6eb9b2 100644
--- a/www/api/data/pages/component/pageTemplates/Edit component.html	
+++ b/www/api/data/pages/component/pageTemplates/Edit component.html	
@@ -6,6 +6,7 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <button class="sb-button" data-simply-command="deleteComponent">Delete</button>
     </div>
   </div>
+  <div is="simply-component" rel="componentRemote"></div>
   <div is="simply-component" rel="componentDescription"></div>
   <div is="simply-component" rel="componentComponentTemplate"></div>
   <div is="simply-component" rel="componentComponentCss"></div>
diff --git a/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html b/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html
index 9967414..e4f372c 100644
--- a/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html	
+++ b/www/api/data/pages/page-frame/pageTemplates/Edit page frame.html	
@@ -5,6 +5,7 @@ <h1>Edit page frame</h1>
       <button class="sb-button" data-simply-command="savePageFrame">Save</button>
     </div>
   </div>
+  <div is="simply-component" rel="componentRemote"></div>
   <div is="simply-component" rel="componentDescription"></div>
   <div is="simply-component" rel="componentPageFrame"></div>
 </main>
\ No newline at end of file
diff --git a/www/api/data/pages/page/pageTemplates/Edit page.html b/www/api/data/pages/page/pageTemplates/Edit page.html
index 445ff0c..fa0e777 100644
--- a/www/api/data/pages/page/pageTemplates/Edit page.html	
+++ b/www/api/data/pages/page/pageTemplates/Edit page.html	
@@ -6,6 +6,7 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <button class="sb-button" data-simply-command="deletePage">Delete</button>
     </div>
   </div>
+  <div is="simply-component" rel="componentRemote"></div>
   <div is="simply-component" rel="componentDescription"></div>
   <div is="simply-component" rel="componentPageTemplate"></div>
   <div is="simply-component" rel="componentPageCss"></div>