diff --git a/components/component-import-url/actions/build.js b/components/component-import-url/actions/build.js
new file mode 100644
index 0000000..57e56f3
--- /dev/null
+++ b/components/component-import-url/actions/build.js
@@ -0,0 +1,34 @@
+function(builderTemplate, data) {
+  var build = builderTemplate;
+  let replacements = {
+    "shortcuts" : editor.transformers.simplyPreviewShortcuts.render(data.shortcuts ?? []),
+    "actions" : editor.transformers.simplyPreviewActions.render(data.actions ?? []),
+    "commands" : editor.transformers.simplyPreviewCommands.render(data.commands ?? []),
+    "dataApi" : editor.transformers.simplyPreviewDataApi.render(data.dataApi ?? []),
+    "rawApi" : editor.transformers.simplyPreviewRawApi.render(data.rawApi ?? []),
+    "routes" : editor.transformers.simplyPreviewRoutes.render(data.routes ?? []),
+    "dataSources" : editor.transformers.simplyPreviewDataSources.render(data.dataSources ?? []),
+    "transformers" : editor.transformers.simplyPreviewTransformers.render(data.transformers ?? []),
+    "sorters" : editor.transformers.simplyPreviewSorters.render(data.sorters ?? []),
+    "pageTemplates" :editor.transformers.simplyPreviewPageTemplates.render(data.pageTemplates ?? []),
+    "pageCss" : editor.transformers.simplyPreviewPageCss.render(data.pageCss ?? []),
+    "componentCss" : editor.transformers.simplyPreviewComponentCss.render(data.componentCss ?? []),
+    "componentTemplates" : editor.transformers.simplyPreviewComponentTemplates.render(data.componentTemplates ?? []),
+    "headHtml": editor.transformers.simplyPreviewHeadHtml.render(data.headHtml ?? []),
+    "footHtml": editor.transformers.simplyPreviewFootHtml.render(data.footHtml ?? []),
+    "bodyHtml" : editor.transformers.simplyPreviewBodyHtml.render(data.bodyHtml ?? [])
+  };
+
+  Object.keys(replacements).forEach(function(replacement) {
+    matches = build.match("(\\s*){{" + replacement + "}}");
+    if (matches) {
+      let indentedNewline = matches[1];
+      if (indentedNewline == '') {
+        indentedNewline = "\n";
+      }
+      build = build.replace("{{" + replacement + "}}", replacements[replacement].replace(/\n/g, indentedNewline));
+    }
+  });
+
+  return build;
+}
\ No newline at end of file
diff --git a/components/component-import-url/commands/addImportUrl.js b/components/component-import-url/commands/addImportUrl.js
new file mode 100644
index 0000000..8b0960d
--- /dev/null
+++ b/components/component-import-url/commands/addImportUrl.js
@@ -0,0 +1,3 @@
+function(el) {
+  editor.pageData.component.parts.importUrls.push({});
+}
\ No newline at end of file
diff --git a/components/component-import-url/componentCss/simplycode-import-url.css b/components/component-import-url/componentCss/simplycode-import-url.css
new file mode 100644
index 0000000..e8b4b6a
--- /dev/null
+++ b/components/component-import-url/componentCss/simplycode-import-url.css
@@ -0,0 +1,5 @@
+.simplycode-editor-url input {
+  width: 100%;
+  padding: 10px;
+  font-size: 1.2em;
+}
\ No newline at end of file
diff --git a/components/component-import-url/componentTemplates/componentImportUrl.html b/components/component-import-url/componentTemplates/componentImportUrl.html
new file mode 100644
index 0000000..9b26cfc
--- /dev/null
+++ b/components/component-import-url/componentTemplates/componentImportUrl.html
@@ -0,0 +1,36 @@
+<details class="simplycode-component">
+  <summary data-simply-command="initEditors" title="These imports are fetched as modules for your project.">
+    <span data-simply-field="count.imports" data-simply-content="attributes" data-simply-attributes="data-count">
+      Import URL
+    </span>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addImportUrl">Add import URL</button>
+    </span>
+  </summary>
+  <div class="simplycode-code-method" data-simply-list="component.parts.importUrls">
+    <template>
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="import" required placeholder="Import name">
+            <label class="simplycode-tab">
+              <input type="radio" name="importEditor" checked value="url" data-simply-field="editor">
+              <span>URL</span>
+            </label>
+          </div>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete import URL</button>
+          </div>
+        </div>
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-url" data-simply-field="editor" data-simply-content="template" data-simply-default-template="url">
+            <template data-simply-template="url">
+              <input type="text" data-simply-field="url" placeholder="https://....">
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</details>
\ No newline at end of file
diff --git a/components/component-import-url/meta.json b/components/component-import-url/meta.json
new file mode 100644
index 0000000..a7653c3
--- /dev/null
+++ b/components/component-import-url/meta.json
@@ -0,0 +1 @@
+{"id":"component-import-url","description":"Edit form for component import URL"}
\ No newline at end of file
diff --git a/components/data-format/dataApi/mergeComponent.js b/components/data-format/dataApi/mergeComponent.js
index 42d929f..1274d24 100644
--- a/components/data-format/dataApi/mergeComponent.js
+++ b/components/data-format/dataApi/mergeComponent.js
@@ -118,6 +118,23 @@ function(component) {
           componentPart.contents = JSON.stringify(Object.values(contents));
         }
         break;
+      case "importUrls":
+        if (typeof componentPart.contents === "object") {
+          var contents = {};
+          componentPart.contents.forEach(function(partFile) {
+            if (partFile.id.match(/\.url$/)) {
+              partId = partFile.id.replace(/\.url$/, '');
+              if (typeof contents[partId] === "undefined") {
+                contents[partId] = {
+                  import : partId
+                }
+              }
+              contents[partId]['url'] = partFile.contents;
+            }
+          });
+          componentPart.contents = JSON.stringify(Object.values(contents));
+        }
+        break;
       case "rawApi":
       case "dataApi":
         if (typeof componentPart.contents === "object") {
diff --git a/components/data-format/dataApi/savePart.js b/components/data-format/dataApi/savePart.js
index 07053da..8329632 100644
--- a/components/data-format/dataApi/savePart.js
+++ b/components/data-format/dataApi/savePart.js
@@ -109,6 +109,22 @@ function(basePath, part, contents) {
         }
       });
       break;
+    case "importUrls":
+      contents.forEach(function(componentPart, componentIndex) {
+        if (!componentPart.url) {
+          throw new Error("Required part name is empty");
+        }
+        if (componentPart.deleted == "true") {
+          results.push(simplyRawApi.delete(basePath + "/" + part + "/" + componentPart.import + ".url"));
+          contents.splice(componentIndex, 1);
+        } else {
+          results.push(simplyRawApi.putRaw(
+            basePath + "/" + part + "/" + componentPart.import + ".url", {},
+            componentPart.url
+          ));
+        }
+      });
+      break;
     case "rawApi":
     case "dataApi":
       contents.forEach(function(componentPart, componentIndex) {
diff --git a/components/navigation/actions/getMainMenu.js b/components/navigation/actions/getMainMenu.js
index 6c7a731..e2154b1 100644
--- a/components/navigation/actions/getMainMenu.js
+++ b/components/navigation/actions/getMainMenu.js
@@ -36,6 +36,13 @@ function() {
             href : "#builders",
             "data-path" : "builders"
           }
+        },
+        {
+          item : {
+            innerHTML : "Imports",
+            href : "#imports",
+            "data-path" : "imports"
+          }
         }
       ]
     );
diff --git a/components/simply-toolbar/componentTemplates/simply-toolbar-import.html b/components/simply-toolbar/componentTemplates/simply-toolbar-import.html
new file mode 100644
index 0000000..86b59ef
--- /dev/null
+++ b/components/simply-toolbar/componentTemplates/simply-toolbar-import.html
@@ -0,0 +1,28 @@
+<div class="simply-toolbar-title">
+  <simply-render rel="logo"></simply-render>
+</div>
+<button data-simply-accesskey="Control+s" class="ds-button simply-toolbar-button" data-simply-command="saveImport">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#save">
+    </use></svg>
+  Save
+</button>
+<button class="ds-button simply-toolbar-button" data-simply-command="deleteImport">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#trash">
+    </use></svg>
+  Delete
+</button>
+<span class="simply-toolbar-push-right"></span>
+<button class="ds-button simply-toolbar-button" data-simply-command="preview">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#eye">
+    </use></svg>
+  Preview
+</button>
+<button disabled class="ds-button simply-toolbar-button">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#check">
+    </use></svg>
+  Publish
+</button>
\ No newline at end of file
diff --git a/components/simply-toolbar/componentTemplates/simply-toolbar.html b/components/simply-toolbar/componentTemplates/simply-toolbar.html
index 7113990..a504805 100644
--- a/components/simply-toolbar/componentTemplates/simply-toolbar.html
+++ b/components/simply-toolbar/componentTemplates/simply-toolbar.html
@@ -1,6 +1,7 @@
 <nav class="simply-toolbar simply-toolbar-main" data-simply-field="page" data-simply-section="simply-code-management" data-simply-content="template" data-simply-default-template="default" data-simply-default-value="default">
   <template data-simply-template="default" rel="simply-toolbar-default"></template>
   <template data-simply-template="Edit builder" rel="simply-toolbar-builder"></template>
+  <template data-simply-template="Edit import" rel="simply-toolbar-import"></template>
   <template data-simply-template="Edit page" rel="simply-toolbar-page"></template>
   <template data-simply-template="Edit component" rel="simply-toolbar-component"></template>
   <template data-simply-template="Edit base component" rel="simply-toolbar-base-component"></template>
diff --git a/generated.html b/generated.html
index a8b0d0a..47d18a5 100644
--- a/generated.html
+++ b/generated.html
@@ -949,6 +949,12 @@
       .simplycode-editor-code textarea {
         margin-top: -1px;
       }
+      /* simplycode-import-url (component/component-import-url) */
+      .simplycode-editor-url input {
+        width: 100%;
+        padding: 10px;
+        font-size: 1.2em;
+      }
       /* QUnit iframe (component/component-qunit-tests) */
       .qunit-code {
         display: none;
@@ -1509,6 +1515,23 @@
                     componentPart.contents = JSON.stringify(Object.values(contents));
                   }
                   break;
+                case "importUrls":
+                  if (typeof componentPart.contents === "object") {
+                    var contents = {};
+                    componentPart.contents.forEach(function(partFile) {
+                      if (partFile.id.match(/\.url$/)) {
+                        partId = partFile.id.replace(/\.url$/, '');
+                        if (typeof contents[partId] === "undefined") {
+                          contents[partId] = {
+                            import : partId
+                          }
+                        }
+                        contents[partId]['url'] = partFile.contents;
+                      }
+                    });
+                    componentPart.contents = JSON.stringify(Object.values(contents));
+                  }
+                  break;
                 case "rawApi":
                 case "dataApi":
                   if (typeof componentPart.contents === "object") {
@@ -1915,6 +1938,22 @@
                   }
                 });
                 break;
+              case "importUrls":
+                contents.forEach(function(componentPart, componentIndex) {
+                  if (!componentPart.url) {
+                    throw new Error("Required part name is empty");
+                  }
+                  if (componentPart.deleted == "true") {
+                    results.push(simplyRawApi.delete(basePath + "/" + part + "/" + componentPart.import + ".url"));
+                    contents.splice(componentIndex, 1);
+                  } else {
+                    results.push(simplyRawApi.putRaw(
+                      basePath + "/" + part + "/" + componentPart.import + ".url", {},
+                      componentPart.url
+                    ));
+                  }
+                });
+                break;
               case "rawApi":
               case "dataApi":
                 contents.forEach(function(componentPart, componentIndex) {
@@ -2407,6 +2446,74 @@
               return components;
             });
           },
+          // page/import
+          "deleteImport" : function(component) {
+            return simplyRawApi.delete("imports/" + component)
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("deleteImport failed", response.status);
+            });
+          },
+          // page/import
+          "deleteImportPart" : function(component, part) {
+            return simplyRawApi.delete("imports/" + component + "/" + part)
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("deleteImportPart failed", response.status);
+            });
+          },
+          // page/import
+          "getImport" : function(component) {
+            return simplyRawApi.get("imports/" + component)
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("getImport failed", response.status);
+            })
+              .then(function(component) {
+              return simplyDataApi.mergeComponent(component);
+            });
+          },
+          // page/import
+          "saveImportPart" : function(component, part, contents) {
+            return simplyDataApi.savePart("imports/" + component, part, contents)
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              // retry the call once
+              return simplyDataApi.savePart("imports/" + component, part, contents)
+                .then(function(response) {
+                if (response.status === 200) {
+                  return response.json();
+                }
+                throw new Error("saveImportPart failed", response.status);
+              });
+            });
+          },
+          // page/imports
+          "listImports" : function() {
+            return simplyRawApi.get("imports")
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("listImports failed", response.status);
+            })
+              .then(function(components) {
+              components.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.baseType = 'import';
+                component.description = component.contents.description;
+              });
+              return components;
+            });
+          },
           // page/page
           "deletePage" : function(component) {
             return simplyRawApi.delete("pages/" + component)
@@ -2639,6 +2746,41 @@
             
               return build;
             },
+            // component/component-import-url
+            "build" : function(builderTemplate, data) {
+              var build = builderTemplate;
+              let replacements = {
+                "shortcuts" : editor.transformers.simplyPreviewShortcuts.render(data.shortcuts ?? []),
+                "actions" : editor.transformers.simplyPreviewActions.render(data.actions ?? []),
+                "commands" : editor.transformers.simplyPreviewCommands.render(data.commands ?? []),
+                "dataApi" : editor.transformers.simplyPreviewDataApi.render(data.dataApi ?? []),
+                "rawApi" : editor.transformers.simplyPreviewRawApi.render(data.rawApi ?? []),
+                "routes" : editor.transformers.simplyPreviewRoutes.render(data.routes ?? []),
+                "dataSources" : editor.transformers.simplyPreviewDataSources.render(data.dataSources ?? []),
+                "transformers" : editor.transformers.simplyPreviewTransformers.render(data.transformers ?? []),
+                "sorters" : editor.transformers.simplyPreviewSorters.render(data.sorters ?? []),
+                "pageTemplates" :editor.transformers.simplyPreviewPageTemplates.render(data.pageTemplates ?? []),
+                "pageCss" : editor.transformers.simplyPreviewPageCss.render(data.pageCss ?? []),
+                "componentCss" : editor.transformers.simplyPreviewComponentCss.render(data.componentCss ?? []),
+                "componentTemplates" : editor.transformers.simplyPreviewComponentTemplates.render(data.componentTemplates ?? []),
+                "headHtml": editor.transformers.simplyPreviewHeadHtml.render(data.headHtml ?? []),
+                "footHtml": editor.transformers.simplyPreviewFootHtml.render(data.footHtml ?? []),
+                "bodyHtml" : editor.transformers.simplyPreviewBodyHtml.render(data.bodyHtml ?? [])
+              };
+            
+              Object.keys(replacements).forEach(function(replacement) {
+                matches = build.match("(\\s*){{" + replacement + "}}");
+                if (matches) {
+                  let indentedNewline = matches[1];
+                  if (indentedNewline == '') {
+                    indentedNewline = "\n";
+                  }
+                  build = build.replace("{{" + replacement + "}}", replacements[replacement].replace(/\n/g, indentedNewline));
+                }
+              });
+            
+              return build;
+            },
             // component/navigation
             "browse" : function(path) {
               return simplyDataApi.browse(path)
@@ -2685,6 +2827,13 @@
                         href : "#builders",
                         "data-path" : "builders"
                       }
+                    },
+                    {
+                      item : {
+                        innerHTML : "Imports",
+                        href : "#imports",
+                        "data-path" : "imports"
+                      }
                     }
                   ]
                 );
@@ -2807,6 +2956,45 @@
                 return [];
               });
             },
+            // page/import
+            "deleteImport" : function(component) {
+              return simplyDataApi.deleteImport(component);
+            },
+            // page/import
+            "getImport" : function(component) {
+              return simplyDataApi.getImport(component);
+            },
+            // page/import
+            "saveImport" : function(component) {
+              var promises = [];
+              for (var name in component.parts) {
+                if (component.parts[name].length) { 
+                  promises.push(simplyDataApi.saveImportPart(component.id, name, component.parts[name]));
+                } else {
+                  editor.pageData.parts.forEach(function(part) {
+                    if (part.id == name) {
+                      promises.push(simplyDataApi.deleteImportPart(component.id, name));
+                    }
+                  });
+                }
+              };
+            
+              var meta = clone(component);
+              delete meta.parts;
+              promises.push(simplyDataApi.saveImportPart(meta.id, "meta", meta));
+            
+              return Promise.all(promises)
+                .then(function() {
+                return true;
+              });
+            },
+            // page/imports
+            "listImports" : function() {
+              return simplyDataApi.listImports()
+                .catch(function(error) {
+                return [];
+              });
+            },
             // page/page
             "deletePage" : function(component) {
               return simplyDataApi.deletePage(component);
@@ -3188,6 +3376,10 @@
             "addHeadHtml" : function(el) {
               editor.pageData.component.parts.headHtml.push({});
             },
+            // component/component-import-url
+            "addImportUrl" : function(el) {
+              editor.pageData.component.parts.importUrls.push({});
+            },
             // component/component-page-css
             "addPageCss" : function(el) {
               editor.pageData.component.parts.pageCss.push({});
@@ -3439,6 +3631,53 @@
                 document.location.hash="components/" + newComponent.id;
               });
             },
+            // page/import
+            "deleteImport" : function() {
+              if (!confirm("Delete import?")) {
+                return;
+              }
+              simplyApp.actions.deleteImport(
+                editor.pageData.component.id
+              )
+                .then(function() {
+                editor.pageData.alerts.unshift({
+                  "data-simply-template" : "info",
+                  "message" : "Import deleted.",
+                  "state" : "new"
+                });
+                document.location.hash="imports/";
+              });
+            },
+            // page/import
+            "saveImport" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
+              simplyApp.actions.saveImport(editor.pageData.component)
+                .then(function() {
+                editor.pageData.alerts.unshift({
+                  "data-simply-template" : "info",
+                  "message" : "Import saved.",
+                  "state" : "new"
+                });
+              });
+            },
+            // page/imports
+            "createImport" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
+              var newComponent = editor.pageData.newComponent;
+              simplyApp.actions.saveImport(newComponent)
+                .then(function() {
+                editor.pageData.alerts.unshift({
+                  "data-simply-template" : "info",
+                  "message" : "Import created.",
+                  "state" : "new"
+                });
+                document.location.hash="imports/" + newComponent.id;
+              });
+            },
             // page/page
             "deletePage" : function() {
               if (!confirm("Delete page?")) {
@@ -3733,6 +3972,45 @@
                 editor.pageData.page = "Edit component";
               });
             },
+            // page/import
+            "#imports/:component" : function(params) {
+              editor.pageData.app = {};
+              simplyApp.actions.getAppData()
+                .then(function(appData) {
+                editor.pageData.app = appData;
+              })
+                .then(function() {
+                return simplyApp.actions.getImport(params.component);
+              })
+                .then(function(parts) {
+                var component = {
+                  id : params.component
+                };
+            
+                parts = parts.filter(function(part) {
+                  if (part.id == "meta") {
+                    component = JSON.parse(part.contents);
+                    component.id = params.component;
+                    return false;
+                  }
+                  return true;
+                });
+                if (typeof component.parts === "undefined") {
+                  component.parts = {
+                    importTemplates : []
+                  };
+                }
+                var count = {};
+                parts.forEach(function(part) {
+                  component.parts[part.id] = JSON.parse(part.contents);
+                  count[part.id] = component.parts[part.id].length;
+                });
+                editor.pageData.component = component;
+                editor.pageData.parts = parts;
+                editor.pageData.count = count;
+                editor.pageData.page = "Edit import";
+              });
+            },
             // page/page
             "#pages/:component" : function(params) {
               editor.pageData.app = {};
@@ -3805,6 +4083,14 @@
                     editor.pageData.page = "List components";
                 });
             },
+            // page/imports
+            "#imports" : function() {
+              simplyApp.actions.listImports()
+                .then(function(components) {
+                editor.pageData.components = components;
+                editor.pageData.page = "Imports";
+              });
+            },
             // page/page-frame
             "#page-frame" : function() {
               simplyApp.actions.getPageFrame()
@@ -4383,6 +4669,45 @@
       </div>
     </details>
     </template>
+    <!-- component/component-import-url-->
+    <template id="componentImportUrl">
+      <details class="simplycode-component">
+      <summary data-simply-command="initEditors" title="These imports are fetched as modules for your project.">
+        <span data-simply-field="count.imports" data-simply-content="attributes" data-simply-attributes="data-count">
+          Import URL
+        </span>
+        <span class="simplycode-controls">
+          <button class="simplycode-button" data-simply-command="addImportUrl">Add import URL</button>
+        </span>
+      </summary>
+      <div class="simplycode-code-method" data-simply-list="component.parts.importUrls">
+        <template>
+          <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+            <div class="simplycode-part-header">
+              <div class="simplycode-tabs">
+                <input class="simplycode-tab" data-simply-field="import" required placeholder="Import name">
+                <label class="simplycode-tab">
+                  <input type="radio" name="importEditor" checked value="url" data-simply-field="editor">
+                  <span>URL</span>
+                </label>
+              </div>
+              <div class="simplycode-options">
+                <button class="simplycode-button" draggable="true">Drag to move</button>
+                <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete import URL</button>
+              </div>
+            </div>
+            <div class="simplycode-editors">
+              <div class="simplycode-editor-url" data-simply-field="editor" data-simply-content="template" data-simply-default-template="url">
+                <template data-simply-template="url">
+                  <input type="text" data-simply-field="url" placeholder="https://....">
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </details>
+    </template>
     <!-- component/component-page-css-->
     <template id="componentPageCss">
       <details class="simplycode-component">
@@ -5106,6 +5431,37 @@
     </button>
     </template>
     <!-- component/simply-toolbar-->
+    <template id="simply-toolbar-import">
+      <div class="simply-toolbar-title">
+      <simply-render rel="logo"></simply-render>
+    </div>
+    <button data-simply-accesskey="Control+s" class="ds-button simply-toolbar-button" data-simply-command="saveImport">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#save">
+        </use></svg>
+      Save
+    </button>
+    <button class="ds-button simply-toolbar-button" data-simply-command="deleteImport">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#trash">
+        </use></svg>
+      Delete
+    </button>
+    <span class="simply-toolbar-push-right"></span>
+    <button class="ds-button simply-toolbar-button" data-simply-command="preview">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#eye">
+        </use></svg>
+      Preview
+    </button>
+    <button disabled class="ds-button simply-toolbar-button">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#check">
+        </use></svg>
+      Publish
+    </button>
+    </template>
+    <!-- component/simply-toolbar-->
     <template id="simply-toolbar-page-frame">
       <div class="simply-toolbar-title">
       <simply-render rel="logo"></simply-render>
@@ -5203,6 +5559,7 @@
       <nav class="simply-toolbar simply-toolbar-main" data-simply-field="page" data-simply-section="simply-code-management" data-simply-content="template" data-simply-default-template="default" data-simply-default-value="default">
       <template data-simply-template="default" rel="simply-toolbar-default"></template>
       <template data-simply-template="Edit builder" rel="simply-toolbar-builder"></template>
+      <template data-simply-template="Edit import" rel="simply-toolbar-import"></template>
       <template data-simply-template="Edit page" rel="simply-toolbar-page"></template>
       <template data-simply-template="Edit component" rel="simply-toolbar-component"></template>
       <template data-simply-template="Edit base component" rel="simply-toolbar-base-component"></template>
@@ -5367,6 +5724,51 @@ <h1>Add component</h1>
         </div>
       </form>
     </main>
+    </template>
+    <!-- page/import-->
+    <template data-simply-template="Edit import">
+      <main>
+      <div class="simplycode-header">
+        <h1>Edit import: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentImportUrl"></simply-render>
+      </form>
+    </main>
+    </template>
+    <!-- page/imports-->
+    <template data-simply-template="Imports">
+      <main>
+      <h1>Imports</h1>
+      <div class="simplycode-component-list" data-simply-list="components">
+        <template>
+          <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="importLink">
+            <h3 data-simply-field="id"></h3>
+            <p class="ds-margin-up" data-simply-field="description"></p>
+          </a>
+        </template>
+      </div>
+      <form action="#">
+        <h1>Add import</h1>
+        <div class="simplycode-part">
+          <div class="simplycode-part-header">
+            <div class="simplycode-tabs">
+              <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+            </div>
+            <div class="simplycode-options">
+              <button class="simplycode-button" data-simply-command="createImport">Create</button>
+            </div>
+          </div>
+          <div class="simplycode-editors">
+            <div class="simplycode-editor-code">
+              <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+            </div>
+          </div>
+        </div>
+      </form>
+    </main>
+    
     </template>
     <!-- page/page-->
     <template data-simply-template="Edit page">
@@ -5926,6 +6328,19 @@ <h1>App preview</h1>
               return this.simplyData;
           }
         },
+        // page/imports
+        "importLink" : {
+          render : function(data) {
+            this.simplyData = data;
+            return {
+              href : "#imports/" + data,
+              innerHTML: data
+            };
+          },
+          extract : function(data) {
+            return this.simplyData;
+          }
+        },
         // page/pages
         "pageLink" : {
           render : function(data) {
diff --git a/pages/import/actions/deleteImport.js b/pages/import/actions/deleteImport.js
new file mode 100644
index 0000000..88854e2
--- /dev/null
+++ b/pages/import/actions/deleteImport.js
@@ -0,0 +1,3 @@
+function(component) {
+  return simplyDataApi.deleteImport(component);
+}
\ No newline at end of file
diff --git a/pages/import/actions/getImport.js b/pages/import/actions/getImport.js
new file mode 100644
index 0000000..7081be9
--- /dev/null
+++ b/pages/import/actions/getImport.js
@@ -0,0 +1,3 @@
+function(component) {
+  return simplyDataApi.getImport(component);
+}
\ No newline at end of file
diff --git a/pages/import/actions/saveImport.js b/pages/import/actions/saveImport.js
new file mode 100644
index 0000000..087636d
--- /dev/null
+++ b/pages/import/actions/saveImport.js
@@ -0,0 +1,23 @@
+function(component) {
+  var promises = [];
+  for (var name in component.parts) {
+    if (component.parts[name].length) { 
+      promises.push(simplyDataApi.saveImportPart(component.id, name, component.parts[name]));
+    } else {
+      editor.pageData.parts.forEach(function(part) {
+        if (part.id == name) {
+          promises.push(simplyDataApi.deleteImportPart(component.id, name));
+        }
+      });
+    }
+  };
+
+  var meta = clone(component);
+  delete meta.parts;
+  promises.push(simplyDataApi.saveImportPart(meta.id, "meta", meta));
+
+  return Promise.all(promises)
+    .then(function() {
+    return true;
+  });
+}
\ No newline at end of file
diff --git a/pages/import/commands/deleteImport.js b/pages/import/commands/deleteImport.js
new file mode 100644
index 0000000..d4dc405
--- /dev/null
+++ b/pages/import/commands/deleteImport.js
@@ -0,0 +1,16 @@
+function() {
+  if (!confirm("Delete import?")) {
+    return;
+  }
+  simplyApp.actions.deleteImport(
+    editor.pageData.component.id
+  )
+    .then(function() {
+    editor.pageData.alerts.unshift({
+      "data-simply-template" : "info",
+      "message" : "Import deleted.",
+      "state" : "new"
+    });
+    document.location.hash="imports/";
+  });
+}
\ No newline at end of file
diff --git a/pages/import/commands/saveImport.js b/pages/import/commands/saveImport.js
new file mode 100644
index 0000000..fbf455c
--- /dev/null
+++ b/pages/import/commands/saveImport.js
@@ -0,0 +1,13 @@
+function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
+  simplyApp.actions.saveImport(editor.pageData.component)
+    .then(function() {
+    editor.pageData.alerts.unshift({
+      "data-simply-template" : "info",
+      "message" : "Import saved.",
+      "state" : "new"
+    });
+  });
+}
\ No newline at end of file
diff --git a/pages/import/dataApi/deleteImport.js b/pages/import/dataApi/deleteImport.js
new file mode 100644
index 0000000..fe60fd6
--- /dev/null
+++ b/pages/import/dataApi/deleteImport.js
@@ -0,0 +1,9 @@
+function(component) {
+  return simplyRawApi.delete("imports/" + component)
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("deleteImport failed", response.status);
+  });
+}
\ No newline at end of file
diff --git a/pages/import/dataApi/deleteImportPart.js b/pages/import/dataApi/deleteImportPart.js
new file mode 100644
index 0000000..2366a7e
--- /dev/null
+++ b/pages/import/dataApi/deleteImportPart.js
@@ -0,0 +1,9 @@
+function(component, part) {
+  return simplyRawApi.delete("imports/" + component + "/" + part)
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("deleteImportPart failed", response.status);
+  });
+}
\ No newline at end of file
diff --git a/pages/import/dataApi/getImport.js b/pages/import/dataApi/getImport.js
new file mode 100644
index 0000000..eb19577
--- /dev/null
+++ b/pages/import/dataApi/getImport.js
@@ -0,0 +1,12 @@
+function(component) {
+  return simplyRawApi.get("imports/" + component)
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("getImport failed", response.status);
+  })
+    .then(function(component) {
+    return simplyDataApi.mergeComponent(component);
+  });
+}
\ No newline at end of file
diff --git a/pages/import/dataApi/saveImportPart.js b/pages/import/dataApi/saveImportPart.js
new file mode 100644
index 0000000..0dc7ea7
--- /dev/null
+++ b/pages/import/dataApi/saveImportPart.js
@@ -0,0 +1,16 @@
+function(component, part, contents) {
+  return simplyDataApi.savePart("imports/" + component, part, contents)
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    // retry the call once
+    return simplyDataApi.savePart("imports/" + component, part, contents)
+      .then(function(response) {
+      if (response.status === 200) {
+        return response.json();
+      }
+      throw new Error("saveImportPart failed", response.status);
+    });
+  });
+}
\ No newline at end of file
diff --git a/pages/import/meta.json b/pages/import/meta.json
new file mode 100644
index 0000000..d93bb9e
--- /dev/null
+++ b/pages/import/meta.json
@@ -0,0 +1 @@
+{"id":"import","description":"Edit page for Import"}
\ No newline at end of file
diff --git a/pages/import/pageTemplates/Edit import.html b/pages/import/pageTemplates/Edit import.html
new file mode 100644
index 0000000..4ad9d21
--- /dev/null
+++ b/pages/import/pageTemplates/Edit import.html	
@@ -0,0 +1,9 @@
+<main>
+  <div class="simplycode-header">
+    <h1>Edit import: <span data-simply-field="component.id"></span></h1>
+  </div>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentImportUrl"></simply-render>
+  </form>
+</main>
\ No newline at end of file
diff --git a/pages/import/routes/import.js b/pages/import/routes/import.js
new file mode 100644
index 0000000..54d76a6
--- /dev/null
+++ b/pages/import/routes/import.js
@@ -0,0 +1,38 @@
+function(params) {
+  editor.pageData.app = {};
+  simplyApp.actions.getAppData()
+    .then(function(appData) {
+    editor.pageData.app = appData;
+  })
+    .then(function() {
+    return simplyApp.actions.getImport(params.component);
+  })
+    .then(function(parts) {
+    var component = {
+      id : params.component
+    };
+
+    parts = parts.filter(function(part) {
+      if (part.id == "meta") {
+        component = JSON.parse(part.contents);
+        component.id = params.component;
+        return false;
+      }
+      return true;
+    });
+    if (typeof component.parts === "undefined") {
+      component.parts = {
+        importTemplates : []
+      };
+    }
+    var count = {};
+    parts.forEach(function(part) {
+      component.parts[part.id] = JSON.parse(part.contents);
+      count[part.id] = component.parts[part.id].length;
+    });
+    editor.pageData.component = component;
+    editor.pageData.parts = parts;
+    editor.pageData.count = count;
+    editor.pageData.page = "Edit import";
+  });
+}
\ No newline at end of file
diff --git a/pages/import/routes/import.json b/pages/import/routes/import.json
new file mode 100644
index 0000000..7d5d746
--- /dev/null
+++ b/pages/import/routes/import.json
@@ -0,0 +1 @@
+"#imports/:component"
\ No newline at end of file
diff --git a/pages/imports/actions/listImports.js b/pages/imports/actions/listImports.js
new file mode 100644
index 0000000..9d5ad15
--- /dev/null
+++ b/pages/imports/actions/listImports.js
@@ -0,0 +1,6 @@
+function() {
+  return simplyDataApi.listImports()
+    .catch(function(error) {
+    return [];
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/commands/createImport.js b/pages/imports/commands/createImport.js
new file mode 100644
index 0000000..f6c0039
--- /dev/null
+++ b/pages/imports/commands/createImport.js
@@ -0,0 +1,15 @@
+function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
+  var newComponent = editor.pageData.newComponent;
+  simplyApp.actions.saveImport(newComponent)
+    .then(function() {
+    editor.pageData.alerts.unshift({
+      "data-simply-template" : "info",
+      "message" : "Import created.",
+      "state" : "new"
+    });
+    document.location.hash="imports/" + newComponent.id;
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/dataApi/listImports.js b/pages/imports/dataApi/listImports.js
new file mode 100644
index 0000000..38d1e18
--- /dev/null
+++ b/pages/imports/dataApi/listImports.js
@@ -0,0 +1,17 @@
+function() {
+  return simplyRawApi.get("imports")
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("listImports failed", response.status);
+  })
+    .then(function(components) {
+    components.forEach(function(component) {
+      simplyDataApi.mergeComponent(component.contents);
+      component.baseType = 'import';
+      component.description = component.contents.description;
+    });
+    return components;
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/meta.json b/pages/imports/meta.json
new file mode 100644
index 0000000..3a44af5
--- /dev/null
+++ b/pages/imports/meta.json
@@ -0,0 +1 @@
+{"id":"imports","description":"Overview of imports"}
\ No newline at end of file
diff --git a/pages/imports/pageTemplates/Imports.html b/pages/imports/pageTemplates/Imports.html
new file mode 100644
index 0000000..a5a6e21
--- /dev/null
+++ b/pages/imports/pageTemplates/Imports.html
@@ -0,0 +1,29 @@
+<main>
+  <h1>Imports</h1>
+  <div class="simplycode-component-list" data-simply-list="components">
+    <template>
+      <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="importLink">
+        <h3 data-simply-field="id"></h3>
+        <p class="ds-margin-up" data-simply-field="description"></p>
+      </a>
+    </template>
+  </div>
+  <form action="#">
+    <h1>Add import</h1>
+    <div class="simplycode-part">
+      <div class="simplycode-part-header">
+        <div class="simplycode-tabs">
+          <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+        </div>
+        <div class="simplycode-options">
+          <button class="simplycode-button" data-simply-command="createImport">Create</button>
+        </div>
+      </div>
+      <div class="simplycode-editors">
+        <div class="simplycode-editor-code">
+          <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+        </div>
+      </div>
+    </div>
+  </form>
+</main>
diff --git a/pages/imports/routes/imports.js b/pages/imports/routes/imports.js
new file mode 100644
index 0000000..bfbd6ce
--- /dev/null
+++ b/pages/imports/routes/imports.js
@@ -0,0 +1,7 @@
+function() {
+  simplyApp.actions.listImports()
+    .then(function(components) {
+    editor.pageData.components = components;
+    editor.pageData.page = "Imports";
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/routes/imports.json b/pages/imports/routes/imports.json
new file mode 100644
index 0000000..3cbdf73
--- /dev/null
+++ b/pages/imports/routes/imports.json
@@ -0,0 +1 @@
+"#imports"
\ No newline at end of file
diff --git a/pages/imports/transformers/importLink-extract.js b/pages/imports/transformers/importLink-extract.js
new file mode 100644
index 0000000..886f9a5
--- /dev/null
+++ b/pages/imports/transformers/importLink-extract.js
@@ -0,0 +1,3 @@
+function(data) {
+  return this.simplyData;
+}
\ No newline at end of file
diff --git a/pages/imports/transformers/importLink-render.js b/pages/imports/transformers/importLink-render.js
new file mode 100644
index 0000000..9c52e5e
--- /dev/null
+++ b/pages/imports/transformers/importLink-render.js
@@ -0,0 +1,7 @@
+function(data) {
+  this.simplyData = data;
+  return {
+    href : "#imports/" + data,
+    innerHTML: data
+  };
+}
\ No newline at end of file