diff --git a/packages/bootstrap-components/components.json b/packages/bootstrap-components/components.json
index 684a8acbb7..70d4668213 100644
--- a/packages/bootstrap-components/components.json
+++ b/packages/bootstrap-components/components.json
@@ -1,24 +1,5 @@
 {
 	"_lib": "./dist/index.js",
-	"_generators": {
-		"_lib": "./dist/generators.js",
-		"app": {
-			"name": "App",
-			"description": "Generate app based on your backend"
-		},
-		"forms": {
-			"name": "Forms",
-			"description": "Generate forms, based on your records"
-		},
-		"indexTables": {
-			"name": "Index Tables",
-			"description": "Generate a table based on an index"
-		},
-		"recordHomepages": {
-			"name": "Record Homepage",
-			"description": "Generates a 'homepage' based on your record types, including a create/edit form. Selecting a nav item will display a root content"
-		}
-	},
 	"form" : {
 		"importPath": "Form",
 		"name": "Form",
diff --git a/packages/bootstrap-components/rollup.generatorsconfig.js b/packages/bootstrap-components/rollup.generatorsconfig.js
deleted file mode 100644
index 77469eea83..0000000000
--- a/packages/bootstrap-components/rollup.generatorsconfig.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import resolve from "rollup-plugin-node-resolve"
-
-export default {
-  input: "src/generators.js",
-  output: [
-    {
-      file: "dist/generators.js",
-      format: "esm",
-      name: "budibaseStandardComponents",
-      sourcemap: "inline",
-    },
-  ],
-  plugins: [resolve()],
-}
diff --git a/packages/bootstrap-components/scripts/publishDev.js b/packages/bootstrap-components/scripts/publishDev.js
index 713247656b..7a674ebcbc 100644
--- a/packages/bootstrap-components/scripts/publishDev.js
+++ b/packages/bootstrap-components/scripts/publishDev.js
@@ -5,12 +5,10 @@ const { join, basename } = require("path")
 const packagesFolder = ".."
 
 const jsFile = dir => join(dir, "index.js")
-const generatorsFile = dir => join(dir, "generators.js")
 const jsMapFile = dir => join(dir, "index.js.map")
 const sourceJs = jsFile("dist")
 const sourceJsMap = jsMapFile("dist")
 const componentsFile = "components.json"
-const sourceGenerators = generatorsFile("dist")
 
 const appPackages = join(packagesFolder, "server", "appPackages")
 
@@ -69,7 +67,6 @@ const nodeModules = appName =>
 
   const copySourceJs = copySource(sourceJs)
   const copySourceJsMap = copySource(sourceJsMap)
-  const copyGenerators = copySource(sourceGenerators)
   const copyComponentsJson = copySource(componentsFile)
 
   for (let app of apps) {
@@ -77,16 +74,13 @@ const nodeModules = appName =>
 
     await copySourceJs(nodeModulesDist(app))
     await copySourceJsMap(nodeModulesDist(app))
-    await copyGenerators(nodeModulesDist(app))
 
     await copyComponentsJson(nodeModules(app))
 
     await copySourceJs(join(publicMain(app), "dist"))
     await copySourceJsMap(join(publicMain(app), "dist"))
-    await copyGenerators(join(publicMain(app), "dist"))
 
     await copySourceJs(join(publicUnauth(app), "dist"))
     await copySourceJsMap(join(publicUnauth(app), "dist"))
-    await copyGenerators(join(publicUnauth(app), "dist"))
   }
 })()
diff --git a/packages/bootstrap-components/src/generators.js b/packages/bootstrap-components/src/generators.js
deleted file mode 100644
index 103146916b..0000000000
--- a/packages/bootstrap-components/src/generators.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { forms } from "./generators/formsGenerator"
-export { indexTables } from "./generators/indexTablesGenerator"
-export { app } from "./generators/appGenerator"
-export { recordHomePageComponents as recordHomepages } from "./generators/recordHomePageGenerator"
diff --git a/packages/bootstrap-components/src/generators/appGenerator.js b/packages/bootstrap-components/src/generators/appGenerator.js
deleted file mode 100644
index f4181b2249..0000000000
--- a/packages/bootstrap-components/src/generators/appGenerator.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  navContentComponentName,
-  selectNavContent,
-} from "./selectedNavContentGenerator"
-import { recordHomepages } from "./recordHomePageGenerator"
-export const app = ({ records, indexes, helpers }) => [
-  {
-    name: "Application Root",
-    inherits: "@budibase/bootstrap-components/nav",
-    props: {
-      items: recordHomepages({ indexes, records }).map(navItem),
-      orientation: "horizontal",
-      alignment: "start",
-      fill: false,
-      pills: true,
-      selectedItem: {
-        "##bbstate": "selectedNav",
-        "##bbstatefallback": `${records[0].name}`,
-        "##bbsource": "store",
-      },
-      className: "p-3",
-    },
-  },
-  {
-    name: "Login",
-    inherits: "@budibase/standard-components/login",
-    props: {},
-  },
-  ...selectNavContent({ records, indexes, helpers }),
-]
-
-export const navItem = ({ record }) => ({
-  title: record.collectionName,
-  component: {
-    _component: navContentComponentName(record),
-  },
-})
diff --git a/packages/bootstrap-components/src/generators/buttonGenerators.js b/packages/bootstrap-components/src/generators/buttonGenerators.js
deleted file mode 100644
index 14f83b2101..0000000000
--- a/packages/bootstrap-components/src/generators/buttonGenerators.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const buttons = () => [
-  {
-    name: "common/Primary Button",
-    description: "Bootstrap primary button ",
-    inherits: "@budibase/standard-components/button",
-    props: {
-      className: "btn btn-primary",
-    },
-  },
-  {
-    name: "common/Default Button",
-    description: "Bootstrap default button",
-    inherits: "@budibase/standard-components/button",
-    props: {
-      className: "btn btn-secondary",
-    },
-  },
-]
diff --git a/packages/bootstrap-components/src/generators/formsGenerator.js b/packages/bootstrap-components/src/generators/formsGenerator.js
deleted file mode 100644
index aa842a2090..0000000000
--- a/packages/bootstrap-components/src/generators/formsGenerator.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { buttons } from "./buttonGenerators"
-
-export const forms = ({ records, indexes, helpers }) => [
-  ...records.map(root),
-  ...buttons({ records, indexes, helpers }),
-]
-
-export const formName = record => `${record.name}/${record.name} Form`
-
-const root = record => ({
-  name: formName(record),
-  description: `Control for creating/updating '${record.nodeKey()}' `,
-  inherits: "@budibase/standard-components/container",
-  props: {
-    className: "p-1",
-    children: [
-      {
-        component: {
-          _component: "@budibase/standard-components/h3",
-          text: `Edit ${record.name}`,
-        },
-      },
-      form(record),
-      saveCancelButtons(record),
-    ],
-  },
-})
-
-const form = record => ({
-  component: {
-    _component: "@budibase/standard-components/form",
-    formControls: record.fields.map(f => formControl(record, f)),
-  },
-})
-
-const formControl = (record, field) => {
-  if (
-    field.type === "string" &&
-    field.typeOptions.values &&
-    field.typeOptions.values.length > 0
-  ) {
-    return {
-      control: {
-        _component: "@budibase/standard-components/select",
-        options: field.typeOptions.values.map(v => ({ id: v, value: v })),
-        value: {
-          "##bbstate": `${record.name}.${field.name}`,
-          "##bbsource": "store",
-        },
-        className: "form-control",
-      },
-      label: field.label,
-    }
-  } else {
-    return {
-      control: {
-        _component: "@budibase/standard-components/input",
-        value: {
-          "##bbstate": `${record.name}.${field.name}`,
-          "##bbsource": "store",
-        },
-        className: "form-control",
-        type:
-          field.type === "string"
-            ? "text"
-            : field.type === "datetime"
-            ? "date"
-            : field.type === "number"
-            ? "number"
-            : "text",
-      },
-      label: field.label,
-    }
-  }
-}
-
-const saveCancelButtons = record => ({
-  component: {
-    _component: "@budibase/standard-components/stackpanel",
-    direction: "horizontal",
-    children: [
-      paddedPanelForButton({
-        _component: "common/Primary Button",
-        contentText: `Save ${record.name}`,
-        onClick: [
-          {
-            "##eventHandlerType": "Save Record",
-            parameters: {
-              statePath: `${record.name}`,
-            },
-          },
-          {
-            "##eventHandlerType": "Set State",
-            parameters: {
-              path: `isEditing${record.name}`,
-              value: "",
-            },
-          },
-        ],
-      }),
-      paddedPanelForButton({
-        _component: "common/Default Button",
-        contentText: `Cancel`,
-        onClick: [
-          {
-            "##eventHandlerType": "Set State",
-            parameters: {
-              path: `isEditing${record.name}`,
-              value: "",
-            },
-          },
-        ],
-      }),
-    ],
-  },
-})
-
-const paddedPanelForButton = button => ({
-  control: {
-    _component: "@budibase/standard-components/container",
-    className: "btn-group",
-    children: [
-      {
-        component: button,
-      },
-    ],
-  },
-})
diff --git a/packages/bootstrap-components/src/generators/getRecordPath.js b/packages/bootstrap-components/src/generators/getRecordPath.js
deleted file mode 100644
index 5d2003954d..0000000000
--- a/packages/bootstrap-components/src/generators/getRecordPath.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export const getRecordPath = () => {
-  const parts = []
-
-  const add = current => {
-    parts.push(current.name)
-    if (current.parent().type === "root") {
-      return
-    }
-
-    add(current.parent())
-  }
-
-  return parts.reverse().join("/")
-}
diff --git a/packages/bootstrap-components/src/generators/indexTablesGenerator.js b/packages/bootstrap-components/src/generators/indexTablesGenerator.js
deleted file mode 100644
index 45464c177c..0000000000
--- a/packages/bootstrap-components/src/generators/indexTablesGenerator.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { getRecordPath } from "./getRecordPath"
-
-export const indexTables = ({ indexes, helpers }) =>
-  indexes.map(i => indexTable(i, helpers))
-
-const excludedColumns = ["id", "isNew", "key", "type", "sortKey"]
-
-export const indexTableProps = (index, helpers) => ({
-  data: {
-    "##bbstate": index.nodeKey(),
-    "##bbsource": "store",
-  },
-  tableClass: "table table-hover",
-  theadClass: "thead-dark",
-  columns: helpers
-    .indexSchema(index)
-    .filter(c => !excludedColumns.includes(c.name))
-    .map(column),
-  onRowClick: [
-    {
-      "##eventHandlerType": "Set State",
-      parameters: {
-        path: `selectedrow_${index.name}`,
-        value: {
-          "##bbstate": "key",
-          "##bbsource": "event",
-        },
-      },
-    },
-  ],
-})
-
-export const getIndexTableName = (index, record) => {
-  record = record || index.parent().type === "record" ? index.parent() : null
-
-  return record
-    ? `${getRecordPath(record)}/${index.name} Table`
-    : `${index.name} Table`
-}
-
-const indexTable = (index, helpers) => ({
-  name: getIndexTableName(index),
-  inherits: "@budibase/standard-components/table",
-  props: indexTableProps(index, helpers),
-})
-
-const column = col => ({
-  title: col.name,
-  value: {
-    "##bbstate": col.name,
-    "##bbsource": "context",
-  },
-})
diff --git a/packages/bootstrap-components/src/generators/recordHomePageGenerator.js b/packages/bootstrap-components/src/generators/recordHomePageGenerator.js
deleted file mode 100644
index 825db10c87..0000000000
--- a/packages/bootstrap-components/src/generators/recordHomePageGenerator.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import { getIndexTableName, indexTables } from "./indexTablesGenerator"
-
-import { buttons } from "./buttonGenerators"
-
-export const recordHomePageComponents = ({ indexes, records, helpers }) => [
-  ...recordHomepages({ indexes, records }).map(component),
-
-  ...recordHomepages({ indexes, records }).map(homePageButtons),
-
-  ...indexTables({ indexes, records, helpers }),
-
-  ...buttons({ indexes, buttons, helpers }),
-]
-
-const findIndexForRecord = (indexes, record) => {
-  const forRecord = indexes.filter(i =>
-    i.allowedRecordNodeIds.includes(record.nodeId)
-  )
-  if (forRecord.length === 0) return
-  if (forRecord.length === 1) return forRecord[0]
-  const noMap = forRecord.filter(i => !i.filter || !i.filter.trim())
-  if (noMap.length === 0) forRecord[0]
-  return noMap[0]
-}
-
-export const recordHomepages = ({ indexes, records }) =>
-  records
-    .filter(r => r.parent().type === "root")
-    .map(r => ({
-      record: r,
-      index: findIndexForRecord(indexes, r),
-    }))
-    .filter(r => r.index)
-
-export const homepageComponentName = record =>
-  `${record.name}/${record.name} homepage`
-
-const component = ({ record, index }) => ({
-  inherits: "@budibase/standard-components/container",
-  name: homepageComponentName(record),
-  props: {
-    className: "d-flex flex-column h-100",
-    children: [
-      {
-        component: {
-          _component: `${record.name}/homepage buttons`,
-        },
-      },
-      {
-        component: {
-          _component: getIndexTableName(index),
-        },
-        className: "flex-gow-1 overflow-auto",
-      },
-    ],
-    onLoad: [
-      {
-        "##eventHandlerType": "Set State",
-        parameters: {
-          path: `isEditing${record.name}`,
-          value: "",
-        },
-      },
-      {
-        "##eventHandlerType": "List Records",
-        parameters: {
-          statePath: index.nodeKey(),
-          indexKey: index.nodeKey(),
-        },
-      },
-    ],
-  },
-})
-
-const homePageButtons = ({ index, record }) => ({
-  inherits: "@budibase/standard-components/container",
-  name: `${record.name}/homepage buttons`,
-  props: {
-    className: "btn-toolbar mt-4 mb-2",
-    children: [
-      {
-        component: {
-          _component: "@budibase/standard-components/container",
-          className: "btn-group mr-3",
-          children: [
-            {
-              component: {
-                _component: "common/Default Button",
-                contentText: `Create ${record.name}`,
-                onClick: [
-                  {
-                    "##eventHandlerType": "Get New Record",
-                    parameters: {
-                      statePath: record.name,
-                      collectionKey: `/${record.collectionName}`,
-                      childRecordType: record.name,
-                    },
-                  },
-                  {
-                    "##eventHandlerType": "Set State",
-                    parameters: {
-                      path: `isEditing${record.name}`,
-                      value: "true",
-                    },
-                  },
-                ],
-              },
-            },
-            {
-              component: {
-                _component: "common/Default Button",
-                contentText: `Refresh`,
-                onClick: [
-                  {
-                    "##eventHandlerType": "List Records",
-                    parameters: {
-                      statePath: index.nodeKey(),
-                      indexKey: index.nodeKey(),
-                    },
-                  },
-                ],
-              },
-            },
-          ],
-        },
-      },
-      {
-        component: {
-          _component: "@budibase/standard-components/if",
-          condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`,
-          thenComponent: {
-            _component: "@budibase/standard-components/container",
-            className: "btn-group",
-            children: [
-              {
-                component: {
-                  _component: "common/Default Button",
-                  contentText: `Edit ${record.name}`,
-                  onClick: [
-                    {
-                      "##eventHandlerType": "Load Record",
-                      parameters: {
-                        statePath: record.name,
-                        recordKey: {
-                          "##bbstate": `selectedrow_${index.name}`,
-                          "##source": "store",
-                        },
-                      },
-                    },
-                    {
-                      "##eventHandlerType": "Set State",
-                      parameters: {
-                        path: `isEditing${record.name}`,
-                        value: "true",
-                      },
-                    },
-                  ],
-                },
-              },
-              {
-                component: {
-                  _component: "common/Default Button",
-                  contentText: `Delete ${record.name}`,
-                  onClick: [
-                    {
-                      "##eventHandlerType": "Delete Record",
-                      parameters: {
-                        recordKey: {
-                          "##bbstate": `selectedrow_${index.name}`,
-                          "##source": "store",
-                        },
-                      },
-                    },
-                  ],
-                },
-              },
-            ],
-          },
-        },
-      },
-    ],
-  },
-})
diff --git a/packages/bootstrap-components/src/generators/selectedNavContentGenerator.js b/packages/bootstrap-components/src/generators/selectedNavContentGenerator.js
deleted file mode 100644
index 1fc7928c8f..0000000000
--- a/packages/bootstrap-components/src/generators/selectedNavContentGenerator.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  recordHomepages,
-  homepageComponentName,
-  recordHomePageComponents,
-} from "./recordHomePageGenerator"
-import { formName, forms } from "./formsGenerator"
-
-export const selectNavContent = ({ indexes, records, helpers }) => [
-  ...recordHomepages({ indexes, records }).map(component),
-
-  ...recordHomePageComponents({ indexes, records, helpers }),
-
-  ...forms({ indexes, records, helpers }),
-]
-
-export const navContentComponentName = record =>
-  `${record.name}/${record.name} Nav Content`
-
-const component = ({ record }) => ({
-  inherits: "@budibase/standard-components/if",
-  description: `the component that gets displayed when the ${record.collectionName} nav is selected`,
-  name: navContentComponentName(record),
-  props: {
-    condition: `$store.isEditing${record.name}`,
-    thenComponent: {
-      _component: formName(record),
-    },
-    elseComponent: {
-      _component: homepageComponentName(record),
-    },
-  },
-})
diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js
index 1fc6e88105..5035222d7f 100644
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@@ -19,8 +19,7 @@ const _builderProxy = proxy("/_builder", {
 const apiProxy = proxy(
   [
     "/_builder/api/**",
-    "/_builder/**/componentlibrary",
-    "/_builder/**/componentlibraryGenerators",
+    "/_builder/**/componentlibrary"
   ],
   {
     target,
diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js
index e178eb3244..ed720ad6c0 100644
--- a/packages/builder/src/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/builderStore/loadComponentLibraries.js
@@ -1,5 +1,3 @@
-import { map } from "lodash/fp"
-
 export const loadLibs = async (appName, appPackage) => {
   const allLibraries = {}
   for (let lib of appPackage.pages.componentLibraries) {
@@ -10,16 +8,6 @@ export const loadLibs = async (appName, appPackage) => {
   return allLibraries
 }
 
-export const loadGeneratorLibs = async (appName, appPackage) => {
-  const allGeneratorLibs = {}
-  for (let lib of appPackage.pages.componentLibraries) {
-    const generatorModule = await import(makeGeneratorLibraryUrl(appName, lib))
-    allGeneratorLibs[lib] = generatorModule
-  }
-
-  return allGeneratorLibs
-}
-
 export const loadLibUrls = (appName, appPackage) => {
   const allLibraries = []
   for (let lib of appPackage.pages.componentLibraries) {
@@ -35,13 +23,5 @@ export const loadLib = async (appName, lib, allLibs) => {
   return allLibs
 }
 
-export const loadGeneratorLib = async (appName, lib, allGeneratorLibs) => {
-  allGeneratorLibs[lib] = await import(makeGeneratorLibraryUrl(appName, lib))
-  return allGeneratorLibs
-}
-
 export const makeLibraryUrl = (appName, lib) =>
   `/_builder/${appName}/componentlibrary?lib=${encodeURI(lib)}`
-
-export const makeGeneratorLibraryUrl = (appName, lib) =>
-  `/_builder/${appName}/componentlibraryGenerators?lib=${encodeURI(lib)}`
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index ead7e51109..97a49b2fdc 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -35,13 +35,10 @@ import {
 import { expandComponentDefinition } from "../userInterface/pagesParsing/types"
 import {
   loadLibs,
-  loadLibUrls,
-  loadGeneratorLibs,
+  loadLibUrls
 } from "./loadComponentLibraries"
 import { buildCodeForScreens } from "./buildCodeForScreens"
 import { generate_screen_css } from "./generate_css"
-import { insertCodeMetadata } from "./insertCodeMetadata"
-// import { uuid } from "./uuid"
 
 let appname = ""
 
@@ -94,7 +91,6 @@ export const getStore = () => {
   store.deleteLevel = deleteLevel(store)
   store.setActiveNav = setActiveNav(store)
   store.saveScreen = saveScreen(store)
-  store.refreshComponents = refreshComponents(store)
   store.addComponentLibrary = addComponentLibrary(store)
   store.renameScreen = renameScreen(store)
   store.deleteScreen = deleteScreen(store)
@@ -159,8 +155,6 @@ const initialise = (store, initial) => async () => {
   }
 
   initial.libraries = await loadLibs(appname, pkg)
-
-  initial.generatorLibraries = await loadGeneratorLibs(appname, pkg)
   initial.loadLibraryUrls = () => loadLibUrls(appname, pkg)
   initial.appname = appname
   initial.pages = pkg.pages
@@ -168,7 +162,6 @@ const initialise = (store, initial) => async () => {
   initial.hierarchy = pkg.appDefinition.hierarchy
   initial.accessLevels = pkg.accessLevels
   initial.screens = values(pkg.screens)
-  initial.generators = generatorsArray(pkg.components.generators)
   initial.components = values(pkg.components.components).map(
     expandComponentDefinition
   )
@@ -187,9 +180,6 @@ const initialise = (store, initial) => async () => {
   return initial
 }
 
-const generatorsArray = generators =>
-  pipe(generators, [keys, filter(k => k !== "_lib"), map(k => generators[k])])
-
 const showSettings = store => () => {
   store.update(s => {
     s.showSettings = !s.showSettings
@@ -683,27 +673,6 @@ const removeStylesheet = store => stylesheet => {
   })
 }
 
-const refreshComponents = store => async () => {
-  const componentsAndGenerators = await api
-    .get(`/_builder/api/${appname}/components`)
-    .then(r => r.json())
-
-  const components = pipe(componentsAndGenerators.components, [
-    keys,
-    map(k => ({ ...componentsAndGenerators[k], name: k })),
-    map(c => expandComponentDefinition(c)),
-  ])
-
-  store.update(s => {
-    s.components = pipe(s.components, [
-      filter(c => !isRootComponent(c)),
-      concat(components),
-    ])
-    s.generators = componentsAndGenerators.generators
-    return s
-  })
-}
-
 const _savePage = async s => {
   const page = s.pages[s.currentPageName]
 
@@ -749,19 +718,25 @@ const setCurrentPage = store => pageName => {
 const getContainerComponent = components =>
   components.find(c => c.name === "@budibase/standard-components/container")
 
-const addChildComponent = store => componentName => {
-  store.update(s => {
-    const component = componentName.startsWith("##")
-      ? getBuiltin(componentName)
-      : s.components.find(c => c.name === componentName)
-    const newComponent = createProps(component)
+/**
+ * @param  {string} componentToAdd - name of the component to add to the application
+ * @param  {string} presetName - name of the component preset if defined
+ */
+const addChildComponent = store => (componentToAdd, presetName) => {
+  store.update(state => {
+    const component = componentToAdd.startsWith("##")
+      ? getBuiltin(componentToAdd)
+      : state.components.find(({ name }) => name === componentToAdd)
+    const presetProps = presetName ? component.presets[presetName] : {}; 
+    const newComponent = createProps(component, presetProps);
 
-    s.currentComponentInfo._children = s.currentComponentInfo._children.concat(
+    state.currentComponentInfo._children = state.currentComponentInfo._children.concat(
       newComponent.props
     )
 
-    _savePage(s)
-    return s
+    _savePage(state)
+
+    return state
   })
 }
 
diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte
index 5f57244250..d112bafa4c 100644
--- a/packages/builder/src/common/PlusButton.svelte
+++ b/packages/builder/src/common/PlusButton.svelte
@@ -1,4 +1,8 @@
-<button on:click>+</button>
+<button on:click>
+  <slot>
+    +
+  </slot>
+</button>
 
 <style>
   button {
@@ -9,7 +13,6 @@
     background: rgba(249, 249, 249, 1);
 
     width: 1.8rem;
-    height: 1.8rem;
     padding-bottom: 10px;
 
     display: flex;
diff --git a/packages/builder/src/userInterface/ComponentPanel.svelte b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
similarity index 100%
rename from packages/builder/src/userInterface/ComponentPanel.svelte
rename to packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
diff --git a/packages/builder/src/userInterface/ComponentsList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte
similarity index 50%
rename from packages/builder/src/userInterface/ComponentsList.svelte
rename to packages/builder/src/userInterface/ComponentSelectionList.svelte
index fb00d3e4aa..f6fb10a5f5 100644
--- a/packages/builder/src/userInterface/ComponentsList.svelte
+++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte
@@ -3,25 +3,27 @@
   import { store } from "../builderStore"
   import { find, sortBy } from "lodash/fp"
   import { ImageIcon, InputIcon, LayoutIcon } from "../common/Icons/"
+  import Select from "../common/Select.svelte"
+  import PlusButton from "../common/PlusButton.svelte"
 
   let componentLibraries = []
   let current_view = "text"
+  let selectedComponent = null
 
-  const addRootComponent = (c, all) => {
-    const { libName } = splitName(c.name)
-    let group = find(r => r.libName === libName)(all)
+  const addRootComponent = (component, allComponents) => {
+    const { libName } = splitName(component.name)
+    let group = find(r => r.libName === libName)(allComponents)
 
     if (!group) {
       group = {
         libName,
         components: [],
-        generators: [],
       }
 
-      all.push(group)
+      allComponents.push(group)
     }
 
-    group.components.push(c)
+    group.components.push(component)
   }
 
   const onComponentChosen = store.addChildComponent
@@ -38,9 +40,14 @@
 </script>
 
 <div class="root">
-  {#each componentLibraries as lib}
-    <div class="library-header">{lib.libName}</div>
-
+  <Select>
+    {#each componentLibraries as componentLibrary}
+      <option value={componentLibrary.libName}>
+        {componentLibrary.libName}
+      </option>
+    {/each}
+  </Select>
+  {#each componentLibraries as componentLibrary}
     <div class="library-container">
       <ul>
         <li>
@@ -66,11 +73,34 @@
         </li>
       </ul>
 
-      {#each $store.builtins.concat(lib.components.filter(_ => true)) as component}
-        <div
-          class="component"
-          on:click={() => onComponentChosen(component.name)}>
-          <div class="name">{splitName(component.name).componentName}</div>
+      {#each $store.builtins.concat(componentLibrary.components) as component}
+        <div class="component-container">
+          <div
+            class="component"
+            on:click={() => onComponentChosen(component.name)}>
+            <div class="name">{splitName(component.name).componentName}</div>
+            {#if component.presets && component.name === selectedComponent}
+              <ul class="preset-menu">
+                <span>{splitName(component.name).componentName} Presets</span>
+                {#each Object.keys(component.presets) as preset}
+                  <li on:click|stopPropagation={() => onComponentChosen(component.name, preset)}>
+                    {preset}
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          </div>
+          {#if component.presets}
+            <PlusButton 
+              on:click={() => {
+                selectedComponent = selectedComponent ? null : component.name;
+              }} 
+            >
+            <span class="open-presets" class:open={selectedComponent === component.name}>
+              ...
+            </span>
+            </PlusButton>
+          {/if}
         </div>
       {/each}
 
@@ -85,26 +115,22 @@
     flex-direction: column;
   }
 
-  .library-header {
-    font-size: 1.1em;
-    border-color: var(--primary25);
-    border-width: 1px 0px;
-    border-style: solid;
-    background-color: var(--primary10);
-    padding: 5px 0;
-    flex: 0 0 auto;
-  }
-
   .library-container {
     padding: 0 0 10px 10px;
     flex: 1 1 auto;
     min-height: 0px;
   }
 
+  .component-container {
+    display: flex;
+    align-items: center;
+  }
+
   .component {
+    position: relative;
     padding: 0 15px;
     cursor: pointer;
-    border: 1px solid #ccc;
+    border: 1px solid #ebebeb;
     border-radius: 2px;
     margin: 10px 0;
     height: 40px;
@@ -112,6 +138,8 @@
     color: #163057;
     display: flex;
     align-items: center;
+    flex: 1;
+    margin-right: 5px;
   }
 
   .component:hover {
@@ -132,12 +160,38 @@
     padding: 0;
   }
 
+  .preset-menu {
+    flex-direction: column;
+    position: absolute;
+    top: 25px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    background: #fafafa;
+    padding: 10px;
+    border-radius: 2px;
+    color: rgba(22, 48, 87, 0.6);
+  }
+
+  .preset-menu > span {
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .preset-menu li {
+    font-size: 14px;
+    margin-top: 13px;
+  }
+
+  .preset-menu li:hover {
+    font-weight: bold;
+  }
+
   li {
     margin-right: 20px;
     background: none;
     border-radius: 5px;
-    width: 48px;
-    height: 48px;
   }
 
   li button {
diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index 5df2d0d1bb..d163acc9ae 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -1,7 +1,7 @@
 <script>
   import { store } from "../builderStore/"
-  import ComponentPanel from "./ComponentPanel.svelte"
-  import ComponentsList from "./ComponentsList.svelte"
+  import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
+  import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
   let selected = "properties"
 
@@ -30,11 +30,11 @@
 
     <div class="panel">
       {#if selected === 'properties'}
-        <ComponentPanel />
+        <ComponentPropertiesPanel />
       {/if}
 
       {#if selected === 'components'}
-        <ComponentsList />
+        <ComponentSelectionList />
       {/if}
 
     </div>
diff --git a/packages/builder/src/userInterface/EditComponentProps.svelte b/packages/builder/src/userInterface/EditComponentProps.svelte
index d9ff4206f4..f193d7cd55 100644
--- a/packages/builder/src/userInterface/EditComponentProps.svelte
+++ b/packages/builder/src/userInterface/EditComponentProps.svelte
@@ -1,7 +1,6 @@
 <script>
   import PropsView from "./PropsView.svelte"
   import { store } from "../builderStore"
-  import IconButton from "../common/IconButton.svelte"
   import Textbox from "../common/Textbox.svelte"
   import Button from "../common/Button.svelte"
   import { LayoutIcon, PaintIcon, TerminalIcon } from "../common/Icons/"
diff --git a/packages/builder/src/userInterface/NewComponent.svelte b/packages/builder/src/userInterface/NewComponent.svelte
index f60605fcd0..de33430018 100644
--- a/packages/builder/src/userInterface/NewComponent.svelte
+++ b/packages/builder/src/userInterface/NewComponent.svelte
@@ -1,5 +1,4 @@
 <script>
-  import ComponentSelector from "./ComponentSelector.svelte"
   import { store } from "../builderStore"
   import PropsView from "./PropsView.svelte"
   import Textbox from "../common/Textbox.svelte"
diff --git a/packages/builder/src/userInterface/PropertyCascader.svelte b/packages/builder/src/userInterface/PropertyCascader.svelte
index fdee0d3a26..7826e76baa 100644
--- a/packages/builder/src/userInterface/PropertyCascader.svelte
+++ b/packages/builder/src/userInterface/PropertyCascader.svelte
@@ -1,48 +1,50 @@
 <script>
-  import { ArrowDownIcon } from "../common/Icons/";
-  import { store } from "../builderStore";
-  import { buildStateOrigins } from "../builderStore/buildStateOrigins";
-  import { isBinding, getBinding, setBinding } from "../common/binding";
+  import { ArrowDownIcon } from "../common/Icons/"
+  import { store } from "../builderStore"
+  import { buildStateOrigins } from "../builderStore/buildStateOrigins"
+  import { isBinding, getBinding, setBinding } from "../common/binding"
 
-  export let onChanged = () => {};
-  export let value = "";
+  export let onChanged = () => {}
+  export let value = ""
 
-  let isOpen = false;
-  let stateBindings = [];
+  let isOpen = false
+  let stateBindings = []
 
-  let bindingPath = "";
-  let bindingFallbackValue = "";
-  let bindingSource = "store";
-  let bindingValue = "";
+  let bindingPath = ""
+  let bindingFallbackValue = ""
+  let bindingSource = "store"
+  let bindingValue = ""
 
   const bind = (path, fallback, source) => {
     if (!path) {
-      onChanged(fallback);
-      return;
+      onChanged(fallback)
+      return
     }
-    const binding = setBinding({ path, fallback, source });
-    onChanged(binding);
-  };
+    const binding = setBinding({ path, fallback, source })
+    onChanged(binding)
+  }
 
   const setBindingPath = value =>
-    bind(value, bindingFallbackValue, bindingSource);
+    bind(value, bindingFallbackValue, bindingSource)
 
-  const setBindingFallback = value => bind(bindingPath, value, bindingSource);
+  const setBindingFallback = value => bind(bindingPath, value, bindingSource)
 
   const setBindingSource = value =>
-    bind(bindingPath, bindingFallbackValue, value);
+    bind(bindingPath, bindingFallbackValue, value)
 
   $: {
-    const binding = getBinding(value);
-    if (bindingPath !== binding.path) isOpen = false;
-    bindingPath = binding.path;
-    bindingValue = typeof value === "object" ? "" : value;
-    bindingFallbackValue = binding.fallback || bindingValue;
+    const binding = getBinding(value)
+    if (bindingPath !== binding.path) isOpen = false
+    bindingPath = binding.path
+    bindingValue = typeof value === "object" ? "" : value
+    bindingFallbackValue = binding.fallback || bindingValue
 
     const currentScreen = $store.screens.find(
       ({ name }) => name === $store.currentPreviewItem.name
-    );
-    stateBindings = currentScreen ? Object.keys(buildStateOrigins(currentScreen)) : [];
+    )
+    stateBindings = currentScreen
+      ? Object.keys(buildStateOrigins(currentScreen))
+      : []
   }
 </script>
 
@@ -53,17 +55,19 @@
       class="uk-input uk-form-small"
       value={bindingFallbackValue || bindingPath}
       on:change={e => {
-        setBindingFallback(e.target.value);
-        onChanged(e.target.value);
+        setBindingFallback(e.target.value)
+        onChanged(e.target.value)
       }} />
-    <button on:click={() => (isOpen = !isOpen)}>
-      <div
-        class="icon"
-        class:highlighted={bindingPath}
-        style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
-        <ArrowDownIcon size={36} />
-      </div>
-    </button>
+    {#if stateBindings.length}
+      <button on:click={() => (isOpen = !isOpen)}>
+        <div
+          class="icon"
+          class:highlighted={bindingPath}
+          style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
+          <ArrowDownIcon size={36} />
+        </div>
+      </button>
+    {/if}
   </div>
   {#if isOpen}
     <ul class="options">
@@ -71,7 +75,7 @@
         <li
           class:bold={stateBinding === bindingPath}
           on:click={() => {
-            setBindingPath(stateBinding === bindingPath ? null : stateBinding);
+            setBindingPath(stateBinding === bindingPath ? null : stateBinding)
           }}>
           {stateBinding}
         </li>
diff --git a/packages/builder/src/userInterface/pagesParsing/createProps.js b/packages/builder/src/userInterface/pagesParsing/createProps.js
index 4b17284a4f..407deb57ff 100644
--- a/packages/builder/src/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/userInterface/pagesParsing/createProps.js
@@ -24,8 +24,13 @@ export const getNewScreen = (components, rootComponentName, name) => {
   }
 }
 
+/**
+ * @param {object} componentDefinition - component definition from a component library
+ * @param {object} derivedFromProps - extra props derived from a components given props.
+ * @return {object} the fully created properties for the component, and any property parsing errors
+ */
 export const createProps = (componentDefinition, derivedFromProps) => {
-  const error = (propName, error) => errors.push({ propName, error })
+  const errorOccurred = (propName, error) => errors.push({ propName, error })
 
   const props = {
     _component: componentDefinition.name,
@@ -37,12 +42,12 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const errors = []
 
   if (!componentDefinition.name)
-    error("_component", "Component name not supplied")
+    errorOccurred("_component", "Component name not supplied")
 
   const propsDef = componentDefinition.props
   for (let propDef in propsDef) {
     const parsedPropDef = parsePropDef(propsDef[propDef])
-    if (parsedPropDef.error) error(propDef, parsedPropDef.error)
+    if (parsedPropDef.error) errorOccurred(propDef, parsedPropDef.error)
     else props[propDef] = parsedPropDef
   }
 
diff --git a/packages/datastores/yarn.lock b/packages/datastores/yarn.lock
index 14fcc2ccb8..401f35ac9e 100644
--- a/packages/datastores/yarn.lock
+++ b/packages/datastores/yarn.lock
@@ -573,23 +573,6 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@budibase/core@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.16.tgz#efff16876f906b2aa59803c3312ec7593664b623"
-  integrity sha512-DvzfurHHp9KkSjkvbGbKsVczR5ne38bMLRA2hHEJxAmC0Tshld06cEq7HMy2BmPb6kaC1URYHlFs/gPhW2cSFQ==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    date-fns "^1.29.0"
-    lodash "^4.17.13"
-    lunr "^2.3.5"
-    safe-buffer "^5.1.2"
-    shortid "^2.2.8"
-
-"@nx-js/compiler-util@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
-
 "@types/body-parser@*":
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.17.0.tgz#9f5c9d9bd04bb54be32d5eb9fc0d8c974e6cf58c"
@@ -911,11 +894,6 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-date-fns@^1.29.0:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
-  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
-
 debug@=3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -1438,11 +1416,6 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lunr@^2.3.5:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.8.tgz#a8b89c31f30b5a044b97d2d28e2da191b6ba2072"
-  integrity sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg==
-
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -1556,11 +1529,6 @@ nan@^2.9.2:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -1946,13 +1914,6 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-shortid@^2.2.8:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
-  dependencies:
-    nanoid "^2.1.0"
-
 signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index 0f2e7f17fd..4abcb7aee4 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -1,6 +1,5 @@
 {
   "_lib": "./dist/index.js",
-  "_generators": {},
   "Body1": {
     "name": "Body1",
     "description": "Sets the font properties as Roboto Body 1",
diff --git a/packages/materialdesign-components/rollup.generatorsconfig.js b/packages/materialdesign-components/rollup.generatorsconfig.js
deleted file mode 100644
index 77469eea83..0000000000
--- a/packages/materialdesign-components/rollup.generatorsconfig.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import resolve from "rollup-plugin-node-resolve"
-
-export default {
-  input: "src/generators.js",
-  output: [
-    {
-      file: "dist/generators.js",
-      format: "esm",
-      name: "budibaseStandardComponents",
-      sourcemap: "inline",
-    },
-  ],
-  plugins: [resolve()],
-}
diff --git a/packages/materialdesign-components/scripts/publishDev.js b/packages/materialdesign-components/scripts/publishDev.js
index fb833b5bf5..bdc85aacc5 100644
--- a/packages/materialdesign-components/scripts/publishDev.js
+++ b/packages/materialdesign-components/scripts/publishDev.js
@@ -6,12 +6,10 @@ const serverConfig = require("../../server/config")()
 const packagesFolder = ".."
 
 const jsFile = dir => join(dir, "index.js")
-const generatorsFile = dir => join(dir, "generators.js")
 const jsMapFile = dir => join(dir, "index.js.map")
 const sourceJs = jsFile("dist")
 const sourceJsMap = jsMapFile("dist")
 const componentsFile = "components.json"
-const sourceGenerators = generatorsFile("dist")
 
 const appPackages = join(
   packagesFolder,
@@ -68,7 +66,6 @@ const nodeModules = appName =>
 
   const copySourceJs = copySource(sourceJs)
   const copySourceJsMap = copySource(sourceJsMap)
-  const copyGenerators = copySource(sourceGenerators)
   const copyComponentsJson = copySource(componentsFile)
 
   for (let app of apps) {
@@ -77,16 +74,13 @@ const nodeModules = appName =>
 
     await copySourceJs(nodeModulesDist(app))
     await copySourceJsMap(nodeModulesDist(app))
-    await copyGenerators(nodeModulesDist(app))
 
     await copyComponentsJson(nodeModules(app))
 
     await copySourceJs(join(publicMain(app), "dist"))
     await copySourceJsMap(join(publicMain(app), "dist"))
-    await copyGenerators(join(publicMain(app), "dist"))
 
     await copySourceJs(join(publicUnauth(app), "dist"))
     await copySourceJsMap(join(publicUnauth(app), "dist"))
-    await copyGenerators(join(publicUnauth(app), "dist"))
   }
 })()
diff --git a/packages/materialdesign-components/src/generators.js b/packages/materialdesign-components/src/generators.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/materialdesign-components/src/presets.js b/packages/materialdesign-components/src/presets.js
new file mode 100644
index 0000000000..ebf3f50477
--- /dev/null
+++ b/packages/materialdesign-components/src/presets.js
@@ -0,0 +1,11 @@
+export const TEXTFIELD = {
+    STANDARD: {
+        variant: "standard"
+    },
+    FILLED: {
+        variant: "filled"
+    },
+    OUTLINED: {
+        variant: "outlined"
+    }
+};
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/scripts/publishDev.js b/packages/materialdesign-components/src/scripts/publishDev.js
index 80c82e8ddc..85f97ec476 100644
--- a/packages/materialdesign-components/src/scripts/publishDev.js
+++ b/packages/materialdesign-components/src/scripts/publishDev.js
@@ -6,12 +6,10 @@ const serverConfig = require("../../../server/config")()
 const packagesFolder = ".."
 
 const jsFile = dir => join(dir, "index.js")
-const generatorsFile = dir => join(dir, "generators.js")
 const jsMapFile = dir => join(dir, "index.js.map")
 const sourceJs = jsFile("dist")
 const sourceJsMap = jsMapFile("dist")
 const componentsFile = "components.json"
-const sourceGenerators = generatorsFile("dist")
 
 const appPackages = join(
   packagesFolder,
@@ -68,7 +66,6 @@ const nodeModules = appName =>
 
   const copySourceJs = copySource(sourceJs)
   const copySourceJsMap = copySource(sourceJsMap)
-  const copyGenerators = copySource(sourceGenerators)
   const copyComponentsJson = copySource(componentsFile)
 
   for (let app of apps) {
@@ -77,16 +74,13 @@ const nodeModules = appName =>
 
     await copySourceJs(nodeModulesDist(app))
     await copySourceJsMap(nodeModulesDist(app))
-    await copyGenerators(nodeModulesDist(app))
 
     await copyComponentsJson(nodeModules(app))
 
     await copySourceJs(join(publicMain(app), "dist"))
     await copySourceJsMap(join(publicMain(app), "dist"))
-    await copyGenerators(join(publicMain(app), "dist"))
 
     await copySourceJs(join(publicUnauth(app), "dist"))
     await copySourceJsMap(join(publicUnauth(app), "dist"))
-    await copyGenerators(join(publicUnauth(app), "dist"))
   }
 })()
diff --git a/packages/server/middleware/routers.js b/packages/server/middleware/routers.js
index be435df2c7..6e25ab9275 100644
--- a/packages/server/middleware/routers.js
+++ b/packages/server/middleware/routers.js
@@ -6,7 +6,7 @@ const { resolve } = require("path")
 const send = require("koa-send")
 const {
   getPackageForBuilder,
-  getComponents,
+  getComponentDefinitions,
   getApps,
   saveScreen,
   renameScreen,
@@ -70,16 +70,6 @@ module.exports = (config, app) => {
       )
       await send(ctx, info.components._lib || "index.js", { root: info.libDir })
     })
-    .get("/_builder/:appname/componentLibraryGenerators", async ctx => {
-      const info = await componentLibraryInfo(
-        config,
-        ctx.params.appname,
-        ctx.query.lib
-      )
-      await send(ctx, info.generators._lib || "generators.js", {
-        root: info.libDir,
-      })
-    })
     .get("/_builder/*", async (ctx, next) => {
       if (!config.dev) {
         ctx.response.status = StatusCodes.FORBIDDEN
@@ -151,7 +141,7 @@ module.exports = (config, app) => {
     })
     .get("/_builder/api/:appname/components", async ctx => {
       try {
-        ctx.body = getComponents(config, ctx.params.appname, ctx.query.lib)
+        ctx.body = getComponentDefinitions(config, ctx.params.appname, ctx.query.lib)
         ctx.response.status = StatusCodes.OK
       } catch (e) {
         if (e.status) {
@@ -171,15 +161,6 @@ module.exports = (config, app) => {
       ctx.body = info.components
       ctx.response.status = StatusCodes.OK
     })
-    .get("/_builder/api/:appname/generators", async ctx => {
-      const info = await componentLibraryInfo(
-        config,
-        ctx.params.appname,
-        ctx.query.lib ? decodeURI(ctx.query.lib) : ""
-      )
-      ctx.body = info.generators
-      ctx.response.status = StatusCodes.OK
-    })
     .post("/_builder/api/:appname/backend", async ctx => {
       await saveBackend(
         config,
diff --git a/packages/server/utilities/builder/componentLibraryInfo.js b/packages/server/utilities/builder/componentLibraryInfo.js
index eba076d06f..c180655ac4 100644
--- a/packages/server/utilities/builder/componentLibraryInfo.js
+++ b/packages/server/utilities/builder/componentLibraryInfo.js
@@ -1,6 +1,11 @@
 const { readJSON, exists } = require("fs-extra")
 const { resolve, join, dirname } = require("path")
 
+/**
+ * @param {string} appPath - budibase application name
+ * @param {string} libname - component library name
+ * @returns {string} directory name of component definitions for a specific budibase application. 
+ */
 const getLibDir = (appPath, libname) => {
   try {
     const componentsFile = require.resolve(join(libname, "components.json"), {
@@ -17,11 +22,18 @@ const getComponentsFilepath = libPath => resolve(libPath, "components.json")
 module.exports.componentsFilepath = (appPath, libname) =>
   getComponentsFilepath(getLibDir(appPath, libname))
 
+/**
+ * @param {string} appPath - the path to a budibase application
+ * @param {string} libname - the name of the component libary to use for namespacing
+ * @returns {object} tree of components namespaced by their component library name. 
+ */
 module.exports.componentLibraryInfo = async (appPath, libname) => {
   const libDir = getLibDir(appPath, libname)
   const componentsPath = getComponentsFilepath(libDir)
 
-  if (!(await exists(componentsPath))) {
+  const componentDefinitionExists = await exists(componentsPath); 
+
+  if (!componentDefinitionExists) {
     const e = new Error(
       `could not find components definition file at ${componentsPath}`
     )
@@ -30,29 +42,17 @@ module.exports.componentLibraryInfo = async (appPath, libname) => {
   }
 
   try {
-    const components = await readJSON(componentsPath)
-    const namespacedComponents = { _lib: components._lib }
-    for (let cname in components) {
-      if (cname === "_lib" || cname == "_generators") continue
-      const namespacedName = `${libname}/${cname}`
-      components[cname].name = namespacedName
-      namespacedComponents[namespacedName] = components[cname]
-    }
-
-    const namespacedGenerators = {}
-    if (components._generators) {
-      namespacedGenerators._lib = components._generators._lib || "generators.js"
-      for (let gname in components._generators) {
-        if (gname === "_lib") continue
-        const namespacedName = `${libname}/${gname}`
-        components._generators[gname].name = namespacedName
-        namespacedGenerators[namespacedName] = components._generators[gname]
-      }
+    const componentDefinitions = await readJSON(componentsPath)
+    const namespacedComponents = { _lib: componentDefinitions._lib }
+    for (let componentKey in componentDefinitions) {
+      if (componentKey === "_lib") continue
+      const namespacedName = `${libname}/${componentKey}`
+      componentDefinitions[componentKey].name = namespacedName
+      namespacedComponents[namespacedName] = componentDefinitions[componentKey]
     }
 
     return {
       components: namespacedComponents,
-      generators: namespacedGenerators,
       libDir,
       componentsPath,
     }
diff --git a/packages/server/utilities/builder/index.js b/packages/server/utilities/builder/index.js
index 063a5f454d..0421002808 100644
--- a/packages/server/utilities/builder/index.js
+++ b/packages/server/utilities/builder/index.js
@@ -39,7 +39,7 @@ module.exports.getPackageForBuilder = async (config, appname) => {
 
     pages,
 
-    components: await getComponents(appPath, pages),
+    components: await getComponentDefinitions(appPath, pages),
   }
 }
 
@@ -112,36 +112,39 @@ module.exports.savePage = async (config, appname, pagename, page) => {
   await buildPage(config, appname, appDefinition, pagename, page)
 }
 
-module.exports.componentLibraryInfo = async (config, appname, lib) => {
+module.exports.componentLibraryInfo = async (config, appname, componentLibrary) => {
   const appPath = appPackageFolder(config, appname)
-  return await componentLibraryInfo(appPath, lib)
+  return await componentLibraryInfo(appPath, componentLibrary)
 }
 
-const getComponents = async (appPath, pages, lib) => {
-  let libs
-  if (!lib) {
+/**
+ * @param {string} appPath - path to a budibase application
+ * @param {Array} pages - a list of budibase application pages 
+ * @param {string} componentLibrary - component library to fetch components for
+ * @returns {object} - an object containing component definitions namespaced by their component library
+ */
+const getComponentDefinitions = async (appPath, pages, componentLibrary) => {
+  let componentLibraries
+  if (!componentLibrary) {
     pages = pages || (await getPages(appPath))
 
     if (!pages) return []
 
-    libs = $(pages, [values, map(p => p.componentLibraries), flatten])
+    componentLibraries = $(pages, [values, map(p => p.componentLibraries), flatten])
   } else {
-    libs = [lib]
+    componentLibraries = [componentLibrary]
   }
 
   const components = {}
-  const generators = {}
 
-  for (let l of libs) {
-    const info = await componentLibraryInfo(appPath, l)
+  for (let library of componentLibraries) {
+    const info = await componentLibraryInfo(appPath, library)
     merge(components, info.components)
-    merge(generators, info.generators)
   }
 
   if (components._lib) delete components._lib
-  if (components._generators) delete components._generators
 
-  return { components, generators }
+  return { components }
 }
 
-module.exports.getComponents = getComponents
+module.exports.getComponentDefinitions = getComponentDefinitions
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index a6ffca1cd9..f4ad571cdd 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -131,29 +131,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.16.tgz#4eef9373816448e99cafd2714f417c6610af5e69"
-  integrity sha512-fx4ptePj7+IehM37xdNPHdu5jEUgAFmDx23jI0yb4sI6Z5U4gxH10FZYyoJ/A9KdzmShsIfgrmudV5ffvoehdg==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
-"@budibase/core@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.16.tgz#efff16876f906b2aa59803c3312ec7593664b623"
-  integrity sha512-DvzfurHHp9KkSjkvbGbKsVczR5ne38bMLRA2hHEJxAmC0Tshld06cEq7HMy2BmPb6kaC1URYHlFs/gPhW2cSFQ==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    date-fns "^1.29.0"
-    lodash "^4.17.13"
-    lunr "^2.3.5"
-    safe-buffer "^5.1.2"
-    shortid "^2.2.8"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -322,11 +299,6 @@
     path-to-regexp "^1.1.1"
     urijs "^1.19.0"
 
-"@nx-js/compiler-util@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
-
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
@@ -1073,11 +1045,6 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@^1.29.0:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
-  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
-
 debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2785,7 +2752,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15:
+lodash@^4.17.11, lodash@^4.17.13:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -2810,11 +2777,6 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lunr@^2.3.5:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.8.tgz#a8b89c31f30b5a044b97d2d28e2da191b6ba2072"
-  integrity sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg==
-
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -2976,11 +2938,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -3816,13 +3773,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-shortid@^2.2.8:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
-  dependencies:
-    nanoid "^2.1.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -4100,11 +4050,6 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-svelte@^3.9.2:
-  version "3.18.2"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.18.2.tgz#f136b9e169049f8bb6a364bd8b8f3b619ed957d9"
-  integrity sha512-jRk7jdYULb9V4Z+0BKlfofombmdIIQph4leojrOSHzvZBRmCredz7fZsJBiUDLO6h83XYekuLbwfy5zx1i95GQ==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 52d5b76751..a94b5a25c6 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -1,32 +1,5 @@
 {
 	"_lib": "./dist/index.js",
-	"_generators": {
-		"_lib": "./dist/generators.js",
-		"app": {
-			"name": "App",
-			"description": "Generate app based on your backend"
-		},
-		"forms": {
-			"name": "Forms",
-			"description": "Generate forms, based on your records"
-		},
-		"buttons": {
-			"name": "Buttons",
-			"description": "Generate some styled buttons"
-		},
-		"headers": {
-			"name": "Headers",
-			"description": "Generate some styled headings"
-		},
-		"nav": {
-			"name": "Nav bar",
-			"description": "Generate a nav bar, based n your root records"
-		},
-		"indexTables": {
-			"name": "Nav bar",
-			"description": "Generate a table based on an index"
-		}
-	},
 	"button" : {
 		"name": "Button",
 		"description": "an html <button />",
@@ -43,7 +16,28 @@
 			"hoverBackground": "string",
 			"hoverBorder": "string"
 		},
-		"tags": ["layout"]
+		"tags": ["layout"],
+		"presets": {
+			"primary": {
+				"contentText": "Primary Button Preset",
+				"color": "papayawhip", 
+				"padding": "20px",
+				"background": "blue"
+			},
+			"secondary": {
+				"contentText": "Secondary Button Preset",
+				"color": "rebeccapurple", 
+				"padding": "10px",
+				"background": "#fff",
+				"border": "1px solid red"
+			},
+			"error": {
+				"contentText": "ERROR",
+				"color": "red", 
+				"padding": "10px",
+				"border": "1px solid red"
+			}
+		} 
 	}, 
 	"login" : {
 		"name": "Login Control",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index f48a68b2e9..ba695dc325 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -4,7 +4,7 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "build": "rollup -c && rollup -c rollup.generatorsconfig.js",
+    "build": "rollup -c",
     "prepublishOnly": "npm run build",
     "testbuild": "rollup -w -c rollup.testconfig.js",
     "dev": "run-p start:dev testbuild",
diff --git a/packages/standard-components/public/bundle.js b/packages/standard-components/public/bundle.js
index b0f3e9bddd..2dc0de6c5b 100644
--- a/packages/standard-components/public/bundle.js
+++ b/packages/standard-components/public/bundle.js
@@ -27513,7 +27513,7 @@ var app = (function (crypto$1) {
     var main = "dist/index.js";
     var module = "dist/index.js";
     var scripts = {
-    	build: "rollup -c && rollup -c rollup.generatorsconfig.js",
+    	build: "rollup -c",
     	prepublishOnly: "npm run build",
     	testbuild: "rollup -w -c rollup.testconfig.js",
     	dev: "run-p start:dev testbuild",
diff --git a/packages/standard-components/rollup.generatorsconfig.js b/packages/standard-components/rollup.generatorsconfig.js
deleted file mode 100644
index 77469eea83..0000000000
--- a/packages/standard-components/rollup.generatorsconfig.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import resolve from "rollup-plugin-node-resolve"
-
-export default {
-  input: "src/generators.js",
-  output: [
-    {
-      file: "dist/generators.js",
-      format: "esm",
-      name: "budibaseStandardComponents",
-      sourcemap: "inline",
-    },
-  ],
-  plugins: [resolve()],
-}
diff --git a/packages/standard-components/scripts/publishDev.js b/packages/standard-components/scripts/publishDev.js
index fb833b5bf5..9b986a2288 100644
--- a/packages/standard-components/scripts/publishDev.js
+++ b/packages/standard-components/scripts/publishDev.js
@@ -6,12 +6,10 @@ const serverConfig = require("../../server/config")()
 const packagesFolder = ".."
 
 const jsFile = dir => join(dir, "index.js")
-const generatorsFile = dir => join(dir, "generators.js")
 const jsMapFile = dir => join(dir, "index.js.map")
 const sourceJs = jsFile("dist")
 const sourceJsMap = jsMapFile("dist")
 const componentsFile = "components.json"
-const sourceGenerators = generatorsFile("dist")
 
 const appPackages = join(
   packagesFolder,
@@ -50,6 +48,7 @@ const nodeModulesDist = appName =>
     "standard-components",
     "dist"
   )
+
 const nodeModules = appName =>
   join(appPackages, appName, "node_modules", "@budibase", "standard-components")
 
@@ -68,7 +67,6 @@ const nodeModules = appName =>
 
   const copySourceJs = copySource(sourceJs)
   const copySourceJsMap = copySource(sourceJsMap)
-  const copyGenerators = copySource(sourceGenerators)
   const copyComponentsJson = copySource(componentsFile)
 
   for (let app of apps) {
@@ -77,16 +75,13 @@ const nodeModules = appName =>
 
     await copySourceJs(nodeModulesDist(app))
     await copySourceJsMap(nodeModulesDist(app))
-    await copyGenerators(nodeModulesDist(app))
 
     await copyComponentsJson(nodeModules(app))
 
     await copySourceJs(join(publicMain(app), "dist"))
     await copySourceJsMap(join(publicMain(app), "dist"))
-    await copyGenerators(join(publicMain(app), "dist"))
 
     await copySourceJs(join(publicUnauth(app), "dist"))
     await copySourceJsMap(join(publicUnauth(app), "dist"))
-    await copyGenerators(join(publicUnauth(app), "dist"))
   }
 })()
diff --git a/packages/standard-components/src/generators.js b/packages/standard-components/src/generators.js
deleted file mode 100644
index 822547d254..0000000000
--- a/packages/standard-components/src/generators.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { app } from "./generators/appGenerator"
-export { forms } from "./generators/formsGenerator"
-export { buttons } from "./generators/buttonsGenerator"
-export { headers } from "./generators/headersGenerator"
-export { nav } from "./generators/navGenerator"
-export { indexTables } from "./generators/indexTablesGenerator"
diff --git a/packages/standard-components/src/generators/appGenerator.js b/packages/standard-components/src/generators/appGenerator.js
deleted file mode 100644
index 533aebfb41..0000000000
--- a/packages/standard-components/src/generators/appGenerator.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { forms } from "./formsGenerator"
-import { nav } from "./navGenerator"
-
-export const app = params => {
-  return [...nav(params), ...forms(params)]
-}
diff --git a/packages/standard-components/src/generators/buttonsGenerator.js b/packages/standard-components/src/generators/buttonsGenerator.js
deleted file mode 100644
index f8d35a9eec..0000000000
--- a/packages/standard-components/src/generators/buttonsGenerator.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export const buttons = () => [
-  {
-    name: "common/Primary Button",
-    description: "a styled button",
-    inherits: "@budibase/standard-components/button",
-    props: {
-      padding: "5px 7px",
-      border: "1px solid #EEE",
-      color: "#5F6368",
-      background: "##f2f2f2",
-      hoverColor: "black",
-      hoverBackground: "#cccccc",
-    },
-  },
-  {
-    name: "common/Secondary Button",
-    description: "a styled button",
-    inherits: "@budibase/standard-components/button",
-    props: {
-      padding: "5px 7px",
-      border: "1px solid #EEE",
-      color: "#5F6368",
-      background: "##f2f2f2",
-      hoverColor: "black",
-      hoverBackground: "#cccccc",
-    },
-  },
-]
diff --git a/packages/standard-components/src/generators/formsGenerator.js b/packages/standard-components/src/generators/formsGenerator.js
deleted file mode 100644
index c7528943c2..0000000000
--- a/packages/standard-components/src/generators/formsGenerator.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { headers } from "./headersGenerator"
-
-export const forms = ({ records, indexes }) => [
-  ...headers({ records, indexes }),
-  ...records.map(root),
-]
-
-const root = record => ({
-  name: `${record.name} Form`,
-  description: `All fields on record '${record.nodeKey()}' `,
-  inherits: "@budibase/standard-components/stackpanel",
-  props: {
-    direction: "vertical",
-    children: [
-      {
-        control: {
-          _component: "common/H1",
-          value: `Edit ${record.name}`,
-        },
-      },
-      form(record),
-      saveCancelButtons(record),
-    ],
-  },
-})
-
-const form = record => ({
-  control: {
-    _component: "@budibase/standard-components/form",
-    formControls: record.fields.map(f => ({
-      label: f.label,
-      control: {
-        _component: "@budibase/standard-components/textbox",
-        value: {
-          "##bbstate": `current${record.name}.${f.name}`,
-          "##bbsource": "store",
-        },
-      },
-    })),
-  },
-})
-
-const saveCancelButtons = record => ({
-  control: {
-    _component: "@budibase/standard-components/stackpanel",
-    direction: "horizontal",
-    children: [
-      paddedPanelForButton({
-        _component: "common/Primary Button",
-        contentText: `Save ${record.name}`,
-        onClick: [
-          {
-            "##eventHandlerType": "Save Record",
-            parameters: {
-              statePath: `current${record.name}`,
-            },
-          },
-        ],
-      }),
-      paddedPanelForButton({
-        _component: "common/Secondary Button",
-        contentText: `Cancel`,
-        onClick: [
-          {
-            "##eventHandlerType": "Save Record",
-            parameters: {
-              statePath: `current${record.name}`,
-            },
-          },
-        ],
-      }),
-    ],
-  },
-})
-
-const paddedPanelForButton = button => ({
-  control: {
-    _component: "@budibase/standard-components/panel",
-    padding: "20px",
-    component: button,
-  },
-})
diff --git a/packages/standard-components/src/generators/headersGenerator.js b/packages/standard-components/src/generators/headersGenerator.js
deleted file mode 100644
index dac44d0c1f..0000000000
--- a/packages/standard-components/src/generators/headersGenerator.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const headers = () => [
-  {
-    name: "common/H1",
-    description: "Header 1",
-    inherits: "@budibase/standard-components/text",
-    props: {
-      font: "20pt",
-    },
-  },
-  {
-    name: "common/H2",
-    description: "Header 2",
-    inherits: "@budibase/standard-components/text",
-    props: {
-      font: "15pt",
-    },
-  },
-  {
-    name: "common/H3",
-    description: "Header 3",
-    inherits: "@budibase/standard-components/text",
-    props: {
-      font: "12pt bold",
-    },
-  },
-  {
-    name: "common/H4",
-    description: "Header 4",
-    inherits: "@budibase/standard-components/text",
-    props: {
-      font: "10pt bold",
-    },
-  },
-]
diff --git a/packages/standard-components/src/generators/indexTablesGenerator.js b/packages/standard-components/src/generators/indexTablesGenerator.js
deleted file mode 100644
index 2d305413e1..0000000000
--- a/packages/standard-components/src/generators/indexTablesGenerator.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export const indexTables = ({ indexes, helpers }) =>
-  indexes
-    .filter(i => i.parent().type === "root")
-    .map(i => indexTable(i, helpers))
-
-export const indexTableProps = (index, helpers) => ({
-  data: {
-    "##bbstate": index.nodeKey(),
-    "##bbsource": "store",
-  },
-  columns: helpers.indexSchema(index).map(column),
-})
-
-const indexTable = (index, helpers) => ({
-  name: `tables/${index.name} Table`,
-  inherits: "@budibase/standard-components/table",
-  props: indexTableProps(index, helpers),
-})
-
-const column = col => ({
-  title: col.name,
-  value: {
-    "##bbstate": col.name,
-    "##bbsource": "context",
-  },
-})
diff --git a/packages/standard-components/src/generators/navGenerator.js b/packages/standard-components/src/generators/navGenerator.js
deleted file mode 100644
index fc3ef78184..0000000000
--- a/packages/standard-components/src/generators/navGenerator.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { indexTables } from "./indexTablesGenerator"
-
-export const nav = ({ records, indexes, helpers }) => [
-  {
-    name: "Application Root",
-    inherits: "@budibase/standard-components/nav",
-    props: {
-      items: indexes.filter(i => i.parent().type === "root").map(navItem),
-      selectedItem: {
-        "##bbstate": "selectedNav",
-        "##bbstatefallback": records[0].collectionName,
-        "##bbsource": "store",
-      },
-    },
-  },
-  ...indexTables({ records, indexes, helpers }),
-]
-
-export const navItem = index => ({
-  title: index.name,
-  component: {
-    _component: `tables/${index.name} Table`,
-  },
-})