diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index b518ac3d92..f24eb25ffb 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -1,7 +1,8 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
   const dispatch = createEventDispatcher()
+  const context = getContext("builderFocus")
 
   export let quiet = false
   export let emphasized = false
@@ -13,6 +14,14 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
+  export let autofocus = false
+
+  let focus = false
+  let actionButton
+  $: focus = autofocus && actionButton !== undefined
+  $: if (focus) {
+    actionButton.focus()
+  }
 
   function longPress(element) {
     if (!longPressable) return
@@ -37,6 +46,7 @@
 
 <button
   data-cy={dataCy}
+  bind:this={actionButton}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
@@ -44,9 +54,17 @@
   class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
+  class:is-focused={focus}
   {disabled}
   on:longPress
   on:click|preventDefault
+  on:focus={() => {
+    focus = true
+  }}
+  on:blur={() => {
+    focus = false
+    if (context) context.clear()
+  }}
 >
   {#if longPressable}
     <svg
@@ -80,4 +98,10 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  button.is-focused {
+    border-color: var(
+      --spectrum-textfield-m-border-color-down,
+      var(--spectrum-alias-border-color-mouse-focus)
+    );
+  }
 </style>
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index 83927b05db..9b7cab1a08 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -13,6 +13,7 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -35,6 +36,7 @@
     {options}
     {placeholder}
     {readonly}
+    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index 6a6423cccf..a2b4a6a50b 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -3,37 +3,28 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
 
   export let value = null
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
+  export let autofocus = false
   export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
+  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  $: fieldText = getFieldText(value, options, placeholder)
+  let comboInput
 
-  const getFieldText = (value, options, placeholder) => {
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option or type"
-    }
-
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(option => getOptionValue(option) === value)
-    return selected ? getOptionLabel(selected) : value
+  $: focus = autofocus && comboInput !== undefined
+  $: if (focus) {
+    comboInput.focus()
   }
 
   const selectOption = value => {
@@ -66,10 +57,16 @@
     class:is-focused={open || focus}
   >
     <input
+      bind:this={comboInput}
       {id}
       type="text"
-      on:focus={() => (focus = true)}
-      on:blur={() => (focus = false)}
+      on:focus={() => {
+        focus = true
+      }}
+      on:blur={() => {
+        focus = false
+        context.clear()
+      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 3eb1add267..1263b1431a 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -13,6 +13,7 @@
   export let readonly = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -85,4 +86,5 @@
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
+  {autofocus}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 2585f11939..8c1c937111 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -3,7 +3,7 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
 
@@ -26,9 +26,18 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
+  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let searchTerm = null
+  let focus = false
+  let pickerButton
+
+  $: focus = autofocus && pickerButton !== undefined
+  $: if (focus) {
+    pickerButton.focus()
+  }
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -80,7 +89,24 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
+    class:is-focused={focus}
+    bind:this={pickerButton}
     on:mousedown={onClick}
+    on:keydown={e => {
+      var keycode = e.key
+      if (focus) {
+        if (keycode === "Enter") {
+          onClick(e)
+        }
+      }
+    }}
+    on:focus={() => {
+      focus = true
+    }}
+    on:blur={() => {
+      focus = false
+      if (context) context.clear()
+    }}
   >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">
@@ -199,6 +225,7 @@
   }
   .spectrum-Picker {
     width: 100%;
+    box-shadow: none;
   }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 413b11dd34..e1e726981a 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -16,6 +16,7 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -74,6 +75,7 @@
   {fieldIcon}
   {autocomplete}
   {sort}
+  {autofocus}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 957dcccddf..021bb8913e 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -14,6 +14,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let sort = false
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -35,5 +36,6 @@
     {getOptionValue}
     on:change={onChange}
     on:click
+    {autofocus}
   />
 </Field>
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 0df27e2ff0..ac7da1bb67 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -18,6 +18,7 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -44,6 +45,7 @@
     {placeholder}
     {autoWidth}
     {sort}
+    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}
diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js
index 43a76c700e..47063fb026 100644
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@@ -1,10 +1,8 @@
-// TODO for now components are skipped, might not be good to keep doing this
-
 import filterTests from "../support/filterTests"
 const interact = require('../support/interact')
 
 filterTests(['all'], () => {
-  xcontext("Create Components", () => {
+  context("Create Components", () => {
     let headlineId
 
     before(() => {
@@ -13,12 +11,29 @@ filterTests(['all'], () => {
       cy.createTable("dog")
       cy.addColumn("dog", "name", "Text")
       cy.addColumn("dog", "age", "Number")
-      cy.addColumn("dog", "type", "Options")
+      cy.addColumn("dog", "breed", "Options")
+
       cy.navigateToFrontend()
+      cy.wait(1000) //allow the iframe some wiggle room
     })
 
+    //Use the tree to delete a selected component
+    const deleteSelectedComponent = () => {
+      cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
+        force: true,
+      })
+      cy.get(".spectrum-Popover.is-open li")
+        .contains("Delete")
+        .click()
+      cy.get(".spectrum-Modal button")
+        .contains("Delete Component")
+        .click({
+          force: true,
+        })
+    }
+
     it("should add a container", () => {
-      cy.addComponent(null, "Container").then(componentId => {
+      cy.addComponent("Layout", "Container").then(componentId => {
         cy.getComponent(componentId).should("exist")
       })
     })
@@ -32,40 +47,43 @@ filterTests(['all'], () => {
 
     it("should change the text of the headline", () => {
       const text = "Lorem ipsum dolor sit amet."
-      cy.get(interact.SETTINGS).click()
-      cy.get(interact.SETTINGS_INPUT)
+      cy.get("[data-cy=setting-text] input")
         .type(text)
         .blur()
       cy.getComponent(headlineId).should("have.text", text)
     })
 
     it("should change the size of the headline", () => {
-      cy.get(interact.DESIGN).click()
-      cy.contains("Typography").click()
-      cy.get(interact.FONT_SIZE_PROP_CONTROL).click()
-      cy.contains("60px").click()
-      cy.getComponent(headlineId).should("have.css", "font-size", "60px")
+      cy.get("[data-cy=setting-size]").scrollIntoView().click()
+      cy.get("[data-cy=setting-size]").within(() => {
+        cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
+      })
+      
+      cy.getComponent(headlineId).within(() => {
+        cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
+      })
     })
 
     it("should create a form and reset to match schema", () => {
       cy.addComponent("Form", "Form").then(() => {
-        cy.get(interact.SETTINGS).click()
-        cy.get(interact.DATA_CY_DATASOURCE)
-          .contains("Choose option")
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Custom")
           .click()
         cy.get(interact.DROPDOWN)
           .contains("dog")
           .click()
+          cy.wait(500)
         cy.addComponent("Form", "Field Group").then(fieldGroupId => {
-          cy.get(interact.SETTINGS).click()
-          cy.contains("Update Form Fields").click()
-          cy.get(".modal")
-            .get("button.primary")
+          cy.contains("Update form fields").click()
+          cy.get(".spectrum-Modal")
+            .get(".confirm-wrap .spectrum-Button")
             .click()
+          cy.wait(500)
           cy.getComponent(fieldGroupId).within(() => {
             cy.contains("name").should("exist")
             cy.contains("age").should("exist")
-            cy.contains("type").should("exist")
+            cy.contains("breed").should("exist")
+           // cy.contains("image").should("exist")
           })
           cy.getComponent(fieldGroupId)
             .find("input")
@@ -82,17 +100,305 @@ filterTests(['all'], () => {
         cy.get("[data-cy=setting-_instanceName] input")
           .type(componentId)
           .blur()
-        cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
+        cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
           force: true,
         })
-        cy.get(interact.DROPDOWN_CONTAINER)
+        cy.get(".spectrum-Popover.is-open li")
           .contains("Delete")
           .click()
-        cy.get(".modal")
+        cy.get(".spectrum-Modal button")
           .contains("Delete Component")
-          .click()
+          .click({
+            force: true,
+          })
         cy.getComponent(componentId).should("not.exist")
       })
     })
+
+    it("should set focus to the field setting when fields are added to a form", () => {
+      cy.addComponent("Form", "Form").then((formId) => {
+        
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(formId)
+          .blur()
+
+        const componentTypeLabels = ["Text Field", "Number Field", "Password Field", 
+          "Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment", 
+          "JSON Field", "Multi-select Picker", "Relationship Picker"]
+
+        const refocusTest = (componentId) => {
+          cy.getComponent(componentId)
+          .find(".showMe").should("exist").click({ force: true })
+          
+          cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+          .should("have.class", "is-focused")
+        }
+
+        const testFieldFocusOnCreate = (componentLabel) => {
+          cy.log("Adding: " + componentLabel)
+          return cy.addComponent("Form", componentLabel).then((componentId) => {
+           
+            refocusTest(componentId)
+
+            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+            .should("have.class", "is-focused")
+          })
+        }
+        
+        cy.wait(1000)
+        cy.wrap(componentTypeLabels).each((label) => {
+          return testFieldFocusOnCreate(label)
+        }).then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
+          deleteSelectedComponent()
+        })
+      })
+    })
+
+    it("should clear the iframe place holder when a form field has been set", () => {
+      cy.addComponent("Form", "Form").then((formId) => {
+        
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(formId)
+          .blur()
+
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Custom")
+          .click()
+        cy.get(".dropdown")
+          .contains("dog")
+          .click()
+
+        const fieldTypeToColumnName = {
+          "Text Field" : "name", 
+          "Number Field": "age", 
+          "Options Picker": "breed"
+        }
+
+        const componentTypeLabels = Object.keys(fieldTypeToColumnName)
+
+        const testFieldFocusOnCreate = (componentLabel) => {
+          cy.log("Adding: " + componentLabel)
+          return cy.addComponent("Form", componentLabel).then((componentId) => {
+           
+            cy.getComponent(componentId)
+              .find(".placeholder_wrap").should("exist")
+
+            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
+              .should("have.class", "is-focused")
+
+            cy.get("[data-cy=setting-field] button.spectrum-Picker").click()
+
+            //Click the first appropriate field. They are filtered by type
+            cy.get("[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item")
+              .contains(fieldTypeToColumnName[componentLabel]).click()
+            cy.wait(500)
+            cy.getComponent(componentId)
+              .find(".placeholder_wrap").should("not.exist")
+          })
+        }
+        
+        cy.wait(500)
+        cy.wrap(componentTypeLabels).each((label) => {
+          return testFieldFocusOnCreate(label)
+        }).then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
+          deleteSelectedComponent()
+        })
+      })
+    })
+
+    it("should focus a charts settings on data provider if not nested in provider ", () => {
+      cy.addComponent("Layout", "Container").then((containerId) => {
+
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(containerId)
+          .blur()
+
+        const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", 
+          "Donut Chart", "Candlestick Chart"]
+
+        const refocusTest = (componentId) => {
+          cy.getComponent(componentId)
+          .find(".showMe").should("exist").click({ force: true })
+          
+          cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
+          .should("have.class", "is-focused")
+        }
+
+        const testFocusOnCreate = (chartLabel) => {
+          cy.log("Adding: " + chartLabel)
+          cy.addComponent("Chart", chartLabel).then((componentId) => {
+            refocusTest(componentId)
+
+            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
+            .should("have.class", "is-focused")
+          })
+        }
+
+        cy.wait(1000)
+        cy.wrap(chartTypeLabels).each((label) => {
+          return testFocusOnCreate(label)
+        })
+        .then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(containerId).click({ force: true })
+          deleteSelectedComponent()
+        })
+
+      })
+
+    })
+
+    it("should populate the provider for charts with a data provider in its path", () => {
+      cy.addComponent("Data", "Data Provider").then((providerId) => {
+
+        //For deletion
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(providerId)
+          .blur()
+
+          
+        cy.get("[data-cy=setting-dataSource]")
+          .contains("Choose an option")
+          .click()
+
+        cy.get(`[data-cy=dataSource-popover-${providerId}] ul li`)
+          .contains("dog")
+          .click()
+
+        const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", 
+          "Donut Chart", "Candlestick Chart"]
+
+        const testFocusOnCreate = (chartLabel) => {
+          cy.log("Adding: " + chartLabel)
+          cy.addComponent("Chart", chartLabel).then((componentId) => {
+
+            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
+              .should("not.have.class", "is-focused")
+
+            // Pre populated.
+            cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker-label")
+              .contains(providerId)
+              .should("exist")
+          })
+        }
+
+        cy.wait(1000)
+        cy.wrap(chartTypeLabels).each((label) => {
+          return testFocusOnCreate(label)
+        })
+        .then(()=>{
+          cy.get(".nav-items-container .nav-item").contains(providerId).click({ force: true })
+          deleteSelectedComponent()
+        })
+      })
+
+    })
+
+    it("should replace the placeholder when a url is set on an image", () => {
+      cy.addComponent("Elements", "Image").then((imageId) => {
+        
+        cy.get("[data-cy=url-prop-control] .spectrum-InputGroup")
+          .should("have.class", "is-focused")
+
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(imageId)
+          .blur()
+        
+        //return $("New Data Provider.Rows")[0]["Attachment"][0]["url"]
+        //No minio, so just enter something local that will not reslove
+        cy.get("[data-cy=url-prop-control] input[type=text]")
+          .type("cypress/fixtures/ghost.png")
+          .blur()
+
+        cy.getComponent(imageId)
+          .find(".placeholder_wrap").should("not.exist")
+
+        cy.getComponent(imageId)
+          .find(`img[alt=${imageId}]`).should("exist")
+        
+        cy.get(".nav-items-container .nav-item")
+          .contains(imageId)
+          .click({ force: true })
+
+        deleteSelectedComponent()
+      })
+    })
+
+    it("should add a markdown component.", () => {
+      cy.addComponent("Elements", "Markdown Viewer").then((markdownId) => {
+        
+        cy.get("[data-cy=value-prop-control] .spectrum-InputGroup")
+          .should("have.class", "is-focused")
+        
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(markdownId)
+          .blur()
+
+        cy.get("[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input")
+          .type("# Hi").blur()
+
+        cy.getComponent(markdownId)
+          .find(".placeholder_wrap").should("not.exist")
+        
+        cy.getComponent(markdownId)
+          .find(".editor-preview-full h1").contains("Hi")
+
+        cy.get(".nav-items-container .nav-item")
+          .contains(markdownId)
+          .click({ force: true })
+
+        deleteSelectedComponent()
+      })
+    })
+
+    it("should direct the user when adding an Icon component.", () => {
+      cy.addComponent("Elements", "Icon").then((iconId) => {
+        
+        cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton")
+          .should("have.class", "is-focused")
+
+        cy.getComponent(iconId)
+          .find(".placeholder_wrap").should("exist")
+        
+        cy.get("[data-cy=setting-_instanceName] input")
+          .clear()
+          .type(iconId)
+          .blur()
+
+        cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton").click()
+
+        cy.get("[data-cy=icon-popover].spectrum-Popover.is-open").within(() => {
+          cy.get(".search-input input")
+          .type("save")
+          .blur()
+
+          cy.get(".search-input button").click({ force: true })
+
+          cy.get(".icon-area .icon-container").eq(0).click({ force: true })
+        })
+
+        cy.getComponent(iconId)
+          .find(".placeholder_wrap").should("not.exist")
+
+        cy.getComponent(iconId)
+          .find("i.ri-save-fill").should("exist")
+
+        cy.get(".nav-items-container .nav-item")
+          .contains(iconId)
+          .click({ force: true })
+
+        deleteSelectedComponent()
+      })
+    })
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 804b22f0fc..ba820526f0 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -472,7 +472,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
   if (component) {
     cy.get(`[data-cy="component-${component}"]`).click({ force: true })
   }
-  cy.wait(2000)
+  cy.wait(1000)
   cy.location().then(loc => {
     const params = loc.pathname.split("/")
     const componentId = params[params.length - 1]
@@ -487,9 +487,9 @@ Cypress.Commands.add("getComponent", componentId => {
     .its("0.contentDocument")
     .should("exist")
     .its("body")
-    .should("not.be.null")
+    .should("not.be.undefined")
     .then(cy.wrap)
-    .find(`[data-id=${componentId}]`)
+    .find(`[data-id='${componentId}']`)
 })
 
 Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 3ffc890c7d..2e6ee284b8 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -20,6 +20,7 @@ import analytics, { Events } from "analytics"
 import {
   findComponentType,
   findComponentParent,
+  findComponentPath,
   findClosestMatchingComponent,
   findAllMatchingComponents,
   findComponent,
@@ -422,6 +423,21 @@ export const getFrontendStore = () => {
         store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
+
+          const focusSetting = resolveComponentFocus(
+            asset?.props,
+            componentInstance
+          )
+          if (focusSetting) {
+            state.builderFocus = [
+              {
+                key: focusSetting.key,
+                target: state.selectedComponentId,
+                location: "component_settings",
+              },
+            ]
+          }
+
           return state
         })
 
@@ -664,5 +680,32 @@ export const getFrontendStore = () => {
     },
   }
 
+  // Determine the initial focus for newly created components
+  // Take into account the fact that data providers should be
+  // skipped if they will be inherited from the path
+  const resolveComponentFocus = (asset_props, componentInstance) => {
+    const definition = store.actions.components.getDefinition(
+      componentInstance._component
+    )
+    let providerIdx = -1
+    let required = definition.settings.filter((s, idx) => {
+      if (s.type === "dataProvider") {
+        providerIdx = idx
+      }
+      return s.required
+    })
+
+    if (providerIdx > -1) {
+      const path = findComponentPath(asset_props, componentInstance._id)
+      const providers = path.filter(c =>
+        c._component?.endsWith("/dataprovider")
+      )
+      if (providers.length) {
+        required = required.splice(providerIdx, 1)
+      }
+    }
+    return required[0]
+  }
+
   return store
 }
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index 44f88e841a..d95986d583 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -18,6 +18,7 @@
   export let options
   export let allowJS = true
   export let appendBindingsAsOptions = true
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -61,6 +62,7 @@
     on:pick={e => onChange(e.detail, true)}
     {placeholder}
     options={allOptions}
+    {autofocus}
   />
   {#if !disabled}
     <div
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 28bc50d15a..f58b3444ac 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -148,6 +148,21 @@
     }
   })
 
+  const resolveFocus = (data) => {
+    if($store.builderFocus){
+      const comp = $store.builderFocus.reduce((acc, item)=>{
+      acc = item.target
+        return acc
+      }, "")
+      if(data.id !== comp){
+          store.update(state => {
+          delete state.builderFocus
+          return state
+        })
+      }
+    }
+  }
+
   const handleBudibaseEvent = async event => {
     const { type, data } = event.data || event.detail
     if (!type) {
@@ -157,6 +172,7 @@
     try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
+        resolveFocus(data)
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
@@ -190,6 +206,12 @@
           store.actions.components.copy(source, true)
           await store.actions.components.paste(destination, data.mode)
         }
+      } else if(type == "builder-focus")  {
+        store.update(state => ({
+          ...state,
+          builderFocus : 
+          [...data]
+        }))
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index a043cca619..613a200541 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -3,29 +3,16 @@
   import { Input, DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
-  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
-  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
   import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
   import { getComponentForSettingType } from "./PropertyControls/componentSettings"
   import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
-  export let assetInstance
   export let bindings
   export let componentBindings
 
-  const layoutDefinition = []
-  const screenDefinition = [
-    { key: "description", label: "Description", control: Input },
-    { key: "routing.route", label: "Route", control: Input },
-    { key: "routing.roleId", label: "Access", control: RoleSelect },
-    { key: "layoutId", label: "Layout", control: LayoutSelect },
-  ]
-
   $: sections = getSections(componentDefinition)
-  $: isLayout = assetInstance && assetInstance.favicon
-  $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
 
   const getSections = definition => {
     const settings = definition?.settings ?? []
@@ -86,6 +73,15 @@
 
     return true
   }
+
+  const isFocused = setting => {
+    if (!$store.builderFocus) {
+      return false
+    }
+    return (
+      setting.required === true && $store.builderFocus[0].key === setting.key
+    )
+  }
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -120,6 +116,7 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
+          autofocus={isFocused(setting)}
         />
       {/if}
     {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
index a5b7a08255..b16530bfe6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@@ -6,6 +6,7 @@
   import { createEventDispatcher, onMount } from "svelte"
 
   export let value
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@@ -24,6 +25,7 @@
 
 <Select
   {value}
+  {autofocus}
   placeholder={null}
   on:change
   options={providers}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 1e19508744..2fe160f4df 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -25,6 +25,7 @@
   export let otherSources
   export let showAllQueries
   export let bindings = []
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const arrayTypes = ["attachment", "array"]
@@ -158,6 +159,7 @@
     value={text}
     options={[text]}
     on:click={dropdownRight.show}
+    {autofocus}
   />
   {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
@@ -184,7 +186,11 @@
     </Drawer>
   {/if}
 </div>
-<Popover bind:this={dropdownRight} anchor={anchorRight}>
+<Popover
+  bind:this={dropdownRight}
+  anchor={anchorRight}
+  dataCy={`dataSource-popover-${$store.selectedComponentId}`}
+>
   <div class="dropdown">
     <div class="title">
       <Heading size="XS">Tables</Heading>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
index 7d1741df17..edcc1ccf15 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@@ -10,6 +10,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -37,4 +38,10 @@
   }
 </script>
 
-<Select {placeholder} value={boundValue} on:change={onChange} {options} />
+<Select
+  {placeholder}
+  value={boundValue}
+  on:change={onChange}
+  {options}
+  {autofocus}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 1f08c56ff5..b30d442999 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -10,6 +10,7 @@
   export let componentInstance
   export let value
   export let type
+  export let autofocus = false
 
   $: form = findClosestMatchingComponent(
     $currentAsset?.props,
@@ -40,4 +41,4 @@
   }
 </script>
 
-<Combobox on:change {value} {options} />
+<Combobox on:change {value} {options} {autofocus} />
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
index 5f70a81c2b..821e44bf82 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@@ -15,6 +15,7 @@
 
   export let value = ""
   export let maxIconsPerPage = 30
+  export let autofocus = false
 
   let searchTerm = ""
   let selectedLetter = "A"
@@ -117,9 +118,16 @@
 </script>
 
 <div bind:this={buttonAnchor}>
-  <ActionButton on:click={dropdown.show}>{displayValue}</ActionButton>
+  <ActionButton on:click={dropdown.show} {autofocus}>
+    {displayValue}
+  </ActionButton>
 </div>
-<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
+<Popover
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}
+  dataCy="icon-popover"
+>
   <div class="container">
     <div class="search-area">
       <div class="alphabet-area">
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
index 485fde64fa..9e3a91bc41 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@@ -10,6 +10,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let autofocus
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -31,4 +32,10 @@
   }
 </script>
 
-<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
+<Multiselect
+  {placeholder}
+  value={boundValue}
+  on:change={setValue}
+  {options}
+  {autofocus}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 617b1c83ab..c2ead2eef9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -4,6 +4,8 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
+  import { setContext } from "svelte"
+  import { store } from "builderStore"
 
   export let label = ""
   export let componentInstance = {}
@@ -16,6 +18,7 @@
   export let bindings = []
   export let componentBindings = []
   export let nested = false
+  export let autofocus = false
 
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@@ -60,6 +63,28 @@
       ? defaultValue
       : enriched
   }
+
+  setContext("builderFocus", {
+    clear: () => {
+      if (!$store?.builderFocus) {
+        return
+      }
+      store.update(state => {
+        const updatedFocus = $store?.builderFocus?.filter(focus => {
+          return (
+            focus.location === "component_settings" &&
+            focus.target !== componentInstance._id
+          )
+        })
+        if (updatedFocus?.length > 0) {
+          state.builderFocus = updatedFocus
+        } else {
+          delete state.builderFocus
+        }
+        return state
+      })
+    },
+  })
 </script>
 
 <div class="property-control" data-cy={`setting-${key}`}>
@@ -82,6 +107,7 @@
       {key}
       {type}
       {...props}
+      {autofocus}
     />
   </div>
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
index dc2fa7ad89..581f0e7fd2 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
@@ -4,6 +4,7 @@
 
   export let value
   export let bindings
+  export let autofocus
 
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
@@ -16,4 +17,5 @@
   on:change
   options={urlOptions}
   appendBindingsAsOptions={false}
+  {autofocus}
 />
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b36563b202..da7c83cc6c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -15,7 +15,10 @@
     "description": "This component is specific only to layouts",
     "icon": "Sandbox",
     "hasChildren": true,
-    "styles": ["padding", "background"],
+    "styles": [
+      "padding",
+      "background"
+    ],
     "settings": [
       {
         "type": "text",
@@ -31,14 +34,23 @@
         "type": "select",
         "label": "Navigation",
         "key": "navigation",
-        "options": ["Top", "Left", "None"],
+        "options": [
+          "Top",
+          "Left",
+          "None"
+        ],
         "defaultValue": "Top"
       },
       {
         "type": "select",
         "label": "Width",
         "key": "width",
-        "options": ["Small", "Medium", "Large", "Max"],
+        "options": [
+          "Small",
+          "Medium",
+          "Large",
+          "Max"
+        ],
         "defaultValue": "Large"
       },
       {
@@ -72,7 +84,13 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "showSettingsBar": true,
-    "styles": ["padding", "size", "background", "border", "shadow"],
+    "styles": [
+      "padding",
+      "size",
+      "background",
+      "border",
+      "shadow"
+    ],
     "settings": [
       {
         "type": "select",
@@ -227,7 +245,9 @@
     "description": "Add a section to your application",
     "icon": "ColumnTwoB",
     "hasChildren": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "showEmptyState": false,
     "settings": [
       {
@@ -338,7 +358,9 @@
     "name": "Divider",
     "description": "A basic divider",
     "icon": "Separator",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "select",
@@ -371,14 +393,17 @@
     "name": "Repeater",
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "ViewList",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "hasChildren": true,
     "showSettingsBar": true,
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "text",
@@ -523,7 +548,9 @@
     "name": "Stacked List",
     "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -552,7 +579,9 @@
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewColumn",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -596,14 +625,24 @@
         "type": "select",
         "label": "Image Height",
         "key": "imageHeight",
-        "options": ["auto", "12rem", "16rem", "20rem", "24rem"],
+        "options": [
+          "auto",
+          "12rem",
+          "16rem",
+          "20rem",
+          "24rem"
+        ],
         "defaultValue": "auto"
       },
       {
         "type": "select",
         "label": "Card Width",
         "key": "cardWidth",
-        "options": ["16rem", "20rem", "24rem"],
+        "options": [
+          "16rem",
+          "20rem",
+          "24rem"
+        ],
         "defaultValue": "20rem"
       }
     ]
@@ -612,7 +651,9 @@
     "name": "Paragraph",
     "description": "A component for displaying paragraph text.",
     "icon": "TextParagraph",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "showSettingsBar": true,
     "editable": true,
     "settings": [
@@ -732,7 +773,9 @@
     "name": "Headline",
     "icon": "TextBold",
     "description": "A component for displaying heading text",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "showSettingsBar": true,
     "editable": true,
     "settings": [
@@ -903,13 +946,18 @@
     "name": "Image",
     "description": "A basic component for displaying images",
     "icon": "Image",
-    "illegalChildren": ["section"],
-    "styles": ["size"],
+    "illegalChildren": [
+      "section"
+    ],
+    "styles": [
+      "size"
+    ],
     "settings": [
       {
         "type": "text",
         "label": "URL",
-        "key": "url"
+        "key": "url",
+        "required": true
       }
     ]
   },
@@ -917,13 +965,18 @@
     "name": "Background Image",
     "description": "A background image",
     "icon": "Images",
-    "styles": ["size"],
-    "illegalChildren": ["section"],
+    "styles": [
+      "size"
+    ],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
         "label": "URL",
-        "key": "url"
+        "key": "url",
+        "required": true
       },
       {
         "type": "select",
@@ -975,12 +1028,15 @@
     "name": "Icon",
     "description": "A basic component for displaying icons",
     "icon": "Bell",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "icon",
         "label": "Icon",
-        "key": "icon"
+        "key": "icon",
+        "required": true
       },
       {
         "type": "select",
@@ -988,21 +1044,66 @@
         "key": "size",
         "defaultValue": "ri-1x",
         "options": [
-          { "value": "ri-xxs", "label": "XXS" },
-          { "value": "ri-xs", "label": "XS" },
-          { "value": "ri-sm", "label": "Small" },
-          { "value": "ri-1x", "label": "Medium" },
-          { "value": "ri-lg", "label": "Large" },
-          { "value": "ri-xl", "label": "XL" },
-          { "value": "ri-2x", "label": "2XL" },
-          { "value": "ri-3x", "label": "3XL" },
-          { "value": "ri-4x", "label": "4XL" },
-          { "value": "ri-5x", "label": "5XL" },
-          { "value": "ri-6x", "label": "6XL" },
-          { "value": "ri-7x", "label": "7XL" },
-          { "value": "ri-8x", "label": "8XL" },
-          { "value": "ri-9x", "label": "9XL" },
-          { "value": "ri-10x", "label": "10XL" }
+          {
+            "value": "ri-xxs",
+            "label": "XXS"
+          },
+          {
+            "value": "ri-xs",
+            "label": "XS"
+          },
+          {
+            "value": "ri-sm",
+            "label": "Small"
+          },
+          {
+            "value": "ri-1x",
+            "label": "Medium"
+          },
+          {
+            "value": "ri-lg",
+            "label": "Large"
+          },
+          {
+            "value": "ri-xl",
+            "label": "XL"
+          },
+          {
+            "value": "ri-2x",
+            "label": "2XL"
+          },
+          {
+            "value": "ri-3x",
+            "label": "3XL"
+          },
+          {
+            "value": "ri-4x",
+            "label": "4XL"
+          },
+          {
+            "value": "ri-5x",
+            "label": "5XL"
+          },
+          {
+            "value": "ri-6x",
+            "label": "6XL"
+          },
+          {
+            "value": "ri-7x",
+            "label": "7XL"
+          },
+          {
+            "value": "ri-8x",
+            "label": "8XL"
+          },
+          {
+            "value": "ri-9x",
+            "label": "9XL"
+          },
+          {
+            "value": "ri-10x",
+            "label": "10XL"
+          }
         ]
       },
       {
@@ -1022,7 +1123,9 @@
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
     "icon": "BreadcrumbNavigation",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "hasChildren": true,
     "settings": [
       {
@@ -1044,18 +1147,22 @@
     "icon": "Link",
     "showSettingsBar": true,
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
         "label": "Text",
-        "key": "text"
+        "key": "text",
+        "required": true
       },
       {
         "type": "url",
         "label": "URL",
         "key": "url",
-        "placeholder": "/screen"
+        "placeholder": "/screen",
+        "required": true
       },
       {
         "type": "boolean",
@@ -1157,7 +1264,9 @@
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewRow",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1221,14 +1330,25 @@
         "type": "select",
         "label": "Image Width",
         "key": "imageWidth",
-        "options": ["auto", "8rem", "12rem", "16rem"],
+        "options": [
+          "auto",
+          "8rem",
+          "12rem",
+          "16rem"
+        ],
         "defaultValue": "8rem"
       },
       {
         "type": "select",
         "label": "Image Height",
         "key": "imageHeight",
-        "options": ["auto", "8rem", "12rem", "16rem", "auto"],
+        "options": [
+          "auto",
+          "8rem",
+          "12rem",
+          "16rem",
+          "auto"
+        ],
         "defaultValue": "auto"
       }
     ]
@@ -1237,7 +1357,9 @@
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
     "icon": "Card",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1263,13 +1385,18 @@
     "name": "Embed",
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
-    "illegalChildren": ["section"],
-    "styles": ["size"],
+    "illegalChildren": [
+      "section"
+    ],
+    "styles": [
+      "size"
+    ],
     "settings": [
       {
         "type": "text",
         "label": "Embed",
-        "key": "embed"
+        "key": "embed",
+        "required": true
       }
     ]
   },
@@ -1277,7 +1404,9 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1287,25 +1416,32 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "multifield",
         "label": "Data Cols.",
         "key": "valueColumns",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "select",
         "label": "Format",
         "key": "yAxisUnits",
-        "options": ["Default", "Thousands", "Millions"],
+        "options": [
+          "Default",
+          "Thousands",
+          "Millions"
+        ],
         "defaultValue": "Default"
       },
       {
@@ -1383,7 +1519,9 @@
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1393,25 +1531,32 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "multifield",
         "label": "Data Cols.",
         "key": "valueColumns",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "select",
         "label": "Format",
         "key": "yAxisUnits",
-        "options": ["Default", "Thousands", "Millions"],
+        "options": [
+          "Default",
+          "Thousands",
+          "Millions"
+        ],
         "defaultValue": "Default"
       },
       {
@@ -1457,7 +1602,11 @@
         "type": "select",
         "label": "Curve",
         "key": "curve",
-        "options": ["Smooth", "Straight", "Stepline"],
+        "options": [
+          "Smooth",
+          "Straight",
+          "Stepline"
+        ],
         "defaultValue": "Smooth"
       },
       {
@@ -1484,7 +1633,9 @@
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1494,25 +1645,32 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "multifield",
         "label": "Data Cols.",
         "key": "valueColumns",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "select",
         "label": "Format",
         "key": "yAxisUnits",
-        "options": ["Default", "Thousands", "Millions"],
+        "options": [
+          "Default",
+          "Thousands",
+          "Millions"
+        ],
         "defaultValue": "Default"
       },
       {
@@ -1558,7 +1716,11 @@
         "type": "select",
         "label": "Curve",
         "key": "curve",
-        "options": ["Smooth", "Straight", "Stepline"],
+        "options": [
+          "Smooth",
+          "Straight",
+          "Stepline"
+        ],
         "defaultValue": "Smooth"
       },
       {
@@ -1597,7 +1759,9 @@
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1607,19 +1771,22 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Data Col.",
         "key": "valueColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "text",
@@ -1674,7 +1841,9 @@
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1684,19 +1853,22 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Data Col.",
         "key": "valueColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "text",
@@ -1751,7 +1923,9 @@
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "text",
@@ -1761,43 +1935,53 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Date Col.",
         "key": "dateColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Open Col.",
         "key": "openColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Close Col.",
         "key": "closeColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "High Col.",
         "key": "highColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Low Col.",
         "key": "lowColumn",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "select",
         "label": "Format",
         "key": "yAxisUnits",
-        "options": ["Default", "Thousands", "Millions"],
+        "options": [
+          "Default",
+          "Thousands",
+          "Millions"
+        ],
         "defaultValue": "Default"
       },
       {
@@ -1833,20 +2017,28 @@
     "name": "Form",
     "icon": "Form",
     "hasChildren": true,
-    "illegalChildren": ["section", "form"],
+    "illegalChildren": [
+      "section",
+      "form"
+    ],
     "actions": [
       "ValidateForm",
       "ClearForm",
       "ChangeFormStep",
       "UpdateFieldValue"
     ],
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "settings": [
       {
         "type": "select",
         "label": "Type",
         "key": "actionType",
-        "options": ["Create", "Update"],
+        "options": [
+          "Create",
+          "Update"
+        ],
         "defaultValue": "Create"
       },
       {
@@ -1912,8 +2104,14 @@
     "name": "Form Step",
     "icon": "AssetsAdded",
     "hasChildren": true,
-    "illegalChildren": ["section", "form", "form step"],
-    "styles": ["size"],
+    "illegalChildren": [
+      "section",
+      "form",
+      "form step"
+    ],
+    "styles": [
+      "size"
+    ],
     "settings": [
       {
         "type": "number",
@@ -1927,8 +2125,12 @@
   "fieldgroup": {
     "name": "Field Group",
     "icon": "Group",
-    "illegalChildren": ["section"],
-    "styles": ["size"],
+    "illegalChildren": [
+      "section"
+    ],
+    "styles": [
+      "size"
+    ],
     "hasChildren": true,
     "settings": [
       {
@@ -1956,14 +2158,19 @@
   "stringfield": {
     "name": "Text Field",
     "icon": "Text",
-    "illegalChildren": ["section"],
-    "styles": ["size"],
+    "illegalChildren": [
+      "section"
+    ],
+    "styles": [
+      "size"
+    ],
     "editable": true,
     "settings": [
       {
         "type": "field/string",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2041,14 +2248,19 @@
   "numberfield": {
     "name": "Number Field",
     "icon": "123",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/number",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2092,14 +2304,19 @@
   "passwordfield": {
     "name": "Password Field",
     "icon": "LockClosed",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/string",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2143,14 +2360,19 @@
   "optionsfield": {
     "name": "Options Picker",
     "icon": "ViewList",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/options",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2257,6 +2479,7 @@
         "type": "dataProvider",
         "label": "Options Provider",
         "key": "dataProvider",
+        "required": true,
         "dependsOn": {
           "setting": "optionsSource",
           "value": "provider"
@@ -2298,14 +2521,19 @@
   "multifieldselect": {
     "name": "Multi-select Picker",
     "icon": "ViewList",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/array",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2412,6 +2640,7 @@
         "type": "dataProvider",
         "label": "Options Provider",
         "key": "dataProvider",
+        "required": true,
         "dependsOn": {
           "setting": "optionsSource",
           "value": "provider"
@@ -2454,12 +2683,15 @@
     "name": "Checkbox",
     "icon": "Checkmark",
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/boolean",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2527,13 +2759,16 @@
   "longformfield": {
     "name": "Long Form Field",
     "icon": "TextParagraph",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
     "settings": [
       {
         "type": "field/longform",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2599,14 +2834,19 @@
   "datetimefield": {
     "name": "Date Picker",
     "icon": "DateInput",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/datetime",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2662,26 +2902,33 @@
   "embeddedmap": {
     "name": "Embedded Map",
     "icon": "Location",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "draggable": false,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Latitude Key",
         "key": "latitudeKey",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Longitude Key",
         "key": "longitudeKey",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
@@ -2746,7 +2993,6 @@
         "key": "tileURL",
         "defaultValue": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       },
-
       {
         "type": "text",
         "label": "Default Location (when empty)",
@@ -2772,14 +3018,19 @@
   "attachmentfield": {
     "name": "Attachment",
     "icon": "Attach",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/attachment",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2824,14 +3075,19 @@
   "relationshipfield": {
     "name": "Relationship Picker",
     "icon": "TaskList",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "settings": [
       {
         "type": "field/link",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2881,13 +3137,16 @@
   "jsonfield": {
     "name": "JSON Field",
     "icon": "Brackets",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
     "settings": [
       {
         "type": "field/json",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2927,13 +3186,16 @@
     "name": "S3 File Upload",
     "info": "This component can't be used with S3 datasources that use custom endpoints.",
     "icon": "UploadToCloud",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "editable": true,
     "settings": [
       {
         "type": "field/attachment",
         "label": "Field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "text",
@@ -2983,14 +3245,19 @@
     "name": "Data Provider",
     "info": "Pagination is only available for data stored in tables.",
     "icon": "Data",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "hasChildren": true,
-    "actions": ["RefreshDatasource"],
+    "actions": [
+      "RefreshDatasource"
+    ],
     "settings": [
       {
         "type": "dataSource",
         "label": "Data",
-        "key": "dataSource"
+        "key": "dataSource",
+        "required": true
       },
       {
         "type": "filter",
@@ -3006,7 +3273,10 @@
         "type": "select",
         "label": "Sort Order",
         "key": "sortOrder",
-        "options": ["Ascending", "Descending"],
+        "options": [
+          "Ascending",
+          "Descending"
+        ],
         "defaultValue": "Descending"
       },
       {
@@ -3051,15 +3321,18 @@
   "table": {
     "name": "Table",
     "icon": "Table",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "hasChildren": true,
     "showEmptyState": false,
-    "info": "Row selection is only compatible with internal or SQL tables", 
+    "info": "Row selection is only compatible with internal or SQL tables",
     "settings": [
       {
         "type": "dataProvider",
         "label": "Data provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "number",
@@ -3112,7 +3385,6 @@
         "key": "allowSelectRows",
         "defaultValue": false
       },
-
       {
         "type": "boolean",
         "label": "Link table rows",
@@ -3148,19 +3420,23 @@
   "daterangepicker": {
     "name": "Date Range",
     "icon": "Date",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "hasChildren": false,
     "info": "Your data provider will be automatically filtered to the given date range.",
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "field",
         "label": "Date field",
-        "key": "field"
+        "key": "field",
+        "required": true
       },
       {
         "type": "select",
@@ -3181,7 +3457,9 @@
   "spectrumcard": {
     "name": "Card",
     "icon": "Card",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "settings": [
       {
         "type": "text",
@@ -3243,7 +3521,8 @@
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider"
+        "key": "dataProvider",
+        "required": true
       },
       {
         "type": "multifield",
@@ -3282,7 +3561,9 @@
     "block": true,
     "name": "Table block",
     "icon": "Table",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "info": "Only the first 3 search columns will be used.",
     "settings": [
       {
@@ -3293,7 +3574,8 @@
       {
         "type": "dataSource",
         "label": "Data",
-        "key": "dataSource"
+        "key": "dataSource",
+        "required": true
       },
       {
         "type": "searchfield",
@@ -3315,7 +3597,10 @@
         "type": "select",
         "label": "Sort Order",
         "key": "sortOrder",
-        "options": ["Ascending", "Descending"],
+        "options": [
+          "Ascending",
+          "Descending"
+        ],
         "defaultValue": "Descending"
       },
       {
@@ -3441,7 +3726,9 @@
     "block": true,
     "name": "Cards block",
     "icon": "Table",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "info": "Only the first 3 search columns will be used.",
     "settings": [
       {
@@ -3452,7 +3739,8 @@
       {
         "type": "dataSource",
         "label": "Data",
-        "key": "dataSource"
+        "key": "dataSource",
+        "required": true
       },
       {
         "type": "searchfield",
@@ -3474,7 +3762,10 @@
         "type": "select",
         "label": "Sort Order",
         "key": "sortOrder",
-        "options": ["Ascending", "Descending"],
+        "options": [
+          "Ascending",
+          "Descending"
+        ],
         "defaultValue": "Descending"
       },
       {
@@ -3603,14 +3894,17 @@
   "repeaterblock": {
     "name": "Repeater block",
     "icon": "ViewList",
-    "illegalChildren": ["section"],
+    "illegalChildren": [
+      "section"
+    ],
     "hasChildren": true,
     "showSettingsBar": true,
     "settings": [
       {
         "type": "dataSource",
         "label": "Data",
-        "key": "dataSource"
+        "key": "dataSource",
+        "required": true
       },
       {
         "type": "filter",
@@ -3626,7 +3920,10 @@
         "type": "select",
         "label": "Sort Order",
         "key": "sortOrder",
-        "options": ["Ascending", "Descending"],
+        "options": [
+          "Ascending",
+          "Descending"
+        ],
         "defaultValue": "Descending"
       },
       {
@@ -3815,13 +4112,16 @@
   "markdownviewer": {
     "name": "Markdown Viewer",
     "icon": "TaskList",
-    "styles": ["size"],
+    "styles": [
+      "size"
+    ],
     "settings": [
       {
         "type": "text",
         "label": "Markdown",
-        "key": "value"
+        "key": "value",
+        "required": true
       }
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3c29cb875b..a1550cf72f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -154,6 +154,7 @@
     selected,
     name,
     editing,
+    type: instance._component,
   })
 
   const initialise = instance => {
diff --git a/packages/client/src/components/app/Icon.svelte b/packages/client/src/components/app/Icon.svelte
index 829cc60227..87a477c633 100644
--- a/packages/client/src/components/app/Icon.svelte
+++ b/packages/client/src/components/app/Icon.svelte
@@ -33,9 +33,6 @@
 {/if}
 
 <style>
-  div {
-    font-style: italic;
-  }
   @media (hover: hover) {
     .hoverable:hover {
       color: var(--spectrum-alias-icon-color-selected-hover) !important;
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index 79bf296208..5ac8a4f9ec 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/packages/client/src/components/app/Link.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -79,7 +80,11 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if externalLink || openInNewTab}
+  {#if !url && !text}
+    <div use:styleable={{ ...$component.styles, empty: true }}>
+      <Placeholder />
+    </div>
+  {:else if externalLink || openInNewTab}
     <a
       {target}
       href={sanitizedUrl}
diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte
index 203071e0b1..4fb182ff12 100644
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/packages/client/src/components/app/Placeholder.svelte
@@ -1,15 +1,67 @@
 <script>
   import { getContext } from "svelte"
+  import Manifest from "manifest.json"
+  import { builderStore } from "stores"
 
-  const { builderStore } = getContext("sdk")
+  const { componentStore } = getContext("sdk")
   const component = getContext("component")
 
   export let text
+
+  $: componentInstance = componentStore.actions.getComponentById($component.id)
+
+  const getComponentKey = compId => {
+    if (!compId) {
+      return
+    }
+    const prefix = "@budibase/standard-components/"
+    let componentKey = compId.replace(prefix, "")
+    return componentKey
+  }
+
+  const emptyFields = (definition, options) => {
+    if (!options) {
+      return []
+    }
+    return definition?.settings
+      ? definition.settings.filter(setting => {
+          return (
+            setting.required &&
+            (!options[setting.key] || options[setting.key] == "")
+          )
+        })
+      : []
+  }
+  const definition = Manifest[getComponentKey($component.type)]
+  $: focus_setting = emptyFields(definition, componentInstance)[0]
 </script>
 
 {#if $builderStore.inBuilder}
-  <div>
-    {text || $component.name || "Placeholder"}
+  <div class="placeholder_wrap">
+    {#if componentInstance && focus_setting}
+      <div>
+        <span>
+          Add the <mark>{focus_setting?.label}</mark> setting to start using your
+          component &nbsp;
+        </span>
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus([
+              {
+                location: "component_settings",
+                key: focus_setting.key,
+                target: $component.id,
+              },
+            ])
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    {:else}
+      {text || $component.name || "Placeholder"}
+    {/if}
   </div>
 {/if}
 
@@ -17,5 +69,18 @@
   div {
     color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
+    padding: var(--spacing-xs);
+  }
+  :global(div.placeholder_wrap mark) {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0px 2px;
+    border-radius: 2px;
+  }
+  :global(div.placeholder_wrap .showMe) {
+    cursor: pointer;
+  }
+  :global(div.placeholder_wrap .showMe:hover) {
+    text-decoration: underline;
+    cursor: pointer;
   }
 </style>
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index 413d1df65e..247a8b0d51 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@@ -39,7 +39,7 @@
       }}
     >
       {#if $component.empty}
-        <Placeholder text={$component.name} />
+        <Placeholder />
       {:else}
         <BlockComponent
           type="repeater"
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 329fb1ce75..7bb37a587b 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -13,7 +13,7 @@
   <div use:chart={options} use:styleable={$component.styles} />
 {:else if $builderStore.inBuilder}
   <div use:styleable={$component.styles}>
-    <Placeholder text="Use the settings panel to build your chart" />
+    <Placeholder />
   </div>
 {/if}
 
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index af1bb478fe..f1e02d8af6 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -53,7 +53,6 @@
     palette,
     horizontal
   ) => {
-    console.log("new chart")
     const allCols = [labelColumn, ...(valueColumns || [null])]
     if (
       !dataProvider ||
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index b267f6caff..dbdb21d559 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -76,9 +76,9 @@
       {#if !formContext}
         <Placeholder text="Form components need to be wrapped in a form" />
       {:else if !fieldState}
-        <Placeholder
-          text="Add the Field setting to start using your component"
-        />
+        {#if $builderStore.inBuilder}
+          <Placeholder />
+        {/if}
       {:else if schemaType && schemaType !== type && type !== "options"}
         <Placeholder
           text="This Field setting is the wrong data type for this component"
@@ -100,12 +100,10 @@
   label.hidden {
     padding: 0;
   }
-
   .spectrum-Form-itemField {
     position: relative;
     width: 100%;
   }
-
   .error {
     color: var(
       --spectrum-semantic-negative-color-default,
@@ -114,7 +112,6 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-top: var(--spectrum-global-dimension-size-75);
   }
-
   .spectrum-FieldLabel--right,
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 6d57ce7762..59ba94a636 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -76,6 +76,9 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
+    setFocus: data => {
+      window.parent.postMessage({ type: "builder-focus", data })
+    },
   }
   return {
     ...store,