diff --git a/.eslintignore b/.eslintignore
index 8d4c64d960..f2c53c2fdc 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,6 +6,7 @@ packages/server/coverage
 packages/worker/coverage
 packages/backend-core/coverage
 packages/server/client
+packages/server/coverage
 packages/builder/.routify
 packages/sdk/sdk
 packages/account-portal/packages/server/build
diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index ae86695168..6cea7efeba 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -10,7 +10,7 @@ import {
   StaticDatabases,
   DEFAULT_TENANT_ID,
 } from "../constants"
-import { Database, IdentityContext } from "@budibase/types"
+import { Database, IdentityContext, Snippet, App } from "@budibase/types"
 import { ContextMap } from "./types"
 
 let TEST_APP_ID: string | null = null
@@ -122,10 +122,10 @@ export async function doInAutomationContext<T>(params: {
   automationId: string
   task: () => T
 }): Promise<T> {
-  const tenantId = getTenantIDFromAppID(params.appId)
+  await ensureSnippetContext()
   return newContext(
     {
-      tenantId,
+      tenantId: getTenantIDFromAppID(params.appId),
       appId: params.appId,
       automationId: params.automationId,
     },
@@ -281,6 +281,27 @@ export function doInScimContext(task: any) {
   return newContext(updates, task)
 }
 
+export async function ensureSnippetContext() {
+  const ctx = getCurrentContext()
+
+  // If we've already added snippets to context, continue
+  if (!ctx || ctx.snippets) {
+    return
+  }
+
+  // Otherwise get snippets for this app and update context
+  let snippets: Snippet[] | undefined
+  const db = getAppDB()
+  if (db && !env.isTest()) {
+    const app = await db.get<App>(DocumentType.APP_METADATA)
+    snippets = app.snippets
+  }
+
+  // Always set snippets to a non-null value so that we can tell we've attempted
+  // to load snippets
+  ctx.snippets = snippets || []
+}
+
 export function getEnvironmentVariables() {
   const context = Context.get()
   if (!context.environmentVariables) {
diff --git a/packages/backend-core/src/context/types.ts b/packages/backend-core/src/context/types.ts
index 8ea544a53c..f297d3089f 100644
--- a/packages/backend-core/src/context/types.ts
+++ b/packages/backend-core/src/context/types.ts
@@ -1,4 +1,4 @@
-import { IdentityContext, VM } from "@budibase/types"
+import { IdentityContext, Snippet, VM } from "@budibase/types"
 
 // keep this out of Budibase types, don't want to expose context info
 export type ContextMap = {
@@ -11,4 +11,5 @@ export type ContextMap = {
   isMigrating?: boolean
   vm?: VM
   cleanup?: (() => void | Promise<void>)[]
+  snippets?: Snippet[]
 }
diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 1961dca47c..12c4c4d002 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -32,6 +32,13 @@ const handleClick = event => {
       return
     }
 
+    // Ignore clicks for drawers, unless the handler is registered from a drawer
+    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
+    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
+    if (clickInDrawer && !sourceInDrawer) {
+      return
+    }
+
     handler.callback?.(event)
   })
 }
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index d259b9197a..770d1bd507 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -15,6 +15,7 @@ export default function positionDropdown(element, opts) {
       align,
       maxHeight,
       maxWidth,
+      minWidth,
       useAnchorWidth,
       offset = 5,
       customUpdate,
@@ -28,7 +29,7 @@ export default function positionDropdown(element, opts) {
     const elementBounds = element.getBoundingClientRect()
     let styles = {
       maxHeight: null,
-      minWidth: null,
+      minWidth,
       maxWidth,
       left: null,
       top: null,
@@ -41,8 +42,13 @@ export default function positionDropdown(element, opts) {
       })
     } else {
       // Determine vertical styles
-      if (align === "right-outside") {
-        styles.top = anchorBounds.top
+      if (align === "right-outside" || align === "left-outside") {
+        styles.top =
+          anchorBounds.top + anchorBounds.height / 2 - elementBounds.height / 2
+        styles.maxHeight = maxHeight
+        if (styles.top + elementBounds.height > window.innerHeight) {
+          styles.top = window.innerHeight - elementBounds.height
+        }
       } else if (
         window.innerHeight - anchorBounds.bottom <
         (maxHeight || 100)
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 8976bfb81e..89ee92726d 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,28 +1,111 @@
+<script context="module">
+  import { writable, get } from "svelte/store"
+
+  // Observe this class name if possible in order to know how to size the
+  // drawer. If this doesn't exist we'll use a fixed size.
+  const drawerContainer = "drawer-container"
+
+  // Context level stores to keep drawers in sync
+  const openDrawers = writable([])
+  const modal = writable(false)
+  const resizable = writable(true)
+  const drawerLeft = writable(null)
+  const drawerWidth = writable(null)
+
+  // Resize observer to keep track of size changes
+  let observer
+
+  // Starts observing the target node to watching to size changes.
+  // Invoked when the first drawer of a chain is rendered.
+  const observe = () => {
+    const target = document.getElementsByClassName(drawerContainer)[0]
+    if (observer || !target) {
+      return
+    }
+    observer = new ResizeObserver(entries => {
+      if (!entries?.[0]) {
+        return
+      }
+      const bounds = entries[0].target.getBoundingClientRect()
+      drawerLeft.set(bounds.left)
+      drawerWidth.set(bounds.width)
+    })
+    observer.observe(target)
+
+    // Manually measure once to ensure that we have dimensions for the initial
+    // paint
+    const bounds = target.getBoundingClientRect()
+    drawerLeft.set(bounds.left)
+    drawerWidth.set(bounds.width)
+  }
+
+  // Stops observing the target node.
+  // Invoked when the last drawer of a chain is removed.
+  const unobserve = () => {
+    if (get(openDrawers).length) {
+      return
+    }
+    observer?.disconnect()
+
+    // Reset state
+    observer = null
+    modal.set(false)
+    resizable.set(true)
+    drawerLeft.set(null)
+    drawerWidth.set(null)
+  }
+</script>
+
 <script>
-  import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import Body from "../Typography/Body.svelte"
-  import Heading from "../Typography/Heading.svelte"
-  import { setContext, createEventDispatcher } from "svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Portal from "svelte-portal"
+  import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
 
   export let title
-  export let fillWidth
-  export let left = "314px"
-  export let width = "calc(100% - 626px)"
-  export let headless = false
+  export let forceModal = false
 
   const dispatch = createEventDispatcher()
+  const spacing = 11
 
   let visible = false
   let drawerId = generate()
 
+  $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
+  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal)
+
+  const getStyle = (depth, left, width, modal) => {
+    let style = `
+      --scale-factor: ${getScaleFactor(depth)};
+      --spacing: ${spacing}px;
+    `
+    // Most modal styles are handled by class names
+    if (modal || left == null || width == null) {
+      return style
+    }
+
+    // Drawers observing another dom node need custom position styles
+    return `
+      ${style}
+      left: ${left + spacing}px;
+      width: ${width - 2 * spacing}px;
+    `
+  }
+
   export function show() {
     if (visible) {
       return
     }
+    if (forceModal) {
+      modal.set(true)
+      resizable.set(false)
+    }
+    observe()
     visible = true
     dispatch("drawerShow", drawerId)
+    openDrawers.update(state => [...state, drawerId])
   }
 
   export function hide() {
@@ -31,12 +114,15 @@
     }
     visible = false
     dispatch("drawerHide", drawerId)
+    openDrawers.update(state => state.filter(id => id !== drawerId))
+    unobserve()
   }
 
-  setContext("drawer-actions", {
+  setContext("drawer", {
     hide,
     show,
-    headless,
+    modal,
+    resizable,
   })
 
   const easeInOutQuad = x => {
@@ -45,66 +131,142 @@
 
   // Use a custom svelte transition here because the built-in slide
   // transition has a horrible overshoot
-  const slide = () => {
+  const drawerSlide = () => {
     return {
-      duration: 360,
+      duration: 260,
       css: t => {
-        const translation = 100 - Math.round(easeInOutQuad(t) * 100)
-        return `transform: translateY(${translation}%);`
+        const f = easeInOutQuad(t)
+        const yOffset = (1 - f) * 200
+        return `
+          transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor))));
+          opacity: ${f};
+        `
       },
     }
   }
+
+  // Custom fade transition because the default svelte one doesn't work any more
+  // with svelte 4
+  const drawerFade = () => {
+    return {
+      duration: 260,
+      css: t => {
+        return `opacity: ${easeInOutQuad(t)};`
+      },
+    }
+  }
+
+  const getScaleFactor = depth => {
+    // Quadratic function approaching a limit of 1 as depth tends to infinity
+    const lim = 1 - 1 / (depth * depth + 1)
+    // Scale drawers between 1 and 0.9 as depth approaches infinity
+    return 1 - lim * 0.1
+  }
+
+  onDestroy(() => {
+    if (visible) {
+      hide()
+    }
+  })
 </script>
 
 {#if visible}
-  <Portal>
-    <section
-      class:fillWidth
-      class="drawer"
-      class:headless
-      transition:slide|local
-      style={`width: ${width}; left: ${left};`}
-    >
-      {#if !headless}
+  <Portal target=".modal-container">
+    <!-- This class is unstyled, but needed by click_outside -->
+    <div class="drawer-wrapper">
+      <div
+        class="underlay"
+        class:hidden={!$modal}
+        transition:drawerFade|local
+      />
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:drawerSlide|local
+        {style}
+      >
         <header>
-          <div class="text">
-            <Heading size="XS">{title}</Heading>
-            <Body size="S">
-              <slot name="description" />
-            </Body>
-          </div>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
+          {/if}
           <div class="buttons">
             <Button secondary quiet on:click={hide}>Cancel</Button>
             <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
           </div>
         </header>
-      {/if}
-      <slot name="body" />
-    </section>
+        <slot name="body" />
+        <div class="overlay" class:hidden={$modal || depth === 0} />
+      </div>
+    </div>
   </Portal>
 {/if}
 
 <style>
-  .drawer.headless :global(.drawer-contents) {
-    height: calc(40vh + 75px);
-  }
-
-  .buttons {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
   .drawer {
     position: absolute;
-    bottom: 0;
+    left: 25vw;
+    width: 50vw;
+    bottom: var(--spacing);
+    height: 420px;
     background: var(--background);
-    border-top: var(--border-light);
-    z-index: 3;
+    border: var(--border-light);
+    z-index: 100;
+    border-radius: 8px;
+    overflow: hidden;
+    box-sizing: border-box;
+    transition: transform 260ms ease-out, bottom 260ms ease-out,
+      left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .drawer.modal {
+    left: 15vw;
+    width: 70vw;
+    bottom: 15vh;
+    height: 70vh;
+  }
+  .drawer.stacked {
+    transform: translateY(calc(-1 * 1024px * (1 - var(--scale-factor))))
+      scale(var(--scale-factor));
   }
 
-  .fillWidth {
-    left: 260px !important;
-    width: calc(100% - 260px) !important;
+  .overlay,
+  .underlay {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: block;
+    transition: opacity 260ms ease-out;
+  }
+  .overlay {
+    position: absolute;
+    background: var(--background);
+    opacity: 0.5;
+  }
+  .underlay {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .underlay.hidden,
+  .overlay.hidden {
+    opacity: 0 !important;
+    pointer-events: none;
   }
 
   header {
@@ -112,10 +274,9 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: var(--spacing-l) var(--spacing-xl);
+    padding: var(--spacing-m) var(--spacing-xl);
     gap: var(--spacing-xl);
   }
-
   .text {
     display: flex;
     flex-direction: column;
@@ -123,7 +284,6 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
-
   .buttons {
     display: flex;
     flex-direction: row;
@@ -131,4 +291,8 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+  .buttons :global(.icon) {
+    width: 16px;
+    display: flex;
+  }
 </style>
diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 944a3f4313..490dfecc31 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -1,4 +1,8 @@
-<div class="drawer-contents">
+<script>
+  export let padding = true
+</script>
+
+<div class="drawer-contents" class:padding>
   <div class:no-sidebar={!$$slots.sidebar} class="container">
     {#if $$slots.sidebar}
       <div class="sidebar">
@@ -13,8 +17,8 @@
 
 <style>
   .drawer-contents {
-    height: 40vh;
     overflow-y: auto;
+    flex: 1 1 auto;
   }
   .container {
     height: 100%;
@@ -27,14 +31,22 @@
   .sidebar {
     border-right: var(--border-light);
     overflow: auto;
-    padding: var(--spacing-xl);
     scrollbar-width: none;
   }
+  .padding .sidebar {
+    padding: var(--spacing-xl);
+  }
   .sidebar::-webkit-scrollbar {
     display: none;
   }
   .main {
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .padding .main {
     padding: var(--spacing-xl);
+    height: calc(100% - var(--spacing-xl) * 2);
   }
   .main :global(textarea) {
     min-height: 200px;
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 275c339bf4..13452cf981 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -14,6 +14,7 @@
   export let disabled = false
   export let color
   export let tooltip
+  export let newStyles = false
 
   $: rotation = getRotation(direction)
 
@@ -28,6 +29,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon"
+  class:newStyles
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
@@ -60,6 +62,9 @@
     display: grid;
     place-items: center;
   }
+  .newStyles {
+    color: var(--spectrum-global-color-gray-700);
+  }
 
   svg.hoverable {
     pointer-events: all;
@@ -72,7 +77,10 @@
   svg.hoverable:active {
     color: var(--spectrum-global-color-blue-400) !important;
   }
-
+  .newStyles svg.hoverable:hover,
+  .newStyles svg.hoverable:active {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
   svg.disabled {
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index f891d0584d..be9c338892 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -10,6 +10,7 @@
   export let inline = false
   export let disableCancel = false
   export let autoFocus = true
+  export let zIndex = 999
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
@@ -101,7 +102,11 @@
   <Portal target=".modal-container">
     {#if visible}
       <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
+      <div
+        class="spectrum-Underlay is-open"
+        on:mousedown|self={cancel}
+        style="z-index:{zIndex || 999}"
+      >
         <div
           class="background"
           in:fade={{ duration: 200 }}
@@ -132,7 +137,6 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    z-index: 999;
     overflow: auto;
     overflow-x: hidden;
     background: transparent;
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 9194a5b45c..1391348f43 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -12,6 +12,7 @@
   export let anchor
   export let align = "right"
   export let portalTarget
+  export let minWidth
   export let maxWidth
   export let maxHeight
   export let open = false
@@ -21,7 +22,6 @@
   export let customHeight
   export let animate = true
   export let customZindex
-
   export let handlePostionUpdate
   export let showPopover = true
   export let clickOutsideOverride = false
@@ -87,6 +87,7 @@
         align,
         maxHeight,
         maxWidth,
+        minWidth,
         useAnchorWidth,
         offset,
         customUpdate: handlePostionUpdate,
@@ -102,6 +103,8 @@
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      on:mouseenter
+      on:mouseleave
     >
       <slot />
     </div>
diff --git a/packages/builder/package.json b/packages/builder/package.json
index e66c747505..f61ac4fe26 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -66,10 +66,11 @@
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
     "@zerodevx/svelte-json-view": "^1.0.7",
-    "codemirror": "^5.59.0",
+    "codemirror": "^5.65.16",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",
+    "json-format-highlight": "^1.0.4",
     "lodash": "4.17.21",
     "posthog-js": "^1.36.0",
     "remixicon": "2.5.0",
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 582db950fe..ac1c4f91cb 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -49,7 +49,7 @@
   <div class="side-bar-controls">
     <NavHeader
       title="Automations"
-      placeholder="Search for automation"
+      placeholder="Search for automations"
       bind:value={searchString}
       onAdd={() => modal.show()}
     />
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 707317f9e6..7fa2401c88 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -12,7 +12,6 @@
     Drawer,
     Modal,
     notifications,
-    Icon,
     Checkbox,
     DatePicker,
   } from "@budibase/bbui"
@@ -31,7 +30,7 @@
   import Editor from "components/integration/QueryEditor.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import BindingPicker from "components/common/bindings/BindingPicker.svelte"
+  import BindingSidePanel from "components/common/bindings/BindingSidePanel.svelte"
   import { BindingHelpers } from "components/common/bindings/utils"
   import {
     bindingsToCompletions,
@@ -52,11 +51,12 @@
   export let testData
   export let schemaProperties
   export let isTestModal = false
+
   let webhookModal
   let drawer
-  let fillWidth = true
   let inputData
   let insertAtPos, getCaretPosition
+
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
   $: stepId = block.stepId
@@ -80,7 +80,6 @@
   })
   $: editingJs = codeMode === EditorModes.JS
   $: requiredProperties = block.schema.inputs.required || []
-
   $: stepCompletions =
     codeMode === EditorModes.Handlebars
       ? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
@@ -377,12 +376,13 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     {#if canShowField(key, value)}
+      {@const label = getFieldLabel(key, value)}
       <div class:block-field={shouldRenderField(value)}>
         {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
           <Label
             tooltip={value.title === "Binding / Value"
               ? "If using the String input type, please use a comma or newline separated string"
-              : null}>{getFieldLabel(key, value)}</Label
+              : null}>{label}</Label
           >
         {/if}
         <div class:field-width={shouldRenderField(value)}>
@@ -415,8 +415,7 @@
             </div>
           {:else if value.type === "date"}
             <DrawerBindableSlot
-              fillWidth
-              title={value.title}
+              title={value.title ?? label}
               panel={AutomationBindingPanel}
               type={"date"}
               value={inputData[key]}
@@ -439,7 +438,7 @@
             />
           {:else if value.customType === "filters"}
             <ActionButton on:click={drawer.show}>Define filters</ActionButton>
-            <Drawer bind:this={drawer} {fillWidth} title="Filtering">
+            <Drawer bind:this={drawer} title="Filtering">
               <Button cta slot="buttons" on:click={() => saveFilters(key)}>
                 Save
               </Button>
@@ -450,7 +449,6 @@
                 {schemaFields}
                 datasource={{ type: "table", tableId }}
                 panel={AutomationBindingPanel}
-                fillWidth
                 on:change={e => (tempFilters = e.detail)}
               />
             </Drawer>
@@ -463,19 +461,17 @@
           {:else if value.customType === "email"}
             {#if isTestModal}
               <ModalBindableInput
-                title={value.title}
+                title={value.title ?? label}
                 value={inputData[key]}
                 panel={AutomationBindingPanel}
                 type="email"
                 on:change={e => onChange(e, key)}
                 {bindings}
-                fillWidth
                 updateOnChange={false}
               />
             {:else}
               <DrawerBindableInput
-                fillWidth
-                title={value.title}
+                title={value.title ?? label}
                 panel={AutomationBindingPanel}
                 type="email"
                 value={inputData[key]}
@@ -550,7 +546,7 @@
           {:else if value.customType === "code"}
             <CodeEditorModal>
               <div class:js-editor={editingJs}>
-                <div class:js-code={editingJs} style="width: 100%">
+                <div class:js-code={editingJs} style="width:100%;height:500px;">
                   <CodeEditor
                     value={inputData[key]}
                     on:change={e => {
@@ -563,24 +559,14 @@
                     autocompleteEnabled={codeMode !== EditorModes.JS}
                     bind:getCaretPosition
                     bind:insertAtPos
-                    height={500}
+                    placeholder={codeMode === EditorModes.Handlebars
+                      ? "Add bindings by typing {{"
+                      : null}
                   />
-                  <div class="messaging">
-                    {#if codeMode === EditorModes.Handlebars}
-                      <Icon name="FlashOn" />
-                      <div class="messaging-wrap">
-                        <div>
-                          Add available bindings by typing <strong>
-                            &#125;&#125;
-                          </strong>
-                        </div>
-                      </div>
-                    {/if}
-                  </div>
                 </div>
                 {#if editingJs}
                   <div class="js-binding-picker">
-                    <BindingPicker
+                    <BindingSidePanel
                       {bindings}
                       allowHelpers={false}
                       addBinding={binding =>
@@ -609,7 +595,7 @@
           {:else if value.type === "string" || value.type === "number" || value.type === "integer"}
             {#if isTestModal}
               <ModalBindableInput
-                title={value.title}
+                title={value.title || label}
                 value={inputData[key]}
                 panel={AutomationBindingPanel}
                 type={value.customType}
@@ -620,8 +606,7 @@
             {:else}
               <div class="test">
                 <DrawerBindableInput
-                  fillWidth={true}
-                  title={value.title}
+                  title={value.title ?? label}
                   panel={AutomationBindingPanel}
                   type={value.customType}
                   value={inputData[key]}
@@ -654,11 +639,6 @@
     width: 320px;
   }
 
-  .messaging {
-    display: flex;
-    align-items: center;
-    margin-top: var(--spacing-xl);
-  }
   .fields {
     display: flex;
     flex-direction: column;
@@ -670,7 +650,6 @@
   .block-field {
     display: flex; /* Use Flexbox */
     justify-content: space-between;
-    align-items: center;
     flex-direction: row; /* Arrange label and field side by side */
     align-items: center; /* Align vertically in the center */
     gap: 10px; /* Add some space between label and field */
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
index 4372122119..46600d3f85 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
@@ -57,7 +57,6 @@
           on:change={e => onChange(e, field)}
           type="string"
           {bindings}
-          fillWidth={true}
           updateOnChange={false}
         />
       </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index 4674002d61..f46bca3090 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -52,7 +52,6 @@
           on:change={e => onChange(e, field)}
           type="string"
           {bindings}
-          fillWidth={true}
           updateOnChange={false}
         />
       </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 6cc96d8c68..0d15df6c87 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -129,8 +129,7 @@
             />
           {:else}
             <DrawerBindableSlot
-              fillWidth
-              title={value.title}
+              title={value.title || field}
               panel={AutomationBindingPanel}
               type={schema.type}
               {schema}
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
index 937e3b6c69..040e783cd3 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -85,8 +85,8 @@
     on:change={e => onChange(e, field)}
     type="string"
     bindings={parsedBindings}
-    fillWidth={true}
     allowJS={true}
     updateOnChange={false}
+    title={schema.name}
   />
 {/if}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 1bad1ee221..46c6f5b58e 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -36,6 +36,8 @@
   import { ValidColumnNameRegex } from "@budibase/shared-core"
   import { FieldType, FieldSubtype, SourceName } from "@budibase/types"
   import RelationshipSelector from "components/common/RelationshipSelector.svelte"
+  import { RowUtils } from "@budibase/frontend-core"
+  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
 
   const AUTO_TYPE = FIELDS.AUTO.type
   const FORMULA_TYPE = FIELDS.FORMULA.type
@@ -49,43 +51,21 @@
 
   const dispatch = createEventDispatcher()
   const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
-  const { dispatch: gridDispatch } = getContext("grid")
+  const { dispatch: gridDispatch, rows } = getContext("grid")
 
   export let field
 
   let mounted = false
-  const fieldDefinitions = Object.values(FIELDS).reduce(
-    // Storing the fields by complex field id
-    (acc, field) => ({
-      ...acc,
-      [makeFieldId(field.type, field.subtype)]: field,
-    }),
-    {}
-  )
-
-  function makeFieldId(type, subtype, autocolumn) {
-    // don't make field IDs for auto types
-    if (type === AUTO_TYPE || autocolumn) {
-      return type.toUpperCase()
-    } else {
-      return `${type}${subtype || ""}`.toUpperCase()
-    }
-  }
-
   let originalName
   let linkEditDisabled
   let primaryDisplay
   let indexes = [...($tables.selected.indexes || [])]
   let isCreating = undefined
-
   let relationshipPart1 = PrettyRelationshipDefinitions.Many
   let relationshipPart2 = PrettyRelationshipDefinitions.One
-
   let relationshipTableIdPrimary = null
   let relationshipTableIdSecondary = null
-
   let table = $tables.selected
-
   let confirmDeleteDialog
   let savingColumn
   let deleteColName
@@ -99,11 +79,6 @@
   }
   let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
   let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)
-
-  $: if (primaryDisplay) {
-    editableColumn.constraints.presence = { allowEmpty: false }
-  }
-
   let relationshipMap = {
     [RelationshipType.ONE_TO_MANY]: {
       part1: PrettyRelationshipDefinitions.MANY,
@@ -118,7 +93,12 @@
       part2: PrettyRelationshipDefinitions.MANY,
     },
   }
+  let autoColumnInfo = getAutoColumnInformation()
 
+  $: rowGoldenSample = RowUtils.generateGoldenSample($rows)
+  $: if (primaryDisplay) {
+    editableColumn.constraints.presence = { allowEmpty: false }
+  }
   $: {
     // this parses any changes the user has made when creating a new internal relationship
     // into what we expect the schema to look like
@@ -148,6 +128,74 @@
       editableColumn.tableId = relationshipTableIdSecondary
     }
   }
+  $: initialiseField(field, savingColumn)
+  $: checkConstraints(editableColumn)
+  $: required = !!editableColumn?.constraints?.presence || primaryDisplay
+  $: uneditable =
+    $tables.selected?._id === TableNames.USERS &&
+    UNEDITABLE_USER_FIELDS.includes(editableColumn.name)
+  $: invalid =
+    !editableColumn?.name ||
+    (editableColumn?.type === LINK_TYPE && !editableColumn?.tableId) ||
+    Object.keys(errors).length !== 0
+  $: errors = checkErrors(editableColumn)
+  $: datasource = $datasources.list.find(
+    source => source._id === table?.sourceId
+  )
+  $: tableAutoColumnsTypes = getTableAutoColumnTypes($tables?.selected)
+  $: availableAutoColumns = Object.keys(autoColumnInfo).reduce((acc, key) => {
+    if (!tableAutoColumnsTypes.includes(key)) {
+      acc[key] = autoColumnInfo[key]
+    }
+    return acc
+  }, {})
+  $: availableAutoColumnKeys = availableAutoColumns
+    ? Object.keys(availableAutoColumns)
+    : []
+  $: autoColumnOptions = editableColumn.autocolumn
+    ? autoColumnInfo
+    : availableAutoColumns
+  // used to select what different options can be displayed for column type
+  $: canBeDisplay =
+    editableColumn?.type !== LINK_TYPE &&
+    editableColumn?.type !== AUTO_TYPE &&
+    editableColumn?.type !== JSON_TYPE &&
+    !editableColumn.autocolumn
+  $: canBeRequired =
+    editableColumn?.type !== LINK_TYPE &&
+    !uneditable &&
+    editableColumn?.type !== AUTO_TYPE &&
+    !editableColumn.autocolumn
+  $: externalTable = table.sourceType === DB_TYPE_EXTERNAL
+  // in the case of internal tables the sourceId will just be undefined
+  $: tableOptions = $tables.list.filter(
+    opt =>
+      opt.sourceType === table.sourceType && table.sourceId === opt.sourceId
+  )
+  $: typeEnabled =
+    !originalName ||
+    (originalName &&
+      SWITCHABLE_TYPES.indexOf(editableColumn.type) !== -1 &&
+      !editableColumn?.autocolumn)
+
+  const fieldDefinitions = Object.values(FIELDS).reduce(
+    // Storing the fields by complex field id
+    (acc, field) => ({
+      ...acc,
+      [makeFieldId(field.type, field.subtype)]: field,
+    }),
+    {}
+  )
+
+  function makeFieldId(type, subtype, autocolumn) {
+    // don't make field IDs for auto types
+    if (type === AUTO_TYPE || autocolumn) {
+      return type.toUpperCase()
+    } else {
+      return `${type}${subtype || ""}`.toUpperCase()
+    }
+  }
+
   const initialiseField = (field, savingColumn) => {
     isCreating = !field
     if (field && !savingColumn) {
@@ -187,22 +235,6 @@
     }
   }
 
-  $: initialiseField(field, savingColumn)
-
-  $: checkConstraints(editableColumn)
-  $: required = !!editableColumn?.constraints?.presence || primaryDisplay
-  $: uneditable =
-    $tables.selected?._id === TableNames.USERS &&
-    UNEDITABLE_USER_FIELDS.includes(editableColumn.name)
-  $: invalid =
-    !editableColumn?.name ||
-    (editableColumn?.type === LINK_TYPE && !editableColumn?.tableId) ||
-    Object.keys(errors).length !== 0
-  $: errors = checkErrors(editableColumn)
-  $: datasource = $datasources.list.find(
-    source => source._id === table?.sourceId
-  )
-
   const getTableAutoColumnTypes = table => {
     return Object.keys(table?.schema).reduce((acc, key) => {
       let fieldSchema = table?.schema[key]
@@ -213,47 +245,6 @@
     }, [])
   }
 
-  let autoColumnInfo = getAutoColumnInformation()
-
-  $: tableAutoColumnsTypes = getTableAutoColumnTypes($tables?.selected)
-  $: availableAutoColumns = Object.keys(autoColumnInfo).reduce((acc, key) => {
-    if (!tableAutoColumnsTypes.includes(key)) {
-      acc[key] = autoColumnInfo[key]
-    }
-    return acc
-  }, {})
-
-  $: availableAutoColumnKeys = availableAutoColumns
-    ? Object.keys(availableAutoColumns)
-    : []
-
-  $: autoColumnOptions = editableColumn.autocolumn
-    ? autoColumnInfo
-    : availableAutoColumns
-
-  // used to select what different options can be displayed for column type
-  $: canBeDisplay =
-    editableColumn?.type !== LINK_TYPE &&
-    editableColumn?.type !== AUTO_TYPE &&
-    editableColumn?.type !== JSON_TYPE &&
-    !editableColumn.autocolumn
-  $: canBeRequired =
-    editableColumn?.type !== LINK_TYPE &&
-    !uneditable &&
-    editableColumn?.type !== AUTO_TYPE &&
-    !editableColumn.autocolumn
-  $: externalTable = table.sourceType === DB_TYPE_EXTERNAL
-  // in the case of internal tables the sourceId will just be undefined
-  $: tableOptions = $tables.list.filter(
-    opt =>
-      opt.sourceType === table.sourceType && table.sourceId === opt.sourceId
-  )
-  $: typeEnabled =
-    !originalName ||
-    (originalName &&
-      SWITCHABLE_TYPES.indexOf(editableColumn.type) !== -1 &&
-      !editableColumn?.autocolumn)
-
   async function saveColumn() {
     savingColumn = true
     if (errors?.length) {
@@ -679,6 +670,7 @@
       </div>
       <div class="input-length">
         <ModalBindableInput
+          panel={ServerBindingPanel}
           title="Formula"
           value={editableColumn.formula}
           on:change={e => {
@@ -689,6 +681,7 @@
           }}
           bindings={getBindings({ table })}
           allowJS
+          context={rowGoldenSample}
         />
       </div>
     </div>
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index f4fa762bce..ba5f75083a 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -40,21 +40,22 @@
     indentMore,
     indentLess,
   } from "@codemirror/commands"
-  import { Compartment } from "@codemirror/state"
+  import { Compartment, EditorState } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
-  import { EditorModes, getDefaultTheme } from "./"
+  import { EditorModes } from "./"
   import { themeStore } from "stores/portal"
 
   export let label
   export let completions = []
-  export let height = 200
-  export let resize = "none"
   export let mode = EditorModes.Handlebars
   export let value = ""
   export let placeholder = null
   export let autocompleteEnabled = true
   export let autofocus = false
   export let jsBindingWrapping = true
+  export let readonly = false
+
+  const dispatch = createEventDispatcher()
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -82,8 +83,8 @@
     })
   }
 
-  // For handlebars only.
-  const bindStyle = new MatchDecorator({
+  // Match decoration for HBS bindings
+  const hbsMatchDeco = new MatchDecorator({
     regexp: FIND_ANY_HBS_REGEX,
     decoration: () => {
       return Decoration.mark({
@@ -94,12 +95,11 @@
       })
     },
   })
-
-  let plugin = ViewPlugin.define(
+  const hbsMatchDecoPlugin = ViewPlugin.define(
     view => ({
-      decorations: bindStyle.createDeco(view),
+      decorations: hbsMatchDeco.createDeco(view),
       update(u) {
-        this.decorations = bindStyle.updateDeco(u, this.decorations)
+        this.decorations = hbsMatchDeco.updateDeco(u, this.decorations)
       },
     }),
     {
@@ -107,7 +107,29 @@
     }
   )
 
-  const dispatch = createEventDispatcher()
+  // Match decoration for snippets
+  const snippetMatchDeco = new MatchDecorator({
+    regexp: /snippets\.[^\s(]+/g,
+    decoration: () => {
+      return Decoration.mark({
+        tag: "span",
+        attributes: {
+          class: "snippet-wrap",
+        },
+      })
+    },
+  })
+  const snippetMatchDecoPlugin = ViewPlugin.define(
+    view => ({
+      decorations: snippetMatchDeco.createDeco(view),
+      update(u) {
+        this.decorations = snippetMatchDeco.updateDeco(u, this.decorations)
+      },
+    }),
+    {
+      decorations: v => v.decorations,
+    }
+  )
 
   // Theming!
   let currentTheme = $themeStore?.theme
@@ -117,7 +139,7 @@
   const indentWithTabCustom = {
     key: "Tab",
     run: view => {
-      if (completionStatus(view.state) == "active") {
+      if (completionStatus(view.state) === "active") {
         acceptCompletion(view)
         return true
       }
@@ -131,7 +153,7 @@
   }
 
   const buildKeymap = () => {
-    const baseMap = [
+    return [
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyKeymap,
@@ -139,43 +161,25 @@
       ...completionKeymap,
       indentWithTabCustom,
     ]
-    return baseMap
   }
 
   const buildBaseExtensions = () => {
     return [
-      ...(mode.name === "handlebars" ? [plugin] : []),
-      history(),
       drawSelection(),
       dropCursor(),
       bracketMatching(),
       closeBrackets(),
-      highlightActiveLine(),
       syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }),
-      highlightActiveLineGutter(),
       highlightSpecialChars(),
       EditorView.lineWrapping,
-      EditorView.updateListener.of(v => {
-        const docStr = v.state.doc?.toString()
-        if (docStr === value) {
-          return
-        }
-        dispatch("change", docStr)
-      }),
-      keymap.of(buildKeymap()),
-      themeConfig.of([
-        getDefaultTheme({
-          height: editorHeight,
-          resize,
-          dark: isDark,
-        }),
-        ...(isDark ? [oneDark] : []),
-      ]),
+      themeConfig.of([...(isDark ? [oneDark] : [])]),
     ]
   }
 
+  // None of this is reactive, but it never has been, so we just assume most
+  // config flags aren't changed at runtime
   const buildExtensions = base => {
-    const complete = [...base]
+    let complete = [...base]
 
     if (autocompleteEnabled) {
       complete.push(
@@ -183,7 +187,10 @@
           override: [...completions],
           closeOnBlur: true,
           icons: false,
-          optionClass: () => "autocomplete-option",
+          optionClass: completion =>
+            completion.simple
+              ? "autocomplete-option-simple"
+              : "autocomplete-option",
         })
       )
       complete.push(
@@ -209,22 +216,49 @@
             view.dispatch(tr)
             return true
           }
-
           return false
         })
       )
     }
 
-    if (mode.name == "javascript") {
+    // JS only plugins
+    if (mode.name === "javascript") {
+      complete.push(snippetMatchDecoPlugin)
       complete.push(javascript())
-      complete.push(highlightWhitespace())
-      complete.push(lineNumbers())
-      complete.push(foldGutter())
+      if (!readonly) {
+        complete.push(highlightWhitespace())
+      }
+    }
+    // HBS only plugins
+    else {
+      complete.push(hbsMatchDecoPlugin)
     }
 
     if (placeholder) {
       complete.push(placeholderFn(placeholder))
     }
+
+    if (readonly) {
+      complete.push(EditorState.readOnly.of(true))
+    } else {
+      complete = [
+        ...complete,
+        history(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        lineNumbers(),
+        foldGutter(),
+        keymap.of(buildKeymap()),
+        EditorView.updateListener.of(v => {
+          const docStr = v.state.doc?.toString()
+          if (docStr === value) {
+            return
+          }
+          dispatch("change", docStr)
+        }),
+      ]
+    }
+
     return complete
   }
 
@@ -249,8 +283,6 @@
     }
   }
 
-  $: editorHeight = typeof height === "number" ? `${height}px` : height
-
   // Init when all elements are ready
   $: if (mounted && !isEditorInitialised) {
     isEditorInitialised = true
@@ -265,14 +297,7 @@
 
       // Issue theme compartment update
       editor.dispatch({
-        effects: themeConfig.reconfigure([
-          getDefaultTheme({
-            height: editorHeight,
-            resize,
-            dark: isDark,
-          }),
-          ...(isDark ? [oneDark] : []),
-        ]),
+        effects: themeConfig.reconfigure([...(isDark ? [oneDark] : [])]),
       })
     }
   }
@@ -298,27 +323,207 @@
 </div>
 
 <style>
-  .code-editor.handlebars :global(.cm-content) {
-    font-family: var(--font-sans);
+  /* Editor */
+  .code-editor {
+    font-size: 12px;
+    height: 100%;
   }
-  .code-editor :global(.cm-tooltip.cm-completionInfo) {
-    padding: var(--spacing-m);
+  .code-editor :global(.cm-editor) {
+    height: 100%;
+    background: var(--spectrum-global-color-gray-50) !important;
+    outline: none;
+    border: none;
+    border-radius: 0;
   }
-  .code-editor :global(.cm-tooltip-autocomplete > ul > li[aria-selected]) {
-    border-radius: var(
-        --spectrum-popover-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-      ),
-      var(
-        --spectrum-popover-border-radius,
-        var(--spectrum-alias-border-radius-regular)
-      ),
-      0, 0;
+  .code-editor :global(.cm-content) {
+    padding: 10px 0;
+  }
+  .code-editor > div {
+    height: 100%;
   }
 
+  /* Active line */
+  .code-editor :global(.cm-line) {
+    padding: 0 var(--spacing-s);
+    color: var(--spectrum-alias-text-color);
+  }
+  .code-editor :global(.cm-activeLine) {
+    position: relative;
+    background: transparent;
+  }
+  .code-editor :global(.cm-activeLine::before) {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: calc(100% - 2px);
+    width: 100%;
+    background: var(--spectrum-global-color-gray-100) !important;
+    z-index: -2;
+  }
+  .code-editor :global(.cm-highlightSpace:before) {
+    color: var(--spectrum-global-color-gray-500);
+  }
+
+  /* Code selection */
+  .code-editor :global(.cm-selectionBackground) {
+    background-color: var(--spectrum-global-color-blue-400) !important;
+    opacity: 0.4;
+  }
+
+  /* Gutters */
+  .code-editor :global(.cm-gutterElement) {
+    margin-bottom: 0;
+  }
+  .code-editor :global(.cm-gutters) {
+    background-color: var(--spectrum-global-color-gray-75) !important;
+    color: var(--spectrum-global-color-gray-500);
+  }
+  .code-editor :global(.cm-activeLineGutter::before) {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: calc(100% - 2px);
+    width: 100%;
+    background: var(--spectrum-global-color-gray-200) !important;
+    z-index: -2;
+  }
+  .code-editor :global(.cm-activeLineGutter) {
+    color: var(--spectrum-global-color-gray-700);
+    background: transparent;
+    position: relative;
+  }
+
+  /* Cursor color */
+  .code-editor :global(.cm-focused .cm-cursor) {
+    border-left-color: var(--spectrum-alias-text-color);
+  }
+
+  /* Placeholder */
+  .code-editor :global(.cm-placeholder) {
+    color: var(--spectrum-global-color-gray-700);
+    font-style: italic;
+  }
+
+  /* Highlight bindings and snippets */
+  .code-editor :global(.binding-wrap) {
+    color: var(--spectrum-global-color-blue-700) !important;
+  }
+  .code-editor :global(.snippet-wrap *) {
+    color: #61afef !important;
+  }
+
+  /* Completion popover */
+  .code-editor :global(.cm-tooltip-autocomplete) {
+    background: var(--spectrum-global-color-gray-75);
+    border-radius: 4px;
+    border: 1px solid var(--spectrum-global-color-gray-200);
+  }
+  .code-editor :global(.cm-tooltip-autocomplete > ul) {
+    max-height: 20em;
+  }
+
+  /* Completion section header*/
+  .code-editor :global(.info-section) {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-m);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-s);
+    gap: var(--spacing-m);
+    color: var(--spectrum-alias-text-color);
+    font-weight: 600;
+  }
+  .code-editor :global(.info-section:not(:first-of-type)) {
+    border-top: 1px solid var(--spectrum-global-color-gray-200);
+  }
+
+  /* Completion item container */
+  .code-editor :global(.autocomplete-option),
+  .code-editor :global(.autocomplete-option-simple) {
+    padding: var(--spacing-s) var(--spacing-m) !important;
+    padding-left: calc(16px + 2 * var(--spacing-m)) !important;
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+    color: var(--spectrum-alias-text-color);
+  }
+  .code-editor :global(.autocomplete-option-simple) {
+    padding-left: var(--spacing-s) !important;
+  }
+
+  /* Highlighted completion item */
+  .code-editor :global(.autocomplete-option[aria-selected]),
+  .code-editor :global(.autocomplete-option-simple[aria-selected]) {
+    background: var(--spectrum-global-color-blue-400);
+    color: white;
+  }
+  .code-editor
+    :global(.autocomplete-option[aria-selected] .cm-completionDetail) {
+    color: white;
+  }
+
+  /* Completion item label */
+  .code-editor :global(.cm-completionLabel) {
+    flex: 1 1 auto;
+    font-size: var(--font-size-s);
+    font-family: var(--font-sans);
+    text-transform: capitalize;
+  }
+  .code-editor :global(.autocomplete-option-simple .cm-completionLabel) {
+    text-transform: none;
+  }
+
+  /* Completion item type */
   .code-editor :global(.autocomplete-option .cm-completionDetail) {
-    background-color: var(--spectrum-global-color-gray-200);
+    font-family: var(--font-mono);
+    color: var(--spectrum-global-color-gray-700);
+    font-style: normal;
+    text-transform: capitalize;
+    font-size: 10px;
+  }
+
+  /* Live binding value / helper container */
+  .code-editor :global(.cm-completionInfo) {
+    margin-left: var(--spacing-s);
+    border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: var(--border-radius-s);
-    padding: 4px 6px;
+    background-color: var(--spectrum-global-color-gray-50);
+    padding: var(--spacing-m);
+    margin-top: -2px;
+  }
+
+  /* Wrapper around helpers */
+  .code-editor :global(.info-bubble) {
+    font-size: var(--font-size-s);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    color: var(--spectrum-global-color-gray-800);
+  }
+
+  /* Live binding value / helper value */
+  .code-editor :global(.binding__description) {
+    color: var(--spectrum-alias-text-color);
+    font-size: var(--font-size-m);
+  }
+  .code-editor :global(.binding__example) {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    font-family: var(--font-mono);
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-height: 480px;
+  }
+  .code-editor :global(.binding__example.helper) {
+    color: var(--spectrum-global-color-blue-700);
+  }
+  .code-editor :global(.binding__example span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
   }
 </style>
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 0d71a475f0..f66c84adce 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -1,4 +1,3 @@
-import { EditorView } from "@codemirror/view"
 import { getManifest } from "@budibase/string-templates"
 import sanitizeHtml from "sanitize-html"
 import { groupBy } from "lodash"
@@ -27,123 +26,33 @@ export const SECTIONS = {
   },
 }
 
-export const getDefaultTheme = opts => {
-  const { height, resize, dark } = opts
-  return EditorView.theme(
-    {
-      "&.cm-focused .cm-cursor": {
-        borderLeftColor: "var(--spectrum-alias-text-color)",
-      },
-      "&": {
-        height: height ? `${height}` : "",
-        lineHeight: "1.3",
-        border:
-          "var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)",
-        borderRadius: "var(--border-radius-s)",
-        backgroundColor:
-          "var( --spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50) )",
-        resize: resize ? `${resize}` : "",
-        overflow: "hidden",
-        color: "var(--spectrum-alias-text-color)",
-      },
-      "& .cm-tooltip.cm-tooltip-autocomplete > ul": {
-        fontFamily:
-          "var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base))",
-        maxHeight: "16em",
-      },
-      "& .cm-placeholder": {
-        color: "var(--spectrum-alias-text-color)",
-        fontStyle: "italic",
-      },
-      "&.cm-focused": {
-        outline: "none",
-        borderColor: "var(--spectrum-alias-border-color-mouse-focus)",
-      },
-      // AUTO COMPLETE
-      "& .cm-completionDetail": {
-        fontStyle: "unset",
-        textTransform: "uppercase",
-        fontSize: "10px",
-        backgroundColor: "var(--spectrum-global-color-gray-100)",
-        color: "var(--spectrum-global-color-gray-600)",
-      },
-      "& .cm-completionLabel": {
-        marginLeft:
-          "calc(var(--spectrum-alias-workflow-icon-size-m) + var(--spacing-m))",
-      },
-      "& .info-bubble": {
-        fontSize: "var(--font-size-s)",
-        display: "grid",
-        gridGap: "var(--spacing-s)",
-        gridTemplateColumns: "1fr",
-        color: "var(--spectrum-global-color-gray-800)",
-      },
-      "& .cm-tooltip": {
-        marginLeft: "var(--spacing-s)",
-        border: "1px solid var(--spectrum-global-color-gray-300)",
-        borderRadius:
-          "var( --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) )",
-        backgroundColor: "var(--spectrum-global-color-gray-50)",
-      },
-      // Section header
-      "& .info-section": {
-        display: "flex",
-        padding: "var(--spacing-s)",
-        gap: "var(--spacing-m)",
-        borderBottom: "1px solid var(--spectrum-global-color-gray-200)",
-        color: "var(--spectrum-global-color-gray-800)",
-        fontWeight: "bold",
-      },
-      "& .info-section .spectrum-Icon": {
-        color: "var(--spectrum-global-color-gray-600)",
-      },
-      // Autocomplete Option
-      "& .cm-tooltip.cm-tooltip-autocomplete .autocomplete-option": {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        fontSize: "var(--spectrum-alias-font-size-default)",
-        padding: "var(--spacing-s)",
-        color: "var(--spectrum-global-color-gray-800)",
-      },
-      "& .cm-tooltip-autocomplete ul li[aria-selected].autocomplete-option": {
-        backgroundColor: "var(--spectrum-global-color-gray-200)",
-      },
-      "& .binding-wrap": {
-        color: "var(--spectrum-global-color-blue-700)",
-        fontFamily: "monospace",
-      },
-    },
-    { dark }
-  )
-}
-
 export const buildHelperInfoNode = (completion, helper) => {
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
 
   const exampleNodeHtml = helper.example
-    ? `<div class="binding__example">${helper.example}</div>`
+    ? `<div class="binding__example helper">${helper.example}</div>`
     : ""
   const descriptionMarkup = sanitizeHtml(helper.description, {
     allowedTags: [],
     allowedAttributes: {},
   })
-  const descriptionNodeHtml = `<div class="binding__description">${descriptionMarkup}</div>`
+  const descriptionNodeHtml = `<div class="binding__description helper">${descriptionMarkup}</div>`
 
   ele.innerHTML = `
-    ${exampleNodeHtml}
     ${descriptionNodeHtml}
+    ${exampleNodeHtml}
   `
   return ele
 }
 
 const toSpectrumIcon = name => {
   return `<svg
-    class="spectrum-Icon spectrum-Icon--sizeM"
+    class="spectrum-Icon spectrum-Icon--sizeS"
     focusable="false"
     aria-hidden="false"
     aria-label="${name}-section-icon"
+    style="color:var(--spectrum-global-color-gray-700)"
   >
     <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" />
   </svg>`
@@ -152,7 +61,9 @@ const toSpectrumIcon = name => {
 export const buildSectionHeader = (type, sectionName, icon, rank) => {
   const ele = document.createElement("div")
   ele.classList.add("info-section")
-  ele.classList.add(type)
+  if (type) {
+    ele.classList.add(type)
+  }
   ele.innerHTML = `${toSpectrumIcon(icon)}<span>${sectionName}</span>`
   return {
     name: sectionName,
@@ -174,7 +85,7 @@ export const helpersToCompletion = (helpers, mode) => {
       },
       type: "helper",
       section: helperSection,
-      detail: "FUNCTION",
+      detail: "Function",
       apply: (view, completion, from, to) => {
         insertBinding(view, from, to, key, mode)
       },
@@ -191,6 +102,29 @@ export const getHelperCompletions = mode => {
   }, [])
 }
 
+export const snippetAutoComplete = snippets => {
+  return function myCompletions(context) {
+    if (!snippets?.length) {
+      return null
+    }
+    const word = context.matchBefore(/\w*/)
+    if (word.from == word.to && !context.explicit) {
+      return null
+    }
+    return {
+      from: word.from,
+      options: snippets.map(snippet => ({
+        label: `snippets.${snippet.name}`,
+        type: "text",
+        simple: true,
+        apply: (view, completion, from, to) => {
+          insertSnippet(view, from, to, completion.label)
+        },
+      })),
+    }
+  }
+}
+
 const bindingFilter = (options, query) => {
   return options.filter(completion => {
     const section_parsed = completion.section.name.toLowerCase()
@@ -252,21 +186,12 @@ export const jsAutocomplete = baseCompletions => {
 }
 
 export const buildBindingInfoNode = (completion, binding) => {
+  if (!binding.valueHTML || binding.value == null) {
+    return null
+  }
   const ele = document.createElement("div")
   ele.classList.add("info-bubble")
-
-  const exampleNodeHtml = binding.readableBinding
-    ? `<div class="binding__example">{{ ${binding.readableBinding} }}</div>`
-    : ""
-
-  const descriptionNodeHtml = binding.description
-    ? `<div class="binding__description">${binding.description}</div>`
-    : ""
-
-  ele.innerHTML = `
-    ${exampleNodeHtml}
-    ${descriptionNodeHtml}
-  `
+  ele.innerHTML = `<div class="binding__example">${binding.valueHTML}</div>`
   return ele
 }
 
@@ -345,6 +270,20 @@ export const insertBinding = (view, from, to, text, mode) => {
   })
 }
 
+export const insertSnippet = (view, from, to, text) => {
+  let cursorPos = from + text.length
+  view.dispatch({
+    changes: {
+      from,
+      to,
+      insert: text,
+    },
+    selection: {
+      anchor: cursorPos,
+    },
+  })
+}
+
 export const bindingsToCompletions = (bindings, mode) => {
   const bindingByCategory = groupBy(bindings, "category")
   const categoryMeta = bindings?.reduce((acc, ele) => {
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 7b567e052b..21d389357f 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,74 +1,194 @@
 <script>
   import {
     DrawerContent,
-    Tabs,
-    Tab,
+    ActionButton,
+    Icon,
+    Heading,
     Body,
     Button,
-    ActionButton,
-    Heading,
-    Icon,
   } from "@budibase/bbui"
-  import { createEventDispatcher, onMount, getContext } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
   import {
-    isValid,
     decodeJSBinding,
     encodeJSBinding,
-    convertToJS,
+    processStringSync,
   } from "@budibase/string-templates"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
-
-  import { admin } from "stores/portal"
+  import { readableToRuntimeBinding } from "dataBinding"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
   import {
     getHelperCompletions,
     jsAutocomplete,
     hbAutocomplete,
+    snippetAutoComplete,
     EditorModes,
     bindingsToCompletions,
   } from "../CodeEditor"
-  import BindingPicker from "./BindingPicker.svelte"
+  import BindingSidePanel from "./BindingSidePanel.svelte"
+  import EvaluationSidePanel from "./EvaluationSidePanel.svelte"
+  import SnippetSidePanel from "./SnippetSidePanel.svelte"
   import { BindingHelpers } from "./utils"
+  import formatHighlight from "json-format-highlight"
+  import { capitalise } from "helpers"
+  import { Utils } from "@budibase/frontend-core"
+  import { licensing } from "stores/portal"
 
   const dispatch = createEventDispatcher()
 
-  export let bindings
-  // jsValue/hbsValue are the state of the value that is being built
-  // within this binding panel - the value should not be updated until
-  // the binding panel is saved. This is the default value of the
-  // expression when the binding panel is opened, but shouldn't be updated.
+  export let bindings = []
   export let value = ""
-  export let valid
+  export let allowHBS = true
   export let allowJS = false
   export let allowHelpers = true
+  export let allowSnippets = true
+  export let context = null
+  export let snippets = null
   export let autofocusEditor = false
+  export let placeholder = null
+  export let showTabBar = true
 
-  const drawerActions = getContext("drawer-actions")
-  const bindingDrawerActions = getContext("binding-drawer-actions")
+  const Modes = {
+    Text: "Text",
+    JavaScript: "JavaScript",
+  }
+  const SidePanels = {
+    Bindings: "FlashOn",
+    Evaluation: "Play",
+    Snippets: "Code",
+  }
 
-  let getCaretPosition
-  let insertAtPos
-  let initialValueJS = typeof value === "string" && value?.startsWith("{{ js ")
-  let mode = initialValueJS ? "JavaScript" : "Text"
+  let mode
+  let sidePanel
+  let initialValueJS = value?.startsWith?.("{{ js ")
   let jsValue = initialValueJS ? value : null
   let hbsValue = initialValueJS ? null : value
-  let sidebar = true
+  let getCaretPosition
+  let insertAtPos
   let targetMode = null
+  let expressionResult
+  let evaluating = false
 
-  $: usingJS = mode === "JavaScript"
+  $: useSnippets = allowSnippets && !$licensing.isFreePlan
+  $: editorModeOptions = getModeOptions(allowHBS, allowJS)
+  $: sidePanelOptions = getSidePanelOptions(
+    bindings,
+    context,
+    allowSnippets,
+    mode
+  )
+  $: enrichedBindings = enrichBindings(bindings, context, snippets)
+  $: usingJS = mode === Modes.JavaScript
   $: editorMode =
-    mode === "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
-  $: bindingCompletions = bindingsToCompletions(bindings, editorMode)
+    mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
+  $: editorValue = editorMode === EditorModes.JS ? jsValue : hbsValue
+  $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
+  $: requestEval(runtimeExpression, context, snippets)
+  $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
+  $: hbsCompletions = getHBSCompletions(bindingCompletions)
+  $: jsCompletions = getJSCompletions(bindingCompletions, snippets, useSnippets)
+  $: {
+    // Ensure a valid side panel option is always selected
+    if (sidePanel && !sidePanelOptions.includes(sidePanel)) {
+      sidePanel = sidePanelOptions[0]
+    }
+  }
+
+  const getHBSCompletions = bindingCompletions => {
+    return [
+      hbAutocomplete([
+        ...bindingCompletions,
+        ...getHelperCompletions(EditorModes.Handlebars),
+      ]),
+    ]
+  }
+
+  const getJSCompletions = (bindingCompletions, snippets, useSnippets) => {
+    const completions = [
+      jsAutocomplete([
+        ...bindingCompletions,
+        ...getHelperCompletions(EditorModes.JS),
+      ]),
+    ]
+    if (useSnippets) {
+      completions.push(snippetAutoComplete(snippets))
+    }
+    return completions
+  }
+
+  const getModeOptions = (allowHBS, allowJS) => {
+    let options = []
+    if (allowHBS) {
+      options.push(Modes.Text)
+    }
+    if (allowJS) {
+      options.push(Modes.JavaScript)
+    }
+    return options
+  }
+
+  const getSidePanelOptions = (bindings, context, useSnippets, mode) => {
+    let options = []
+    if (bindings?.length) {
+      options.push(SidePanels.Bindings)
+    }
+    if (context) {
+      options.push(SidePanels.Evaluation)
+    }
+    if (useSnippets && mode === Modes.JavaScript) {
+      options.push(SidePanels.Snippets)
+    }
+    return options
+  }
+
+  const debouncedEval = Utils.debounce((expression, context, snippets) => {
+    expressionResult = processStringSync(expression || "", {
+      ...context,
+      snippets,
+    })
+    evaluating = false
+  }, 260)
+
+  const requestEval = (expression, context, snippets) => {
+    evaluating = true
+    debouncedEval(expression, context, snippets)
+  }
+
+  const getBindingValue = (binding, context, snippets) => {
+    const js = `return $("${binding.runtimeBinding}")`
+    const hbs = encodeJSBinding(js)
+    const res = processStringSync(hbs, { ...context, snippets })
+    return JSON.stringify(res, null, 2)
+  }
+
+  const highlightJSON = json => {
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
+  }
+
+  const enrichBindings = (bindings, context, snippets) => {
+    return bindings.map(binding => {
+      if (!context) {
+        return binding
+      }
+      const value = getBindingValue(binding, context, snippets)
+      return {
+        ...binding,
+        value,
+        valueHTML: highlightJSON(value),
+      }
+    })
+  }
 
   const updateValue = val => {
-    valid = isValid(readableToRuntimeBinding(bindings, val))
-    if (valid) {
-      dispatch("change", val)
-    }
+    const runtimeExpression = readableToRuntimeBinding(enrichedBindings, val)
+    dispatch("change", val)
+    requestEval(runtimeExpression, context, snippets)
   }
 
   const onSelectHelper = (helper, js) => {
@@ -80,9 +200,34 @@
     bindingHelpers.onSelectBinding(js ? jsValue : hbsValue, binding, { js })
   }
 
-  const onChangeMode = e => {
-    mode = e.detail
-    updateValue(mode === "JavaScript" ? jsValue : hbsValue)
+  const changeMode = newMode => {
+    if (targetMode || newMode === mode) {
+      return
+    }
+
+    // Get the raw editor value to see if we are abandoning changes
+    let rawValue = editorValue
+    if (mode === Modes.JavaScript) {
+      rawValue = decodeJSBinding(rawValue)
+    }
+
+    if (rawValue?.length) {
+      targetMode = newMode
+    } else {
+      mode = newMode
+    }
+  }
+
+  const confirmChangeMode = () => {
+    jsValue = null
+    hbsValue = null
+    updateValue(null)
+    mode = targetMode
+    targetMode = null
+  }
+
+  const changeSidePanel = newSidePanel => {
+    sidePanel = newSidePanel === sidePanel ? null : newSidePanel
   }
 
   const onChangeHBSValue = e => {
@@ -95,374 +240,188 @@
     updateValue(jsValue)
   }
 
-  const switchMode = () => {
-    if (targetMode == "Text") {
-      jsValue = null
-      updateValue(jsValue)
-    } else {
-      hbsValue = null
-      updateValue(hbsValue)
-    }
-    mode = targetMode + ""
-    targetMode = null
-  }
-
-  const convert = () => {
-    const runtime = readableToRuntimeBinding(bindings, hbsValue)
-    const runtimeJs = encodeJSBinding(convertToJS(runtime))
-    jsValue = runtimeToReadableBinding(bindings, runtimeJs)
-    hbsValue = null
-    mode = "JavaScript"
-    onSelectBinding("", { forceJS: true })
-  }
-
   onMount(() => {
-    valid = isValid(readableToRuntimeBinding(bindings, value))
+    // Set the initial mode appropriately
+    const initialValueMode = initialValueJS ? Modes.JavaScript : Modes.Text
+    if (editorModeOptions.includes(initialValueMode)) {
+      mode = initialValueMode
+    } else {
+      mode = editorModeOptions[0]
+    }
+
+    // Set the initial side panel
+    sidePanel = sidePanelOptions[0]
   })
 </script>
 
-<span class="binding-drawer">
-  <DrawerContent>
+<DrawerContent padding={false}>
+  <div class="binding-panel">
     <div class="main">
-      <Tabs
-        selected={mode}
-        on:select={onChangeMode}
-        beforeSwitch={selectedMode => {
-          if (selectedMode == mode) {
-            return true
-          }
-
-          //Get the current mode value
-          const editorValue = usingJS ? decodeJSBinding(jsValue) : hbsValue
-
-          if (editorValue) {
-            targetMode = selectedMode
-            return false
-          }
-          return true
-        }}
-      >
-        <Tab title="Text">
-          <div class="main-content" class:binding-panel={sidebar}>
-            <div class="editor">
-              <div class="overlay-wrap">
-                {#if targetMode}
-                  <div class="mode-overlay">
-                    <div class="prompt-body">
-                      <Heading size="S">
-                        {`Switch to ${targetMode}?`}
-                      </Heading>
-                      <Body>This will discard anything in your binding</Body>
-                      <div class="switch-actions">
-                        <Button
-                          secondary
-                          size="S"
-                          on:click={() => {
-                            targetMode = null
-                          }}
-                        >
-                          No - keep text
-                        </Button>
-                        <Button cta size="S" on:click={switchMode}>
-                          Yes - discard text
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                {/if}
-                <CodeEditor
-                  value={hbsValue}
-                  on:change={onChangeHBSValue}
-                  bind:getCaretPosition
-                  bind:insertAtPos
-                  completions={[
-                    hbAutocomplete([
-                      ...bindingCompletions,
-                      ...getHelperCompletions(editorMode),
-                    ]),
-                  ]}
-                  placeholder=""
-                  height="100%"
-                  autofocus={autofocusEditor}
-                />
-              </div>
-              <div class="binding-footer">
-                <div class="messaging">
-                  {#if !valid}
-                    <div class="syntax-error">
-                      Current Handlebars syntax is invalid, please check the
-                      guide
-                      <a href="https://handlebarsjs.com/guide/" target="_blank"
-                        >here</a
-                      >
-                      for more details.
-                    </div>
-                  {:else}
-                    <Icon name="FlashOn" />
-                    <div class="messaging-wrap">
-                      <div>
-                        Add available bindings by typing &#123;&#123; or use the
-                        menu on the right
-                      </div>
-                    </div>
-                  {/if}
-                </div>
-                <div class="actions">
-                  {#if $admin.isDev && allowJS}
-                    <ActionButton
-                      secondary
-                      on:click={() => {
-                        convert()
-                        targetMode = null
-                      }}
-                    >
-                      Convert To JS
-                    </ActionButton>
-                  {/if}
-                  <ActionButton
-                    secondary
-                    icon={sidebar ? "RailRightClose" : "RailRightOpen"}
-                    on:click={() => {
-                      sidebar = !sidebar
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {#if sidebar}
-              <div class="binding-picker">
-                <BindingPicker
-                  {bindings}
-                  {allowHelpers}
-                  addHelper={onSelectHelper}
-                  addBinding={onSelectBinding}
-                  mode={editorMode}
-                />
-              </div>
-            {/if}
+      {#if showTabBar}
+        <div class="tabs">
+          <div class="editor-tabs">
+            {#each editorModeOptions as editorMode}
+              <ActionButton
+                size="M"
+                quiet
+                selected={mode === editorMode}
+                on:click={() => changeMode(editorMode)}
+              >
+                {capitalise(editorMode)}
+              </ActionButton>
+            {/each}
+          </div>
+          <div class="side-tabs">
+            {#each sidePanelOptions as panel}
+              <ActionButton
+                size="M"
+                quiet
+                selected={sidePanel === panel}
+                on:click={() => changeSidePanel(panel)}
+              >
+                <Icon name={panel} size="S" />
+              </ActionButton>
+            {/each}
           </div>
-        </Tab>
-        {#if allowJS}
-          <Tab title="JavaScript">
-            <div class="main-content" class:binding-panel={sidebar}>
-              <div class="editor">
-                <div class="overlay-wrap">
-                  {#if targetMode}
-                    <div class="mode-overlay">
-                      <div class="prompt-body">
-                        <Heading size="S">
-                          {`Switch to ${targetMode}?`}
-                        </Heading>
-                        <Body>This will discard anything in your binding</Body>
-                        <div class="switch-actions">
-                          <Button
-                            secondary
-                            size="S"
-                            on:click={() => {
-                              targetMode = null
-                            }}
-                          >
-                            No - keep javascript
-                          </Button>
-                          <Button cta size="S" on:click={switchMode}>
-                            Yes - discard javascript
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  {/if}
-
-                  <CodeEditor
-                    value={decodeJSBinding(jsValue)}
-                    on:change={onChangeJSValue}
-                    completions={[
-                      jsAutocomplete([
-                        ...bindingCompletions,
-                        ...getHelperCompletions(editorMode),
-                      ]),
-                    ]}
-                    mode={EditorModes.JS}
-                    bind:getCaretPosition
-                    bind:insertAtPos
-                    height="100%"
-                    autofocus={autofocusEditor}
-                  />
-                </div>
-                <div class="binding-footer">
-                  <div class="messaging">
-                    <Icon name="FlashOn" />
-                    <div class="messaging-wrap">
-                      <div>
-                        Add available bindings by typing $ or use the menu on
-                        the right
-                      </div>
-                    </div>
-                  </div>
-                  <div class="actions">
-                    <ActionButton
-                      secondary
-                      icon={sidebar ? "RailRightClose" : "RailRightOpen"}
-                      on:click={() => {
-                        sidebar = !sidebar
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {#if sidebar}
-                <div class="binding-picker">
-                  <BindingPicker
-                    {bindings}
-                    {allowHelpers}
-                    addHelper={onSelectHelper}
-                    addBinding={onSelectBinding}
-                    mode={editorMode}
-                  />
-                </div>
-              {/if}
-            </div>
-          </Tab>
-        {/if}
-        <div class="drawer-actions">
-          {#if typeof drawerActions?.hide === "function" && drawerActions?.headless}
-            <Button
-              secondary
-              quiet
-              on:click={() => {
-                drawerActions.hide()
-              }}
-            >
-              Cancel
-            </Button>
-          {/if}
-          {#if typeof bindingDrawerActions?.save === "function" && drawerActions?.headless}
-            <Button
-              cta
-              disabled={!valid}
-              on:click={() => {
-                bindingDrawerActions.save()
-              }}
-            >
-              Save
-            </Button>
-          {/if}
         </div>
-      </Tabs>
+      {/if}
+      <div class="editor">
+        {#if mode === Modes.Text}
+          {#key hbsCompletions}
+            <CodeEditor
+              value={hbsValue}
+              on:change={onChangeHBSValue}
+              bind:getCaretPosition
+              bind:insertAtPos
+              completions={hbsCompletions}
+              autofocus={autofocusEditor}
+              placeholder={placeholder ||
+                "Add bindings by typing {{ or use the menu on the right"}
+              jsBindingWrapping={false}
+            />
+          {/key}
+        {:else if mode === Modes.JavaScript}
+          {#key jsCompletions}
+            <CodeEditor
+              value={decodeJSBinding(jsValue)}
+              on:change={onChangeJSValue}
+              completions={jsCompletions}
+              mode={EditorModes.JS}
+              bind:getCaretPosition
+              bind:insertAtPos
+              autofocus={autofocusEditor}
+              placeholder={placeholder ||
+                "Add bindings by typing $ or use the menu on the right"}
+              jsBindingWrapping
+            />
+          {/key}
+        {/if}
+        {#if targetMode}
+          <div class="mode-overlay">
+            <div class="prompt-body">
+              <Heading size="S">
+                Switch to {targetMode}?
+              </Heading>
+              <Body>This will discard anything in your binding</Body>
+              <div class="switch-actions">
+                <Button
+                  secondary
+                  size="S"
+                  on:click={() => {
+                    targetMode = null
+                  }}
+                >
+                  No - keep {mode}
+                </Button>
+                <Button cta size="S" on:click={confirmChangeMode}>
+                  Yes - discard {mode}
+                </Button>
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
     </div>
-  </DrawerContent>
-</span>
+    <div class="side" class:visible={!!sidePanel}>
+      {#if sidePanel === SidePanels.Bindings}
+        <BindingSidePanel
+          bindings={enrichedBindings}
+          {allowHelpers}
+          {context}
+          addHelper={onSelectHelper}
+          addBinding={onSelectBinding}
+          mode={editorMode}
+        />
+      {:else if sidePanel === SidePanels.Evaluation}
+        <EvaluationSidePanel
+          {expressionResult}
+          {evaluating}
+          expression={editorValue}
+        />
+      {:else if sidePanel === SidePanels.Snippets}
+        <SnippetSidePanel
+          addSnippet={snippet => bindingHelpers.onSelectSnippet(snippet)}
+          {snippets}
+        />
+      {/if}
+    </div>
+  </div>
+</DrawerContent>
 
 <style>
-  .binding-drawer :global(.container > .main) {
-    overflow: hidden;
-    height: 100%;
-    padding: 0px;
-  }
-
-  .binding-drawer :global(.container > .main > .main) {
-    overflow: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .binding-drawer :global(.spectrum-Tabs-content) {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .binding-drawer :global(.spectrum-Tabs-content > div),
-  .binding-drawer :global(.spectrum-Tabs-content > div > div),
-  .binding-drawer :global(.spectrum-Tabs-content .main-content) {
+  .binding-panel {
     height: 100%;
   }
-
-  .binding-drawer .main-content {
-    grid-template-rows: unset;
-  }
-
-  .messaging {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-m);
-    min-width: 0;
-    flex: 1;
-  }
-  .messaging-wrap {
-    overflow: hidden;
-  }
-  .messaging-wrap > div {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .main :global(textarea) {
-    min-height: 202px !important;
-  }
-
-  .main-content {
-    padding: var(--spacing-s) var(--spacing-xl);
-  }
-
-  .main :global(.spectrum-Tabs div.drawer-actions) {
-    display: flex;
-    gap: var(--spacing-m);
-    margin-left: auto;
-  }
-
-  .main :global(.spectrum-Tabs-content),
-  .main :global(.spectrum-Tabs-content .main-content) {
-    margin-top: 0px;
-    padding: 0px;
-  }
-
-  .main :global(.spectrum-Tabs) {
-    display: flex;
-  }
-
-  .syntax-error {
-    color: var(--red);
-    font-size: 12px;
-  }
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-
-  .binding-footer {
-    width: 100%;
+  .binding-panel,
+  .tabs {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
+    align-items: stretch;
   }
-  .main-content {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 380px;
-  }
-  .main-content.binding-panel {
-    grid-template-columns: 1fr 320px;
-  }
-  .binding-picker {
-    border-left: 2px solid var(--border-light);
-    border-left: var(--border-light);
-    overflow: scroll;
-    height: 100%;
-  }
-  .editor {
-    padding: var(--spacing-xl);
-    min-width: 0;
+  .main {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xl);
-    overflow: hidden;
+    justify-content: flex-start;
+    align-items: stretch;
   }
-  .overlay-wrap {
+  .side {
+    overflow: hidden;
+    flex: 0 0 360px;
+    margin-right: -360px;
+    transition: margin-right 130ms ease-out;
+  }
+  .side.visible {
+    margin-right: 0;
+  }
+
+  /* Tabs */
+  .tabs {
+    padding: var(--spacing-m);
+    border-bottom: var(--border-light);
+  }
+  .editor-tabs,
+  .side-tabs {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .side-tabs :global(.icon) {
+    width: 16px;
+    display: flex;
+  }
+
+  /* Editor */
+  .editor {
+    flex: 1 1 auto;
+    height: 0;
     position: relative;
-    flex: 1;
-    overflow: hidden;
   }
+
+  /* Overlay */
   .mode-overlay {
     position: absolute;
     top: 0;
@@ -471,6 +430,7 @@
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: var(
@@ -490,9 +450,4 @@
     display: flex;
     gap: var(--spacing-l);
   }
-
-  .binding-drawer :global(.code-editor),
-  .binding-drawer :global(.code-editor > div) {
-    height: 100%;
-  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
deleted file mode 100644
index 42057b382b..0000000000
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ /dev/null
@@ -1,399 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import { convertToJS } from "@budibase/string-templates"
-  import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
-  import { handlebarsCompletions } from "constants/completions"
-
-  export let addHelper
-  export let addBinding
-  export let bindings
-  export let mode
-  export let allowHelpers
-  export let noPaddingTop = false
-
-  let search = ""
-  let popover
-  let popoverAnchor
-  let hoverTarget
-  let helpers = handlebarsCompletions()
-
-  let selectedCategory
-
-  $: searchRgx = new RegExp(search, "ig")
-
-  // Icons
-  $: bindingIcons = bindings?.reduce((acc, ele) => {
-    if (ele.icon) {
-      acc[ele.category] = acc[ele.category] || ele.icon
-    }
-    return acc
-  }, {})
-  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
-
-  $: categories = Object.entries(groupBy("category", bindings))
-  $: categoryNames = getCategoryNames(categories)
-
-  $: filteredCategories = categories
-    .map(([name, categoryBindings]) => ({
-      name,
-      bindings: categoryBindings?.filter(binding => {
-        return !search || binding.readableBinding.match(searchRgx)
-      }),
-    }))
-    .filter(category => {
-      return (
-        category.bindings?.length > 0 &&
-        (!selectedCategory ? true : selectedCategory === category.name)
-      )
-    })
-  $: filteredHelpers = helpers?.filter(helper => {
-    return (
-      (!search ||
-        helper.label.match(searchRgx) ||
-        helper.description.match(searchRgx)) &&
-      (mode.name !== "javascript" || helper.allowsJs)
-    )
-  })
-
-  const getHelperExample = (helper, js) => {
-    let example = helper.example || ""
-    if (js) {
-      example = convertToJS(example).split("\n")[0].split("= ")[1]
-      if (example === "null;") {
-        example = ""
-      }
-    }
-    return example || ""
-  }
-
-  const getCategoryNames = categories => {
-    let names = [...categories.map(cat => cat[0])]
-    if (allowHelpers) {
-      names.push("Helpers")
-    }
-    return names
-  }
-</script>
-
-<span class="detailPopover">
-  <Popover
-    align="left-outside"
-    bind:this={popover}
-    anchor={popoverAnchor}
-    maxWidth={300}
-    maxHeight={300}
-    dismissible={false}
-  >
-    <Layout gap="S">
-      <div class="helper">
-        {#if hoverTarget.title}
-          <div class="helper__name">{hoverTarget.title}</div>
-        {/if}
-        {#if hoverTarget.description}
-          <div class="helper__description">
-            <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-            {@html hoverTarget.description}
-          </div>
-        {/if}
-        {#if hoverTarget.example}
-          <pre class="helper__example">{hoverTarget.example}</pre>
-        {/if}
-      </div>
-    </Layout>
-  </Popover>
-</span>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-<Layout noPadding gap="S">
-  {#if selectedCategory}
-    <div class="sub-section-back">
-      <ActionButton
-        secondary
-        icon={"ArrowLeft"}
-        on:click={() => {
-          selectedCategory = null
-        }}
-      >
-        Back
-      </ActionButton>
-    </div>
-  {/if}
-
-  {#if !selectedCategory}
-    <div class="search">
-      <span class="search-input">
-        <Input
-          placeholder={"Search for bindings"}
-          autocomplete="off"
-          bind:value={search}
-        />
-      </span>
-
-      <span
-        class="search-input-icon"
-        on:click={() => {
-          search = null
-        }}
-        class:searching={search}
-      >
-        <Icon name={search ? "Close" : "Search"} />
-      </span>
-    </div>
-  {/if}
-
-  {#if !selectedCategory && !search}
-    <ul class="category-list">
-      {#each categoryNames as categoryName}
-        <li
-          on:click={() => {
-            selectedCategory = categoryName
-          }}
-        >
-          <Icon name={categoryIcons[categoryName]} />
-          <span class="category-name">{categoryName} </span>
-          <span class="category-chevron"><Icon name="ChevronRight" /></span>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-
-  {#if selectedCategory || search}
-    {#each filteredCategories as category}
-      {#if category.bindings?.length}
-        <div class="sub-section">
-          <div class="cat-heading">
-            <Icon name={categoryIcons[category.name]} />{category.name}
-          </div>
-          <ul>
-            {#each category.bindings as binding}
-              <li
-                class="binding"
-                on:mouseenter={e => {
-                  popoverAnchor = e.target
-                  if (!binding.description) {
-                    return
-                  }
-                  hoverTarget = {
-                    title: binding.display?.name || binding.fieldSchema?.name,
-                    description: binding.description,
-                  }
-                  popover.show()
-                  e.stopPropagation()
-                }}
-                on:mouseleave={() => {
-                  popover.hide()
-                  popoverAnchor = null
-                  hoverTarget = null
-                }}
-                on:focus={() => {}}
-                on:blur={() => {}}
-                on:click={() => addBinding(binding)}
-              >
-                <span class="binding__label">
-                  {#if binding.display?.name}
-                    {binding.display.name}
-                  {:else if binding.fieldSchema?.name}
-                    {binding.fieldSchema?.name}
-                  {:else}
-                    {binding.readableBinding}
-                  {/if}
-                </span>
-
-                {#if binding.display?.type || binding.fieldSchema?.type}
-                  <span class="binding__typeWrap">
-                    <span class="binding__type">
-                      {binding.display?.type || binding.fieldSchema?.type}
-                    </span>
-                  </span>
-                {/if}
-              </li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-    {/each}
-
-    {#if selectedCategory === "Helpers" || search}
-      {#if filteredHelpers?.length}
-        <div class="sub-section">
-          <div class="cat-heading">Helpers</div>
-          <ul class="helpers">
-            {#each filteredHelpers as helper}
-              <li
-                class="binding"
-                on:click={() => addHelper(helper, mode.name == "javascript")}
-                on:mouseenter={e => {
-                  popoverAnchor = e.target
-                  if (!helper.displayText && helper.description) {
-                    return
-                  }
-                  hoverTarget = {
-                    title: helper.displayText,
-                    description: helper.description,
-                    example: getHelperExample(
-                      helper,
-                      mode.name == "javascript"
-                    ),
-                  }
-                  popover.show()
-                  e.stopPropagation()
-                }}
-                on:mouseleave={() => {
-                  popover.hide()
-                  popoverAnchor = null
-                  hoverTarget = null
-                }}
-                on:focus={() => {}}
-                on:blur={() => {}}
-              >
-                <span class="binding__label">{helper.displayText}</span>
-                <span class="binding__typeWrap">
-                  <span class="binding__type">function</span>
-                </span>
-              </li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-    {/if}
-  {/if}
-</Layout>
-
-<style>
-  .search :global(input) {
-    border: none;
-    border-radius: 0px;
-    background: none;
-    padding: 0px;
-  }
-
-  .search {
-    padding: var(--spacing-m) var(--spacing-l);
-    display: flex;
-    align-items: center;
-    border-top: 0px;
-    border-bottom: var(--border-light);
-    border-left: 2px solid transparent;
-    border-right: 2px solid transparent;
-    margin-right: 1px;
-    position: sticky;
-    top: 0;
-    background-color: var(--background);
-    z-index: 2;
-  }
-
-  .search-input {
-    flex: 1;
-  }
-
-  .search-input-icon.searching {
-    cursor: pointer;
-  }
-
-  ul.category-list {
-    padding: 0px var(--spacing-l);
-    padding-bottom: var(--spacing-l);
-  }
-  .sub-section {
-    padding: var(--spacing-l);
-    padding-top: 0px;
-  }
-  .sub-section-back {
-    padding: var(--spacing-l);
-    padding-top: var(--spacing-xl);
-    padding-bottom: 0px;
-  }
-  .cat-heading {
-    margin-bottom: var(--spacing-l);
-  }
-  ul.helpers li * {
-    pointer-events: none;
-  }
-  ul.category-list li {
-    display: flex;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-  ul.category-list .category-name {
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-  ul.category-list .category-chevron {
-    flex: 1;
-    text-align: right;
-  }
-  ul.category-list .category-chevron :global(div.icon),
-  .cat-heading :global(div.icon) {
-    display: inline-block;
-  }
-  li.binding {
-    display: flex;
-    align-items: center;
-  }
-  li.binding .binding__typeWrap {
-    flex: 1;
-    text-align: right;
-    text-transform: capitalize;
-  }
-
-  :global(.drawer-actions) {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .cat-heading {
-    font-size: var(--font-size-s);
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .cat-heading {
-    display: flex;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
-      border-color 130ms ease-in-out;
-    word-wrap: break-word;
-  }
-  li:not(:last-of-type) {
-    margin-bottom: var(--spacing-s);
-  }
-  li :global(*) {
-    transition: color 130ms ease-in-out;
-  }
-  li:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    cursor: pointer;
-  }
-
-  .binding__label {
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-
-  .binding__type {
-    font-family: var(--font-mono);
-    background-color: var(--spectrum-global-color-gray-200);
-    border-radius: var(--border-radius-s);
-    padding: 2px 4px;
-    margin-left: 2px;
-    font-weight: 600;
-  }
-</style>
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
new file mode 100644
index 0000000000..6ef2d35a6c
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -0,0 +1,446 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import { convertToJS } from "@budibase/string-templates"
+  import { Input, Layout, Icon, Popover } from "@budibase/bbui"
+  import { handlebarsCompletions } from "constants/completions"
+
+  export let addHelper
+  export let addBinding
+  export let bindings
+  export let mode
+  export let allowHelpers
+  export let context = null
+
+  let search = ""
+  let searching = false
+  let popover
+  let popoverAnchor
+  let hoverTarget
+  let helpers = handlebarsCompletions()
+  let selectedCategory
+  let hideTimeout
+
+  $: bindingIcons = bindings?.reduce((acc, ele) => {
+    if (ele.icon) {
+      acc[ele.category] = acc[ele.category] || ele.icon
+    }
+    return acc
+  }, {})
+  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
+  $: categories = Object.entries(groupBy("category", bindings))
+  $: categoryNames = getCategoryNames(categories)
+  $: searchRgx = new RegExp(search, "ig")
+  $: filteredCategories = categories
+    .map(([name, categoryBindings]) => ({
+      name,
+      bindings: categoryBindings?.filter(binding => {
+        return !search || binding.readableBinding.match(searchRgx)
+      }),
+    }))
+    .filter(category => {
+      return (
+        category.bindings?.length > 0 &&
+        (!selectedCategory ? true : selectedCategory === category.name)
+      )
+    })
+  $: filteredHelpers = helpers?.filter(helper => {
+    return (
+      (!search ||
+        helper.label.match(searchRgx) ||
+        helper.description.match(searchRgx)) &&
+      (mode.name !== "javascript" || helper.allowsJs)
+    )
+  })
+
+  const getHelperExample = (helper, js) => {
+    let example = helper.example || ""
+    if (js) {
+      example = convertToJS(example).split("\n")[0].split("= ")[1]
+      if (example === "null;") {
+        example = ""
+      }
+    }
+    return example || ""
+  }
+
+  const getCategoryNames = categories => {
+    let names = [...categories.map(cat => cat[0])]
+    if (allowHelpers) {
+      names.push("Helpers")
+    }
+    return names
+  }
+
+  const showBindingPopover = (binding, target) => {
+    if (!context || !binding.value || binding.value === "") {
+      return
+    }
+
+    // Roles have always been broken for JS. We need to exclude them from
+    // showing a popover as it will show "Error while executing JS".
+    if (binding.category === "Role") {
+      return
+    }
+
+    stopHidingPopover()
+    popoverAnchor = target
+    hoverTarget = {
+      helper: false,
+      code: binding.valueHTML,
+    }
+    popover.show()
+  }
+
+  const showHelperPopover = (helper, target) => {
+    stopHidingPopover()
+    if (!helper.displayText && helper.description) {
+      return
+    }
+    popoverAnchor = target
+    hoverTarget = {
+      helper: true,
+      description: helper.description,
+      code: getHelperExample(helper, mode.name === "javascript"),
+    }
+    popover.show()
+  }
+
+  const hidePopover = () => {
+    hideTimeout = setTimeout(() => {
+      popover.hide()
+      popoverAnchor = null
+      hoverTarget = null
+      hideTimeout = null
+    }, 100)
+  }
+
+  const stopHidingPopover = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+  }
+
+  const startSearching = async () => {
+    searching = true
+    search = ""
+  }
+
+  const stopSearching = e => {
+    e.stopPropagation()
+    searching = false
+    search = ""
+  }
+</script>
+
+<Popover
+  align="left-outside"
+  bind:this={popover}
+  anchor={popoverAnchor}
+  minWidth={0}
+  maxWidth={480}
+  maxHeight={480}
+  dismissible={false}
+  on:mouseenter={stopHidingPopover}
+  on:mouseleave={hidePopover}
+>
+  <div class="binding-popover" class:helper={hoverTarget.helper}>
+    {#if hoverTarget.description}
+      <div>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+        {@html hoverTarget.description}
+      </div>
+    {/if}
+    {#if hoverTarget.code}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      <pre>{@html hoverTarget.code}</pre>
+    {/if}
+  </div>
+</Popover>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<div class="binding-side-panel">
+  <Layout noPadding gap="S">
+    {#if selectedCategory}
+      <div class="header">
+        <Icon
+          name="BackAndroid"
+          hoverable
+          size="S"
+          on:click={() => (selectedCategory = null)}
+        />
+        {selectedCategory}
+      </div>
+    {/if}
+
+    {#if !selectedCategory}
+      <div class="header">
+        {#if searching}
+          <div class="search-input">
+            <Input
+              placeholder="Search for bindings"
+              autocomplete="off"
+              bind:value={search}
+              autofocus
+            />
+          </div>
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            newStyles
+            on:click={stopSearching}
+          />
+        {:else}
+          <div class="title">Bindings</div>
+          <Icon
+            size="S"
+            name="Search"
+            hoverable
+            newStyles
+            on:click={startSearching}
+          />
+        {/if}
+      </div>
+    {/if}
+    {#if !selectedCategory && !search}
+      <ul class="category-list">
+        {#each categoryNames as categoryName}
+          <li
+            on:click={() => {
+              selectedCategory = categoryName
+            }}
+          >
+            <Icon
+              size="S"
+              color="var(--spectrum-global-color-gray-700)"
+              name={categoryIcons[categoryName]}
+            />
+            <span class="category-name">{categoryName} </span>
+            <span class="category-chevron"><Icon name="ChevronRight" /></span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    {#if selectedCategory || search}
+      {#each filteredCategories as category}
+        {#if category.bindings?.length}
+          <div class="sub-section">
+            {#if filteredCategories.length > 1}
+              <div class="cat-heading">
+                <Icon name={categoryIcons[category.name]} />{category.name}
+              </div>
+            {/if}
+            <ul>
+              {#each category.bindings as binding}
+                <li
+                  class="binding"
+                  on:mouseenter={e => showBindingPopover(binding, e.target)}
+                  on:mouseleave={hidePopover}
+                  on:click={() => addBinding(binding)}
+                >
+                  <span class="binding__label">
+                    {#if binding.display?.name}
+                      {binding.display.name}
+                    {:else if binding.fieldSchema?.name}
+                      {binding.fieldSchema?.name}
+                    {:else}
+                      {binding.readableBinding}
+                    {/if}
+                  </span>
+                  {#if binding.display?.type || binding.fieldSchema?.type}
+                    <span class="binding__typeWrap">
+                      <span class="binding__type">
+                        {binding.display?.type || binding.fieldSchema?.type}
+                      </span>
+                    </span>
+                  {/if}
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+      {/each}
+
+      {#if selectedCategory === "Helpers" || search}
+        {#if filteredHelpers?.length}
+          <div class="sub-section">
+            <ul class="helpers">
+              {#each filteredHelpers as helper}
+                <li
+                  class="binding"
+                  on:mouseenter={e => showHelperPopover(helper, e.target)}
+                  on:mouseleave={hidePopover}
+                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                >
+                  <span class="binding__label">{helper.displayText}</span>
+                  <span class="binding__typeWrap">
+                    <span class="binding__type">function</span>
+                  </span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+      {/if}
+    {/if}
+  </Layout>
+</div>
+
+<style>
+  .binding-side-panel {
+    border-left: var(--border-light);
+    height: 100%;
+    overflow: auto;
+  }
+
+  .header {
+    height: 53px;
+    padding: 0 var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: var(--border-light);
+    position: sticky;
+    top: 0;
+    gap: var(--spacing-m);
+    background: var(--background);
+    z-index: 1;
+  }
+  .header :global(input) {
+    border: none;
+    border-radius: 0;
+    background: none;
+    padding: 0;
+  }
+  .search-input,
+  .title {
+    flex: 1 1 auto;
+  }
+
+  ul.category-list {
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .sub-section {
+    padding: var(--spacing-l);
+    padding-top: 0;
+  }
+  ul.helpers li * {
+    pointer-events: none;
+  }
+  ul.category-list li {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+  ul.category-list :global(.spectrum-Icon) {
+    margin: -4px 0;
+  }
+  ul.category-list .category-name {
+    text-transform: capitalize;
+  }
+  ul.category-list .category-chevron {
+    flex: 1;
+    text-align: right;
+  }
+  ul.category-list .category-chevron :global(div.icon),
+  .cat-heading :global(div.icon) {
+    display: inline-block;
+  }
+  li.binding {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  li.binding .binding__typeWrap {
+    flex: 1;
+    text-align: right;
+    text-transform: capitalize;
+  }
+
+  :global(.drawer-actions) {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
+  .cat-heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-s);
+  }
+
+  .cat-heading {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
+    word-wrap: break-word;
+  }
+  li:not(:last-of-type) {
+    margin-bottom: var(--spacing-s);
+  }
+  li :global(*) {
+    transition: color 130ms ease-out;
+  }
+  li:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
+
+  .binding__label {
+    text-transform: capitalize;
+  }
+  .binding__type {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .binding-popover {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-m);
+  }
+  .binding-popover pre {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    white-space: pre;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .binding-popover.helper pre {
+    color: var(--spectrum-global-color-blue-700);
+  }
+  .binding-popover pre :global(span) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+  .binding-popover :global(p) {
+    padding: 0;
+    margin: 0;
+  }
+  .binding-popover.helper :global(code) {
+    font-size: 12px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 7888f2e486..cb65d2bbe4 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,8 +1,9 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { previewStore, snippets } from "stores/builder"
+  import { onMount } from "svelte"
 
   export let bindings = []
-  export let valid
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
@@ -20,11 +21,14 @@
       type: null,
     }))
   }
+
+  onMount(previewStore.requestComponentContext)
 </script>
 
 <BindingPanel
-  bind:valid
   bindings={enrichedBindings}
+  context={$previewStore.selectedComponentContext}
+  snippets={$snippets}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index 8a5d775bea..7a1a480bc0 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -22,7 +22,6 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  let valid = true
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
@@ -79,20 +78,13 @@
   {/if}
 </div>
 
-<Drawer bind:this={bindingDrawer} {title} headless>
-  <svelte:fragment slot="description">
-    Add the objects on the left to enrich your text.
-  </svelte:fragment>
-
-  <Button cta slot="buttons" on:click={handleClose} disabled={!valid}>
-    Save
-  </Button>
+<Drawer bind:this={bindingDrawer} title={title ?? placeholder ?? "Bindings"}>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
     value={readableValue}
     close={handleClose}
-    bind:valid
     on:change={event => (tempValue = event.detail)}
     {bindings}
     {allowJS}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 80996a484d..d11ebcf87a 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -13,21 +13,21 @@
   export let panel = ClientBindingPanel
   export let value = ""
   export let bindings = []
-  export let title = "Bindings"
+  export let title
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
-  export let drawerLeft
   export let key
   export let disableBindings = false
+  export let forceModal = false
+  export let context = null
 
   const dispatch = createEventDispatcher()
+
   let bindingDrawer
-  let valid = true
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -88,27 +88,20 @@
 <Drawer
   on:drawerHide={onDrawerHide}
   on:drawerShow
-  {fillWidth}
   bind:this={bindingDrawer}
-  {title}
-  left={drawerLeft}
-  headless
+  title={title ?? placeholder ?? "Bindings"}
+  {forceModal}
 >
-  <svelte:fragment slot="description">
-    Add the objects on the left to enrich your text.
-  </svelte:fragment>
-  <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
-    bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}
     {allowJS}
     {allowHelpers}
+    {context}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index 4cac24660f..8ce9dda209 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -16,7 +16,6 @@
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
@@ -26,7 +25,6 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  let valid = true
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -173,22 +171,14 @@
 <Drawer
   on:drawerHide
   on:drawerShow
-  {fillWidth}
   bind:this={bindingDrawer}
-  {title}
+  title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}
-  headless
 >
-  <svelte:fragment slot="description">
-    Add the objects on the left to enrich your text.
-  </svelte:fragment>
-  <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
-    bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
new file mode 100644
index 0000000000..2c4e6a0991
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -0,0 +1,133 @@
+<script>
+  import formatHighlight from "json-format-highlight"
+  import { Icon, ProgressCircle, notifications } from "@budibase/bbui"
+  import { copyToClipboard } from "@budibase/bbui/helpers"
+  import { fade } from "svelte/transition"
+
+  export let expressionResult
+  export let evaluating = false
+  export let expression = null
+
+  $: error = expressionResult === "Error while executing JS"
+  $: empty = expression == null || expression?.trim() === ""
+  $: success = !error && !empty
+  $: highlightedResult = highlight(expressionResult)
+
+  const highlight = json => {
+    if (json == null) {
+      return ""
+    }
+    // Attempt to parse and then stringify, in case this is valid JSON
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 2)
+    } catch (err) {
+      // Ignore
+    }
+    return formatHighlight(json, {
+      keyColor: "#e06c75",
+      numberColor: "#e5c07b",
+      stringColor: "#98c379",
+      trueColor: "#d19a66",
+      falseColor: "#d19a66",
+      nullColor: "#c678dd",
+    })
+  }
+
+  const copy = () => {
+    let clipboardVal = expressionResult
+    if (typeof clipboardVal === "object") {
+      clipboardVal = JSON.stringify(clipboardVal, null, 2)
+    }
+    copyToClipboard(clipboardVal)
+    notifications.success("Value copied to clipboard")
+  }
+</script>
+
+<div class="evaluation-side-panel">
+  <div class="header" class:success class:error>
+    <div class="header-content">
+      {#if error}
+        <Icon name="Alert" color="var(--spectrum-global-color-red-600)" />
+        <div>Error</div>
+        {#if evaluating}
+          <div transition:fade|local={{ duration: 130 }}>
+            <ProgressCircle size="S" />
+          </div>
+        {/if}
+        <span />
+        <Icon name="Copy" size="S" hoverable on:click={copy} />
+      {:else}
+        <div>Preview</div>
+        {#if evaluating}
+          <div transition:fade|local={{ duration: 130 }}>
+            <ProgressCircle size="S" />
+          </div>
+        {/if}
+        <span />
+        {#if !empty}
+          <Icon name="Copy" newStyles size="S" hoverable on:click={copy} />
+        {/if}
+      {/if}
+    </div>
+  </div>
+  <div class="body">
+    {#if empty}
+      Your expression will be evaluated here
+    {:else}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      {@html highlightedResult}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .evaluation-side-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    border-left: var(--border-light);
+  }
+  .header {
+    padding: var(--spacing-m) var(--spacing-l);
+    flex: 0 0 auto;
+    position: relative;
+    border-bottom: var(--border-light);
+  }
+  .header-content {
+    height: var(--spectrum-alias-item-height-m);
+    display: flex;
+    align-items: center;
+    z-index: 2;
+    position: relative;
+    gap: var(--spacing-m);
+  }
+  .header-content span {
+    flex: 1 1 auto;
+  }
+  .header.error::before {
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    position: absolute;
+    opacity: 10%;
+  }
+  .header.error::before {
+    background: var(--spectrum-global-color-red-400);
+  }
+  .body {
+    flex: 1 1 auto;
+    padding: var(--spacing-m) var(--spacing-l);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    height: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
index 41245ceaec..3261dc6b74 100644
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@@ -1,115 +1,12 @@
 <script>
-  import { Icon, Input, Modal, Body, ModalContent } from "@budibase/bbui"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
-  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
-  import { createEventDispatcher } from "svelte"
-  import { isJSBinding } from "@budibase/string-templates"
-
-  export let panel = ServerBindingPanel
-  export let value = ""
-  export let bindings = []
-  export let title = "Bindings"
-  export let placeholder
-  export let label
-  export let allowJS = false
-  export let updateOnChange = true
-
-  const dispatch = createEventDispatcher()
-  let bindingModal
-  let valid = true
-
-  $: readableValue = runtimeToReadableBinding(bindings, value)
-  $: tempValue = readableValue
-  $: isJS = isJSBinding(value)
-
-  const saveBinding = () => {
-    onChange(tempValue)
-    bindingModal.hide()
-  }
-
-  const onChange = input => {
-    dispatch("change", readableToRuntimeBinding(bindings, input))
-  }
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="control">
-  <Input
-    {label}
-    readonly={isJS}
-    value={isJS ? "(JavaScript function)" : readableValue}
-    on:change={event => onChange(event.detail)}
-    {placeholder}
-    {updateOnChange}
-  />
-  <div class="icon" on:click={bindingModal.show}>
-    <Icon size="S" name="FlashOn" />
-  </div>
-</div>
-<Modal bind:this={bindingModal}>
-  <ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
-    <Body extraSmall grey>
-      Add the objects on the left to enrich your text.
-    </Body>
-    <div class="panel-wrapper">
-      <svelte:component
-        this={panel}
-        serverSide
-        value={readableValue}
-        bind:valid
-        on:change={e => (tempValue = e.detail)}
-        {bindings}
-        {allowJS}
-      />
-    </div>
-  </ModalContent>
-</Modal>
-
-<style>
-  .control {
-    flex: 1;
-    position: relative;
-  }
-
-  .icon {
-    right: 1px;
-    bottom: 1px;
-    position: absolute;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-    border-left: 1px solid var(--spectrum-alias-border-color);
-    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
-    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
-    width: 31px;
-    color: var(--spectrum-alias-text-color);
-    background-color: var(--spectrum-global-color-gray-75);
-    transition: background-color
-        var(--spectrum-global-animation-duration-100, 130ms),
-      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
-      border-color var(--spectrum-global-animation-duration-100, 130ms);
-    height: calc(var(--spectrum-alias-item-height-m) - 2px);
-  }
-
-  .icon:hover {
-    cursor: pointer;
-    color: var(--spectrum-alias-text-color-hover);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-alias-border-color-hover);
-  }
-
-  .panel-wrapper {
-    border: var(--border-light);
-    border-radius: 4px;
-  }
-
-  .control :global(.spectrum-Textfield-input) {
-    padding-right: 40px;
-  }
-</style>
+<DrawerBindableInput
+  {...$$props}
+  forceModal
+  on:change
+  on:blur
+  on:drawerHide
+  on:drawerShow
+/>
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 213e5bbf1d..df0da768e0 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,10 +1,11 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { snippets } from "stores/builder"
 
   export let bindings = []
-  export let valid
   export let value = ""
   export let allowJS = false
+  export let context = null
 
   $: enrichedBindings = enrichBindings(bindings)
 
@@ -19,9 +20,10 @@
 </script>
 
 <BindingPanel
-  bind:valid
   bindings={enrichedBindings}
+  snippets={$snippets}
   {value}
   {allowJS}
+  {context}
   on:change
 />
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
new file mode 100644
index 0000000000..d6b6f92b17
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -0,0 +1,160 @@
+<script>
+  import {
+    Button,
+    Drawer,
+    Input,
+    Icon,
+    AbsTooltip,
+    TooltipType,
+    notifications,
+  } from "@budibase/bbui"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import { decodeJSBinding, encodeJSBinding } from "@budibase/string-templates"
+  import { snippets } from "stores/builder"
+  import { getSequentialName } from "helpers/duplicate"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { ValidSnippetNameRegex } from "@budibase/shared-core"
+
+  export let snippet
+
+  export const show = () => drawer.show()
+  export const hide = () => drawer.hide()
+
+  const firstCharNumberRegex = /^[0-9].*$/
+
+  let drawer
+  let name = ""
+  let code = ""
+  let loading = false
+  let deleteConfirmationDialog
+
+  $: defaultName = getSequentialName($snippets, "MySnippet", x => x.name)
+  $: key = snippet?.name
+  $: name = snippet?.name || defaultName
+  $: code = snippet?.code ? encodeJSBinding(snippet.code) : ""
+  $: rawJS = decodeJSBinding(code)
+  $: nameError = validateName(name, $snippets)
+
+  const saveSnippet = async () => {
+    loading = true
+    try {
+      const newSnippet = { name, code: rawJS }
+      await snippets.saveSnippet(newSnippet)
+      drawer.hide()
+      notifications.success(`Snippet ${newSnippet.name} saved`)
+    } catch (error) {
+      notifications.error(error.message || "Error saving snippet")
+    }
+    loading = false
+  }
+
+  const deleteSnippet = async () => {
+    loading = true
+    try {
+      await snippets.deleteSnippet(snippet.name)
+      drawer.hide()
+    } catch (error) {
+      notifications.error("Error deleting snippet")
+    }
+    loading = false
+  }
+
+  const validateName = (name, snippets) => {
+    if (!name?.length) {
+      return "Name is required"
+    }
+    if (snippets.some(snippet => snippet.name === name)) {
+      return "That name is already in use"
+    }
+    if (firstCharNumberRegex.test(name)) {
+      return "Can't start with a number"
+    }
+    if (!ValidSnippetNameRegex.test(name)) {
+      return "No special characters or spaces"
+    }
+    return null
+  }
+</script>
+
+<Drawer bind:this={drawer}>
+  <svelte:fragment slot="title">
+    {#if snippet}
+      {snippet.name}
+    {:else}
+      <div class="name" class:invalid={nameError != null}>
+        <span>Name</span>
+        <Input bind:value={name} />
+        {#if nameError}
+          <AbsTooltip text={nameError} type={TooltipType.Negative}>
+            <Icon
+              name="Help"
+              size="S"
+              color="var(--spectrum-global-color-red-400)"
+            />
+          </AbsTooltip>
+        {/if}
+      </div>
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="buttons">
+    {#if snippet}
+      <Button
+        warning
+        on:click={deleteConfirmationDialog.show}
+        disabled={loading}
+      >
+        Delete
+      </Button>
+    {/if}
+    <Button
+      cta
+      on:click={saveSnippet}
+      disabled={!snippet && (loading || nameError)}
+    >
+      Save
+    </Button>
+  </svelte:fragment>
+  <svelte:fragment slot="body">
+    {#key key}
+      <BindingPanel
+        allowHBS={false}
+        allowJS
+        allowSnippets={false}
+        showTabBar={false}
+        placeholder="return function(input) &#10100; ... &#10101;"
+        value={code}
+        on:change={e => (code = e.detail)}
+      >
+        <div slot="tabs">
+          <Input placeholder="Name" />
+        </div>
+      </BindingPanel>
+    {/key}
+  </svelte:fragment>
+</Drawer>
+
+<ConfirmDialog
+  bind:this={deleteConfirmationDialog}
+  title="Delete snippet"
+  body={`Are you sure you want to delete ${snippet?.name}?`}
+  onOk={deleteSnippet}
+/>
+
+<style>
+  .name {
+    display: flex;
+    gap: var(--spacing-l);
+    align-items: center;
+    position: relative;
+  }
+  .name :global(input) {
+    width: 200px;
+  }
+  .name.invalid :global(input) {
+    padding-right: 32px;
+  }
+  .name :global(.icon) {
+    position: absolute;
+    right: 10px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
new file mode 100644
index 0000000000..c68699fc0f
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
@@ -0,0 +1,278 @@
+<script>
+  import {
+    Input,
+    Layout,
+    Icon,
+    Popover,
+    Tags,
+    Tag,
+    Body,
+    Button,
+  } from "@budibase/bbui"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import { EditorModes } from "components/common/CodeEditor"
+  import SnippetDrawer from "./SnippetDrawer.svelte"
+  import { licensing } from "stores/portal"
+  import UpgradeButton from "pages/builder/portal/_components/UpgradeButton.svelte"
+
+  export let addSnippet
+  export let snippets
+
+  let search = ""
+  let searching = false
+  let popover
+  let popoverAnchor
+  let hoveredSnippet
+  let hideTimeout
+  let snippetDrawer
+  let editableSnippet
+
+  $: enableSnippets = !$licensing.isFreePlan
+  $: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
+
+  const getFilteredSnippets = (enableSnippets, snippets, search) => {
+    if (!enableSnippets || !snippets?.length) {
+      return []
+    }
+    if (!search?.length) {
+      return snippets
+    }
+    return snippets.filter(snippet =>
+      snippet.name.toLowerCase().includes(search.toLowerCase())
+    )
+  }
+
+  const showSnippet = (snippet, target) => {
+    stopHidingPopover()
+    popoverAnchor = target
+    hoveredSnippet = snippet
+    popover.show()
+  }
+
+  const hidePopover = () => {
+    hideTimeout = setTimeout(() => {
+      popover.hide()
+      popoverAnchor = null
+      hoveredSnippet = null
+      hideTimeout = null
+    }, 100)
+  }
+
+  const stopHidingPopover = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+  }
+
+  const startSearching = () => {
+    searching = true
+    search = ""
+  }
+
+  const stopSearching = () => {
+    searching = false
+    search = ""
+  }
+
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+
+  const editSnippet = (e, snippet) => {
+    e.preventDefault()
+    e.stopPropagation()
+    editableSnippet = snippet
+    snippetDrawer.show()
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="snippet-side-panel">
+  <Layout noPadding gap="S">
+    <div class="header">
+      {#if enableSnippets}
+        {#if searching}
+          <div class="search-input">
+            <Input
+              placeholder="Search for snippets"
+              autocomplete="off"
+              bind:value={search}
+              autofocus
+            />
+          </div>
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            newStyles
+            on:click={stopSearching}
+          />
+        {:else}
+          <div class="title">Snippets</div>
+          <Icon
+            size="S"
+            name="Search"
+            hoverable
+            newStyles
+            on:click={startSearching}
+          />
+          <Icon
+            size="S"
+            name="Add"
+            hoverable
+            newStyles
+            on:click={createSnippet}
+          />
+        {/if}
+      {:else}
+        <div class="title">
+          Snippets
+          <Tags>
+            <Tag icon="LockClosed">Premium</Tag>
+          </Tags>
+        </div>
+      {/if}
+    </div>
+    <div class="snippet-list">
+      {#if enableSnippets && filteredSnippets?.length}
+        {#each filteredSnippets as snippet}
+          <div
+            class="snippet"
+            on:mouseenter={e => showSnippet(snippet, e.target)}
+            on:mouseleave={hidePopover}
+            on:click={() => addSnippet(snippet)}
+          >
+            {snippet.name}
+            <Icon
+              name="Edit"
+              hoverable
+              newStyles
+              size="S"
+              on:click={e => editSnippet(e, snippet)}
+            />
+          </div>
+        {/each}
+      {:else}
+        <div class="upgrade">
+          <Body size="S">
+            Snippets let you create reusable JS functions and values that can
+            all be managed in one place
+          </Body>
+          {#if enableSnippets}
+            <Button cta on:click={createSnippet}>Create snippet</Button>
+          {:else}
+            <UpgradeButton />
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </Layout>
+</div>
+
+<Popover
+  align="left-outside"
+  bind:this={popover}
+  anchor={popoverAnchor}
+  minWidth={0}
+  maxWidth={480}
+  maxHeight={480}
+  dismissible={false}
+  on:mouseenter={stopHidingPopover}
+  on:mouseleave={hidePopover}
+>
+  <div class="snippet-popover">
+    {#key hoveredSnippet}
+      <CodeEditor
+        value={hoveredSnippet.code.trim()}
+        mode={EditorModes.JS}
+        readonly
+      />
+    {/key}
+  </div>
+</Popover>
+
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+
+<style>
+  .snippet-side-panel {
+    border-left: var(--border-light);
+    height: 100%;
+    overflow: auto;
+  }
+
+  /* Header */
+  .header {
+    height: 53px;
+    padding: 0 var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-bottom: var(--border-light);
+    position: sticky;
+    top: 0;
+    gap: var(--spacing-m);
+    background: var(--background);
+    z-index: 1;
+  }
+  .header :global(input) {
+    border: none;
+    border-radius: 0;
+    background: none;
+    padding: 0;
+  }
+  .search-input,
+  .title {
+    flex: 1 1 auto;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  /* Upgrade */
+  .upgrade {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .upgrade :global(p) {
+    text-align: center;
+    align-self: center;
+  }
+
+  /* List */
+  .snippet-list {
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+  }
+  .snippet {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
+    word-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+  }
+  .snippet:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
+
+  /* Popover */
+  .snippet-popover {
+    width: 400px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index a086cd0394..c60374f0f7 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -38,4 +38,11 @@ export class BindingHelpers {
       this.insertAtPos({ start, end, value: insertVal })
     }
   }
+
+  // Adds a snippet to the expression
+  onSelectSnippet(snippet) {
+    const pos = this.getCaretPosition()
+    const { start, end } = pos
+    this.insertAtPos({ start, end, value: `snippets.${snippet.name}` })
+  }
 }
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
index d445c98a1a..f009c975cf 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -12,6 +12,7 @@
   export let bindings
   export let nested
   export let componentInstance
+  export let title = "Actions"
 
   let drawer
   let tmpValue
@@ -37,7 +38,7 @@
   <ActionButton on:click={openDrawer}>{actionText}</ActionButton>
 </div>
 
-<Drawer bind:this={drawer} title={"Actions"} on:drawerHide on:drawerShow>
+<Drawer bind:this={drawer} {title} on:drawerHide on:drawerShow>
   <svelte:fragment slot="description">
     Define what actions to run.
   </svelte:fragment>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
index 431368d28f..5b7844ce53 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DeleteRow.svelte
@@ -31,7 +31,7 @@
     <Label small>Row IDs</Label>
     <DrawerBindableInput
       {bindings}
-      title="Rows to delete"
+      title="Row IDs to delete"
       value={parameters.rowId}
       on:change={value => (parameters.rowId = value.detail)}
     />
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
index 4478f1bb16..61b7494ab2 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/FetchRow.svelte
@@ -29,7 +29,7 @@
   <Label small>Row ID</Label>
   <DrawerBindableInput
     {bindings}
-    title="Row ID to Fetch"
+    title="Row ID"
     value={parameters.rowId}
     on:change={value => (parameters.rowId = value.detail)}
   />
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
index 52bd84c453..e03af75207 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte
@@ -62,7 +62,7 @@
     {/if}
     <Label small>{valueLabel}</Label>
     <DrawerBindableInput
-      title={`Value for "${field[0]}"`}
+      title={field[0]}
       value={field[1]}
       {bindings}
       on:change={event => updateFieldValue(idx, event.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
index 55b00d215d..d95e13cb5f 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
@@ -40,6 +40,7 @@
   <Select bind:value={parameters.type} options={types} placeholder={null} />
   <Label>Message</Label>
   <DrawerBindableInput
+    title="Message"
     {bindings}
     value={parameters.message}
     on:change={e => (parameters.message = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
index 51aa6e8cfd..9c843e35d6 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte
@@ -72,6 +72,7 @@
   {#if parameters.type === "set"}
     <Label small>Value</Label>
     <DrawerBindableInput
+      title="Field value"
       {bindings}
       value={parameters.value}
       on:change={e => (parameters.value = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
index 16a77692ae..fda05ef45a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte
@@ -38,6 +38,7 @@
   {#if parameters.type === "set"}
     <Label small>Value</Label>
     <DrawerBindableInput
+      title="State value"
       {bindings}
       value={parameters.value}
       on:change={e => (parameters.value = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
index db2289345f..0bad2ffb19 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@@ -14,6 +14,7 @@
   export let key
   export let nested
   export let max
+  export let context
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
index f5167e3657..f6f25b2512 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
@@ -28,6 +28,7 @@
         placeholder="Default"
       />
       <DrawerBindableInput
+        title="Value"
         label="Value"
         value={column.template}
         on:change={e => (column.template = e.detail)}
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte
index b52e7edc54..04a491c6f3 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/CellEditor.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Icon name="Settings" hoverable size="S" on:click={open} />
-<Drawer bind:this={drawer} title="Table Columns">
+<Drawer bind:this={drawer} title={column.name}>
   <svelte:fragment slot="description">
     "{column.name}" column settings
   </svelte:fragment>
diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index 0e01c264fc..bf0aa75bed 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
@@ -48,7 +48,6 @@
   let drawer
   let tmpQueryParams
   let tmpCustomData
-  let customDataValid = true
   let modal
 
   $: text = value?.label ?? "Choose an option"
@@ -267,14 +266,11 @@
     <Drawer title="Custom data" bind:this={drawer}>
       <div slot="buttons" style="display:contents">
         <Button primary on:click={promptForCSV}>Load CSV</Button>
-        <Button cta on:click={saveCustomData} disabled={!customDataValid}>
-          Save
-        </Button>
+        <Button cta on:click={saveCustomData}>Save</Button>
       </div>
       <div slot="description">Provide a JSON array to use as data</div>
       <ClientBindingPanel
         slot="body"
-        bind:valid={customDataValid}
         value={tmpCustomData}
         on:change={event => (tmpCustomData = event.detail)}
         {bindings}
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
index 0fe1cb90d2..7f1ee8010d 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
@@ -26,7 +26,6 @@
   export let bindings = []
   export let panel = ClientBindingPanel
   export let allowBindings = true
-  export let fillWidth = false
   export let datasource
 
   const dispatch = createEventDispatcher()
@@ -260,13 +259,12 @@
               {#if filter.field && filter.valueType === "Binding"}
                 <DrawerBindableInput
                   disabled={filter.noValue}
-                  title={`Value for "${filter.field}"`}
+                  title={filter.field}
                   value={filter.value}
                   placeholder="Value"
                   {panel}
                   {bindings}
                   on:change={event => (filter.value = event.detail)}
-                  {fillWidth}
                 />
               {:else if ["string", "longform", "number", "bigint", "formula"].includes(filter.type)}
                 <Input disabled={filter.noValue} bind:value={filter.value} />
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 0f0276823a..4db9a03d80 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -105,6 +105,7 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
+      title={label}
       {nested}
       {key}
       {type}
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index e71090f613..74636fc50c 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -143,7 +143,6 @@
           value={field.value}
           allowJS={false}
           {allowHelpers}
-          fillWidth={true}
           drawerLeft={bindingDrawerLeft}
         />
       {:else}
diff --git a/packages/builder/src/helpers/duplicate.js b/packages/builder/src/helpers/duplicate.js
index 1547fcd4d1..c2a924f97b 100644
--- a/packages/builder/src/helpers/duplicate.js
+++ b/packages/builder/src/helpers/duplicate.js
@@ -48,3 +48,53 @@ export const duplicateName = (name, allNames) => {
 
   return `${baseName} ${number}`
 }
+
+/**
+ * More flexible alternative to the above function, which handles getting the
+ * next sequential name from an array of existing items while accounting for
+ * any type of prefix, and being able to deeply retrieve that name from the
+ * existing item array.
+ *
+ * Examples with a prefix of "foo":
+ * [] => "foo"
+ * ["foo"] => "foo2"
+ * ["foo", "foo6"] => "foo7"
+ *
+ * Examples with a prefix of "foo " (space at the end):
+ * [] => "foo"
+ * ["foo"] => "foo 2"
+ * ["foo", "foo 6"] => "foo 7"
+ *
+ * @param items the array of existing items
+ * @param prefix the string prefix of each name, including any spaces desired
+ * @param getName optional function to extract the name for an item, if not a
+ *  flat array of strings
+ */
+export const getSequentialName = (items, prefix, getName = x => x) => {
+  if (!prefix?.length || !getName) {
+    return null
+  }
+  const trimmedPrefix = prefix.trim()
+  if (!items?.length) {
+    return trimmedPrefix
+  }
+  let max = 0
+  items.forEach(item => {
+    const name = getName(item)
+    if (typeof name !== "string" || !name.startsWith(trimmedPrefix)) {
+      return
+    }
+    const split = name.split(trimmedPrefix)
+    if (split.length !== 2) {
+      return
+    }
+    if (split[1].trim() === "") {
+      split[1] = "1"
+    }
+    const num = parseInt(split[1])
+    if (num > max) {
+      max = num
+    }
+  })
+  return max === 0 ? trimmedPrefix : `${prefix}${max + 1}`
+}
diff --git a/packages/builder/src/helpers/tests/duplicate.test.js b/packages/builder/src/helpers/tests/duplicate.test.js
index 400abed0aa..7e51c5ff2a 100644
--- a/packages/builder/src/helpers/tests/duplicate.test.js
+++ b/packages/builder/src/helpers/tests/duplicate.test.js
@@ -1,5 +1,5 @@
 import { expect, describe, it } from "vitest"
-import { duplicateName } from "../duplicate"
+import { duplicateName, getSequentialName } from "../duplicate"
 
 describe("duplicate", () => {
   describe("duplicates a name ", () => {
@@ -40,3 +40,64 @@ describe("duplicate", () => {
     })
   })
 })
+
+describe("getSequentialName", () => {
+  it("handles nullish items", async () => {
+    const name = getSequentialName(null, "foo", () => {})
+    expect(name).toBe("foo")
+  })
+
+  it("handles nullish prefix", async () => {
+    const name = getSequentialName([], null, () => {})
+    expect(name).toBe(null)
+  })
+
+  it("handles nullish getName function", async () => {
+    const name = getSequentialName([], "foo", null)
+    expect(name).toBe(null)
+  })
+
+  it("handles just the prefix", async () => {
+    const name = getSequentialName(["foo"], "foo", x => x)
+    expect(name).toBe("foo2")
+  })
+
+  it("handles continuous ranges", async () => {
+    const name = getSequentialName(["foo", "foo2", "foo3"], "foo", x => x)
+    expect(name).toBe("foo4")
+  })
+
+  it("handles discontinuous ranges", async () => {
+    const name = getSequentialName(["foo", "foo3"], "foo", x => x)
+    expect(name).toBe("foo4")
+  })
+
+  it("handles a space inside the prefix", async () => {
+    const name = getSequentialName(["foo", "foo 2", "foo 3"], "foo ", x => x)
+    expect(name).toBe("foo 4")
+  })
+
+  it("handles a space inside the prefix with just the prefix", async () => {
+    const name = getSequentialName(["foo"], "foo ", x => x)
+    expect(name).toBe("foo 2")
+  })
+
+  it("handles no matches", async () => {
+    const name = getSequentialName(["aaa", "bbb"], "foo", x => x)
+    expect(name).toBe("foo")
+  })
+
+  it("handles similar names", async () => {
+    const name = getSequentialName(
+      ["fooo1", "2foo", "a3foo4", "5foo5"],
+      "foo",
+      x => x
+    )
+    expect(name).toBe("foo")
+  })
+
+  it("handles non-string names", async () => {
+    const name = getSequentialName([null, 4123, [], {}], "foo", x => x)
+    expect(name).toBe("foo")
+  })
+})
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 62d3951fb5..95ca05b87b 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -71,6 +71,10 @@
       await auth.getSelf()
       await admin.init()
 
+      if ($admin.maintenance.length > 0) {
+        $redirect("./maintenance")
+      }
+
       if ($auth.user) {
         await licensing.init()
       }
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 16a1adadee..45b10d3d9e 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -188,7 +188,7 @@
 {/if}
 
 <svelte:window on:keydown={handleKeyDown} />
-<Modal bind:this={commandPaletteModal}>
+<Modal bind:this={commandPaletteModal} zIndex={999999}>
   <CommandPalette />
 </Modal>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index c4ee060149..57180625b1 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -40,7 +40,7 @@
 <!-- routify:options index=3 -->
 <div class="root">
   <AutomationPanel {modal} {webhookModal} />
-  <div class="content">
+  <div class="content drawer-container">
     {#if $automationStore.automations?.length}
       <slot />
     {:else}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 5867021386..4617814485 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -6,6 +6,7 @@
 </script>
 
 <div class="app-panel">
+  <div class="drawer-container" />
   <div class="header">
     <div class="header-left">
       <UndoRedoControl store={screenStore.history} />
@@ -32,7 +33,17 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    padding: 9px var(--spacing-m);
+    padding: 9px 10px 12px 10px;
+    position: relative;
+    transition: width 360ms ease-out;
+  }
+  .drawer-container {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
   }
   .header {
     display: flex;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 219b47687c..e74a05ff99 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -11,6 +11,7 @@
     selectedScreen,
     hoverStore,
     componentTreeNodesStore,
+    snippets,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -69,6 +70,7 @@
       hostname: window.location.hostname,
       port: window.location.port,
     },
+    snippets: $snippets,
   }
 
   // Refresh the preview when required
@@ -198,6 +200,16 @@
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await componentStore.addParent(componentId, parentType)
+    } else if (type === "provide-context") {
+      let context = data?.context
+      if (context) {
+        try {
+          context = JSON.parse(context)
+        } catch (error) {
+          context = null
+        }
+      }
+      previewStore.setSelectedComponentContext(context)
     } else {
       console.warn(`Client sent unknown event type: ${type}`)
     }
diff --git a/packages/builder/src/pages/builder/maintenance/index.svelte b/packages/builder/src/pages/builder/maintenance/index.svelte
new file mode 100644
index 0000000000..e4c379885a
--- /dev/null
+++ b/packages/builder/src/pages/builder/maintenance/index.svelte
@@ -0,0 +1,83 @@
+<script>
+  import { MaintenanceType } from "@budibase/types"
+  import { Heading, Body, Button, Layout } from "@budibase/bbui"
+  import { admin } from "stores/portal"
+  import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte"
+
+  $: {
+    if ($admin.maintenance.length === 0) {
+      window.location = "/builder"
+    }
+  }
+</script>
+
+<div class="main">
+  <div class="content">
+    <div class="hero">
+      <BudibaseLogo />
+    </div>
+    <div class="inner-content">
+      {#each $admin.maintenance as maintenance}
+        {#if maintenance.type === MaintenanceType.SQS_MISSING}
+          <Layout>
+            <Heading>Please upgrade your Budibase installation</Heading>
+            <Body>
+              We've detected that the version of Budibase you're using depends
+              on a more recent version of the CouchDB database than what you
+              have installed.
+            </Body>
+            <Body>
+              To resolve this, you can either rollback to a previous version of
+              Budibase, or follow the migration guide to update to a later
+              version of CouchDB.
+            </Body>
+          </Layout>
+          <Button
+            on:click={() => (window.location = "https://docs.budibase.com")}
+            >Migration guide</Button
+          >
+        {/if}
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .main {
+    max-width: 700px;
+    margin: auto;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-l);
+  }
+  .hero {
+    margin: var(--spacing-l);
+  }
+  .content {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: center;
+    gap: var(--spacing-m);
+  }
+
+  .inner-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-m);
+  }
+
+  @media only screen and (max-width: 600px) {
+    .content {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .main {
+      height: auto;
+    }
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/_components/BudibaseLogo.svelte b/packages/builder/src/pages/builder/portal/_components/BudibaseLogo.svelte
new file mode 100644
index 0000000000..b0dc4cda50
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/_components/BudibaseLogo.svelte
@@ -0,0 +1,15 @@
+<script>
+  import Logo from "assets/bb-emblem.svg"
+  import { goto } from "@roxi/routify"
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<img src={Logo} alt="Budibase Logo" on:click={() => $goto("./apps")} />
+
+<style>
+  img {
+    width: 30px;
+    height: 30px;
+  }
+</style>
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 98fedd880a..5e94ce0552 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -14,6 +14,7 @@ import {
 } from "./automations.js"
 import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
+import { snippets } from "./snippets"
 
 // Backend
 import { tables } from "./tables"
@@ -59,6 +60,7 @@ export {
   queries,
   flags,
   hoverStore,
+  snippets,
 }
 
 export const reset = () => {
@@ -98,6 +100,7 @@ export const initialise = async pkg => {
   builderStore.init(application)
   navigationStore.syncAppNavigation(application?.navigation)
   themeStore.syncAppTheme(application)
+  snippets.syncMetadata(application)
   screenStore.syncAppScreens(pkg)
   layoutStore.syncAppLayouts(pkg)
   resetBuilderHistory()
diff --git a/packages/builder/src/stores/builder/preview.js b/packages/builder/src/stores/builder/preview.js
index ecdd4573de..4923185ee7 100644
--- a/packages/builder/src/stores/builder/preview.js
+++ b/packages/builder/src/stores/builder/preview.js
@@ -4,6 +4,7 @@ const INITIAL_PREVIEW_STATE = {
   previewDevice: "desktop",
   previewEventHandler: null,
   showPreview: false,
+  selectedComponentContext: null,
 }
 
 export const createPreviewStore = () => {
@@ -52,6 +53,17 @@ export const createPreviewStore = () => {
     })
   }
 
+  const setSelectedComponentContext = context => {
+    store.update(state => {
+      state.selectedComponentContext = context
+      return state
+    })
+  }
+
+  const requestComponentContext = () => {
+    sendEvent("request-context")
+  }
+
   return {
     subscribe: store.subscribe,
     setDevice,
@@ -60,6 +72,8 @@ export const createPreviewStore = () => {
     startDrag,
     stopDrag,
     showPreview,
+    setSelectedComponentContext,
+    requestComponentContext,
   }
 }
 
diff --git a/packages/builder/src/stores/builder/snippets.js b/packages/builder/src/stores/builder/snippets.js
new file mode 100644
index 0000000000..72ab274730
--- /dev/null
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -0,0 +1,41 @@
+import { writable, get } from "svelte/store"
+import { API } from "api"
+import { appStore } from "./app"
+
+const createsnippets = () => {
+  const store = writable([])
+
+  const syncMetadata = metadata => {
+    store.set(metadata?.snippets || [])
+  }
+
+  const saveSnippet = async updatedSnippet => {
+    const snippets = [
+      ...get(store).filter(snippet => snippet.name !== updatedSnippet.name),
+      updatedSnippet,
+    ]
+    const app = await API.saveAppMetadata({
+      appId: get(appStore).appId,
+      metadata: { snippets },
+    })
+    syncMetadata(app)
+  }
+
+  const deleteSnippet = async snippetName => {
+    const snippets = get(store).filter(snippet => snippet.name !== snippetName)
+    const app = await API.saveAppMetadata({
+      appId: get(appStore).appId,
+      metadata: { snippets },
+    })
+    syncMetadata(app)
+  }
+
+  return {
+    ...store,
+    syncMetadata,
+    saveSnippet,
+    deleteSnippet,
+  }
+}
+
+export const snippets = createsnippets()
diff --git a/packages/builder/src/stores/builder/websocket.js b/packages/builder/src/stores/builder/websocket.js
index bbdf7b6d63..0704f26439 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -6,6 +6,7 @@ import {
   themeStore,
   navigationStore,
   deploymentStore,
+  snippets,
   datasources,
   tables,
 } from "stores/builder"
@@ -64,6 +65,7 @@ export const createBuilderWebsocket = appId => {
     appStore.syncMetadata(metadata)
     themeStore.syncMetadata(metadata)
     navigationStore.syncMetadata(metadata)
+    snippets.syncMetadata(metadata)
   })
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,
diff --git a/packages/builder/src/stores/portal/admin.js b/packages/builder/src/stores/portal/admin.js
index 2106acac27..29d4585c06 100644
--- a/packages/builder/src/stores/portal/admin.js
+++ b/packages/builder/src/stores/portal/admin.js
@@ -17,6 +17,7 @@ export const DEFAULT_CONFIG = {
     adminUser: { checked: false },
     sso: { checked: false },
   },
+  maintenance: [],
   offlineMode: false,
 }
 
@@ -48,6 +49,7 @@ export function createAdminStore() {
       store.isDev = environment.isDev
       store.baseUrl = environment.baseUrl
       store.offlineMode = environment.offlineMode
+      store.maintenance = environment.maintenance
       return store
     })
   }
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 4efa8af4e6..e6cda03270 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -17,6 +17,7 @@
     appStore,
     devToolsStore,
     devToolsEnabled,
+    environmentStore,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
   import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
@@ -36,7 +37,9 @@
   import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
   import DevTools from "components/devtools/DevTools.svelte"
   import FreeFooter from "components/FreeFooter.svelte"
+  import MaintenanceScreen from "components/MaintenanceScreen.svelte"
   import licensing from "../licensing"
+  import SnippetsProvider from "./context/SnippetsProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -111,122 +114,130 @@
     class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
     class:builder={$builderStore.inBuilder}
   >
-    <DeviceBindingsProvider>
-      <UserBindingsProvider>
-        <StateBindingsProvider>
-          <RowSelectionProvider>
-            <QueryParamsProvider>
-              <!-- Settings bar can be rendered outside of device preview -->
-              <!-- Key block needs to be outside the if statement or it breaks -->
-              {#key $builderStore.selectedComponentId}
-                {#if $builderStore.inBuilder}
-                  <SettingsBar />
-                {/if}
-              {/key}
+    {#if $environmentStore.maintenance.length > 0}
+      <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
+    {:else}
+      <DeviceBindingsProvider>
+        <UserBindingsProvider>
+          <StateBindingsProvider>
+            <RowSelectionProvider>
+              <QueryParamsProvider>
+                <SnippetsProvider>
+                  <!-- Settings bar can be rendered outside of device preview -->
+                  <!-- Key block needs to be outside the if statement or it breaks -->
+                  {#key $builderStore.selectedComponentId}
+                    {#if $builderStore.inBuilder}
+                      <SettingsBar />
+                    {/if}
+                  {/key}
 
-              <!-- Clip boundary for selection indicators -->
-              <div
-                id="clip-root"
-                class:preview={$builderStore.inBuilder}
-                class:tablet-preview={$builderStore.previewDevice === "tablet"}
-                class:mobile-preview={$builderStore.previewDevice === "mobile"}
-              >
-                <!-- Actual app -->
-                <div id="app-root">
-                  {#if showDevTools}
-                    <DevToolsHeader />
-                  {/if}
+                  <!-- Clip boundary for selection indicators -->
+                  <div
+                    id="clip-root"
+                    class:preview={$builderStore.inBuilder}
+                    class:tablet-preview={$builderStore.previewDevice ===
+                      "tablet"}
+                    class:mobile-preview={$builderStore.previewDevice ===
+                      "mobile"}
+                  >
+                    <!-- Actual app -->
+                    <div id="app-root">
+                      {#if showDevTools}
+                        <DevToolsHeader />
+                      {/if}
 
-                  <div id="app-body">
-                    {#if permissionError}
-                      <div class="error">
-                        <Layout justifyItems="center" gap="S">
-                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                          {@html ErrorSVG}
-                          <Heading size="L">
-                            You don't have permission to use this app
-                          </Heading>
-                          <Body size="S">
-                            Ask your administrator to grant you access
-                          </Body>
-                        </Layout>
-                      </div>
-                    {:else if !$screenStore.activeLayout}
-                      <div class="error">
-                        <Layout justifyItems="center" gap="S">
-                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                          {@html ErrorSVG}
-                          <Heading size="L">
-                            Something went wrong rendering your app
-                          </Heading>
-                          <Body size="S">
-                            Get in touch with support if this issue persists
-                          </Body>
-                        </Layout>
-                      </div>
-                    {:else if embedNoScreens}
-                      <div class="error">
-                        <Layout justifyItems="center" gap="S">
-                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                          {@html ErrorSVG}
-                          <Heading size="L">
-                            This Budibase app is not publicly accessible
-                          </Heading>
-                        </Layout>
-                      </div>
-                    {:else}
-                      <CustomThemeWrapper>
-                        {#key $screenStore.activeLayout._id}
-                          <Component
-                            isLayout
-                            instance={$screenStore.activeLayout.props}
-                          />
-                        {/key}
+                      <div id="app-body">
+                        {#if permissionError}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                You don't have permission to use this app
+                              </Heading>
+                              <Body size="S">
+                                Ask your administrator to grant you access
+                              </Body>
+                            </Layout>
+                          </div>
+                        {:else if !$screenStore.activeLayout}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                Something went wrong rendering your app
+                              </Heading>
+                              <Body size="S">
+                                Get in touch with support if this issue persists
+                              </Body>
+                            </Layout>
+                          </div>
+                        {:else if embedNoScreens}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                This Budibase app is not publicly accessible
+                              </Heading>
+                            </Layout>
+                          </div>
+                        {:else}
+                          <CustomThemeWrapper>
+                            {#key $screenStore.activeLayout._id}
+                              <Component
+                                isLayout
+                                instance={$screenStore.activeLayout.props}
+                              />
+                            {/key}
 
-                        <!--
+                            <!--
                           Flatpickr needs to be inside the theme wrapper.
                           It also needs its own container because otherwise it hijacks
                           key events on the whole page. It is painful to work with.
                         -->
-                        <div id="flatpickr-root" />
+                            <div id="flatpickr-root" />
 
-                        <!-- Modal container to ensure they sit on top -->
-                        <div class="modal-container" />
+                            <!-- Modal container to ensure they sit on top -->
+                            <div class="modal-container" />
 
-                        <!-- Layers on top of app -->
-                        <NotificationDisplay />
-                        <ConfirmationDisplay />
-                        <PeekScreenDisplay />
-                      </CustomThemeWrapper>
+                            <!-- Layers on top of app -->
+                            <NotificationDisplay />
+                            <ConfirmationDisplay />
+                            <PeekScreenDisplay />
+                          </CustomThemeWrapper>
+                        {/if}
+
+                        {#if showDevTools}
+                          <DevTools />
+                        {/if}
+                      </div>
+
+                      {#if !$builderStore.inBuilder && licensing.logoEnabled()}
+                        <FreeFooter />
+                      {/if}
+                    </div>
+
+                    <!-- Preview and dev tools utilities  -->
+                    {#if $appStore.isDevApp}
+                      <SelectionIndicator />
                     {/if}
-
-                    {#if showDevTools}
-                      <DevTools />
+                    {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
+                      <HoverIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder}
+                      <DNDHandler />
+                      <GridDNDHandler />
                     {/if}
                   </div>
-
-                  {#if !$builderStore.inBuilder && licensing.logoEnabled()}
-                    <FreeFooter />
-                  {/if}
-                </div>
-
-                <!-- Preview and dev tools utilities  -->
-                {#if $appStore.isDevApp}
-                  <SelectionIndicator />
-                {/if}
-                {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
-                  <HoverIndicator />
-                {/if}
-                {#if $builderStore.inBuilder}
-                  <DNDHandler />
-                  <GridDNDHandler />
-                {/if}
-              </div>
-            </QueryParamsProvider>
-          </RowSelectionProvider>
-        </StateBindingsProvider>
-      </UserBindingsProvider>
-    </DeviceBindingsProvider>
+                </SnippetsProvider>
+              </QueryParamsProvider>
+            </RowSelectionProvider>
+          </StateBindingsProvider>
+        </UserBindingsProvider>
+      </DeviceBindingsProvider>
+    {/if}
   </div>
   <KeyboardManager />
 {/if}
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6d6af91dcc..7dbe0c0e44 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -565,7 +565,8 @@
 
     // If we don't know, check and cache
     if (used == null) {
-      used = bindingString.indexOf(`[${key}]`) !== -1
+      const searchString = key === "snippets" ? key : `[${key}]`
+      used = bindingString.indexOf(searchString) !== -1
       knownContextKeyMap[key] = used
     }
 
@@ -575,6 +576,15 @@
     }
   }
 
+  const getDataContext = () => {
+    const normalContext = get(context)
+    const additionalContext = ref?.getAdditionalDataContext?.()
+    return {
+      ...normalContext,
+      ...additionalContext,
+    }
+  }
+
   onMount(() => {
     // Register this component instance for external access
     if ($appStore.isDevApp) {
@@ -583,7 +593,7 @@
           component: instance._component,
           getSettings: () => cachedSettings,
           getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
-          getDataContext: () => get(context),
+          getDataContext,
           reload: () => initialise(instance, true),
           setEphemeralStyles: styles => (ephemeralStyles = styles),
           state: store,
diff --git a/packages/client/src/components/MaintenanceScreen.svelte b/packages/client/src/components/MaintenanceScreen.svelte
new file mode 100644
index 0000000000..a44c1292dd
--- /dev/null
+++ b/packages/client/src/components/MaintenanceScreen.svelte
@@ -0,0 +1,53 @@
+<!--
+  This is the public facing maintenance screen. It is displayed when there is
+  required maintenance to be done on the Budibase installation. We only use this
+  if we detect that the Budibase installation is in a state where the vast
+  majority of apps would not function correctly.
+
+  The builder-facing maintenance screen is in
+  packages/builder/src/pages/builder/maintenance/index.svelte, and tends to
+  contain more detailed information and actions for the installation owner to
+  take.
+-->
+<script>
+  import { MaintenanceType } from "@budibase/types"
+  import { Heading, Body, Layout } from "@budibase/bbui"
+
+  export let maintenanceList
+</script>
+
+<div class="content">
+  {#each maintenanceList as maintenance}
+    {#if maintenance.type === MaintenanceType.SQS_MISSING}
+      <Layout>
+        <Heading>Budibase installation requires maintenance</Heading>
+        <Body>
+          The administrator of this Budibase installation needs to take actions
+          to update components that are out of date. Please contact them and
+          show them this warning. More information will be available when they
+          log into their account.
+        </Body>
+      </Layout>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .content {
+    max-width: 700px;
+    margin: auto;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-l);
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+  }
+</style>
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 0a343cac51..46a507387d 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -30,6 +30,7 @@
     ActionTypes,
     createContextStore,
     Provider,
+    generateGoldenSample,
   } = getContext("sdk")
 
   let grid
@@ -48,6 +49,19 @@
     },
   ]
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(grid?.getContext()?.rows)
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [id]: goldenRow,
+      eventContext: {
+        row: goldenRow,
+      },
+    }
+  }
+
   // Parses columns to fix older formats
   const getParsedColumns = columns => {
     // If the first element has an active key all elements should be in the new format
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 008fa7e730..bd2b69d352 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -4,6 +4,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
+  import { get } from "svelte/store"
 
   export let title
   export let dataSource
@@ -31,7 +32,9 @@
   export let linkColumn
   export let noRowsMessage
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const context = getContext("context")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
+  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -62,6 +65,16 @@
     },
   ]
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[dataProviderId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   // Builds a full details page URL for the card title
   const buildFullCardUrl = (link, url, repeaterId, linkColumn) => {
     if (!link || !url || !repeaterId) {
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b24c2f418a..1a0fbbd50d 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -5,7 +5,7 @@
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
-  import { writable } from "svelte/store"
+  import { get, writable } from "svelte/store"
 
   export let actionType
   export let rowId
@@ -15,7 +15,7 @@
   export let buttonPosition = "bottom"
   export let size
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
   const context = getContext("context")
 
@@ -45,6 +45,16 @@
   $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
   $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const id = get(component).id
+    const rows = get(context)[`${id}-provider`]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   const updateCurrentStep = (steps, builderStore, component) => {
     const { componentId, step } = builderStore.metadata || {}
 
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index 30fbdddcdc..878b827c78 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@@ -4,6 +4,7 @@
   import Placeholder from "components/app/Placeholder.svelte"
   import { getContext } from "svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
+  import { get } from "svelte/store"
 
   export let dataSource
   export let filter
@@ -18,8 +19,20 @@
   export let gap
 
   const component = getContext("component")
+  const context = getContext("context")
+  const { generateGoldenSample } = getContext("sdk")
 
   let providerId
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[providerId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
 </script>
 
 <Block>
diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte
index 8fadcb5006..1e2357713a 100644
--- a/packages/client/src/components/app/blocks/RowExplorer.svelte
+++ b/packages/client/src/components/app/blocks/RowExplorer.svelte
@@ -3,25 +3,35 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { generate } from "shortid"
+  import { get } from "svelte/store"
+  import { getContext } from "svelte"
 
   export let dataSource
   export let height
-
   export let cardTitle
   export let cardSubtitle
   export let cardDescription
   export let cardImageURL
   export let cardSearchField
-
   export let detailFields
   export let detailTitle
-
   export let noRowsMessage
 
   const stateKey = generate()
+  const context = getContext("context")
+  const { generateGoldenSample } = getContext("sdk")
 
   let listDataProviderId
   let listRepeaterId
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[listDataProviderId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [listRepeaterId]: goldenRow,
+    }
+  }
 </script>
 
 <Block>
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index cdf1a05628..8c084a71ab 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -3,6 +3,7 @@
   import InnerFormBlock from "./InnerFormBlock.svelte"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./FormBlockWrapper.svelte"
+  import { get } from "svelte/store"
 
   export let actionType
   export let dataSource
@@ -11,7 +12,6 @@
   export let fields
   export let buttons
   export let buttonPosition
-
   export let title
   export let description
   export let rowId
@@ -25,8 +25,56 @@
   export let saveButtonLabel
   export let deleteButtonLabel
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
+  const context = getContext("context")
+
+  let schema
+
+  $: formattedFields = convertOldFieldFormat(fields)
+  $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
+  $: fetchSchema(dataSource)
+  // We could simply spread $$props into the inner form and append our
+  // additions, but that would create svelte warnings about unused props and
+  // make maintenance in future more confusing as we typically always have a
+  // proper mapping of schema settings to component exports, without having to
+  // search multiple files
+  $: innerProps = {
+    dataSource,
+    actionUrl,
+    actionType,
+    size,
+    disabled,
+    fields: fieldsOrDefault,
+    title,
+    description,
+    schema,
+    notificationOverride,
+    buttons:
+      buttons ||
+      Utils.buildFormBlockButtonConfig({
+        _id: $component.id,
+        showDeleteButton,
+        showSaveButton,
+        saveButtonLabel,
+        deleteButtonLabel,
+        notificationOverride,
+        actionType,
+        actionUrl,
+        dataSource,
+      }),
+    buttonPosition: buttons ? buttonPosition : "top",
+  }
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const id = get(component).id
+    const rows = get(context)[`${id}-provider`]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
 
   const convertOldFieldFormat = fields => {
     if (!fields) {
@@ -68,42 +116,6 @@
     return [...fields, ...defaultFields].filter(field => field.active)
   }
 
-  let schema
-
-  $: formattedFields = convertOldFieldFormat(fields)
-  $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
-  $: fetchSchema(dataSource)
-  // We could simply spread $$props into the inner form and append our
-  // additions, but that would create svelte warnings about unused props and
-  // make maintenance in future more confusing as we typically always have a
-  // proper mapping of schema settings to component exports, without having to
-  // search multiple files
-  $: innerProps = {
-    dataSource,
-    actionUrl,
-    actionType,
-    size,
-    disabled,
-    fields: fieldsOrDefault,
-    title,
-    description,
-    schema,
-    notificationOverride,
-    buttons:
-      buttons ||
-      Utils.buildFormBlockButtonConfig({
-        _id: $component.id,
-        showDeleteButton,
-        showSaveButton,
-        saveButtonLabel,
-        deleteButtonLabel,
-        notificationOverride,
-        actionType,
-        actionUrl,
-        dataSource,
-      }),
-    buttonPosition: buttons ? buttonPosition : "top",
-  }
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
diff --git a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
index 549574e89b..2f7af56744 100644
--- a/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
+++ b/packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
@@ -58,13 +58,13 @@
     }
     let clonedSchema = {}
     if (!allowedFields?.length) {
-      clonedSchema = schema
+      clonedSchema = schema || {}
     } else {
       allowedFields?.forEach(field => {
-        if (schema[field.name]) {
+        if (schema?.[field.name]) {
           clonedSchema[field.name] = schema[field.name]
           clonedSchema[field.name].displayName = field.displayName
-        } else if (schema[field]) {
+        } else if (schema?.[field]) {
           clonedSchema[field] = schema[field]
         }
       })
diff --git a/packages/client/src/components/context/SnippetsProvider.svelte b/packages/client/src/components/context/SnippetsProvider.svelte
new file mode 100644
index 0000000000..53fa1e8b7f
--- /dev/null
+++ b/packages/client/src/components/context/SnippetsProvider.svelte
@@ -0,0 +1,8 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { snippets } from "stores"
+</script>
+
+<Provider key="snippets" data={$snippets}>
+  <slot />
+</Provider>
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 2c8d310619..9c249dd5b3 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -42,6 +42,7 @@ const loadBudibase = async () => {
     hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
     usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
     location: window["##BUDIBASE_LOCATION##"],
+    snippets: window["##BUDIBASE_SNIPPETS##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real
@@ -84,6 +85,18 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "request-context") {
+      const { selectedComponentInstance } = get(componentStore)
+      const context = selectedComponentInstance?.getDataContext()
+      let stringifiedContext = null
+      try {
+        stringifiedContext = JSON.stringify(context)
+      } catch (error) {
+        // Ignore - invalid context
+      }
+      eventStore.actions.dispatchEvent("provide-context", {
+        context: stringifiedContext,
+      })
     } else if (type === "hover-component") {
       hoverStore.actions.hoverComponent(data)
     } else if (type === "builder-meta") {
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 557d5ca8da..d86d635970 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -29,7 +29,12 @@ import { fetchDatasourceSchema } from "./utils/schema.js"
 import { getAPIKey } from "./utils/api.js"
 import { enrichButtonActions } from "./utils/buttonActions.js"
 import { processStringSync, makePropSafe } from "@budibase/string-templates"
-import { fetchData, LuceneUtils, Constants } from "@budibase/frontend-core"
+import {
+  fetchData,
+  LuceneUtils,
+  Constants,
+  RowUtils,
+} from "@budibase/frontend-core"
 
 export default {
   API,
@@ -65,6 +70,7 @@ export default {
   processStringSync,
   makePropSafe,
   createContextStore,
+  generateGoldenSample: RowUtils.generateGoldenSample,
 
   // Components
   Provider,
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 2e745885b5..5440fc3a79 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -18,6 +18,7 @@ const createBuilderStore = () => {
     usedPlugins: null,
     eventResolvers: {},
     metadata: null,
+    snippets: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
index d9a7743be6..337c73831f 100644
--- a/packages/client/src/stores/derived/index.js
+++ b/packages/client/src/stores/derived/index.js
@@ -4,3 +4,4 @@
 export { currentRole } from "./currentRole.js"
 export { dndComponentPath } from "./dndComponentPath.js"
 export { devToolsEnabled } from "./devToolsEnabled.js"
+export { snippets } from "./snippets.js"
diff --git a/packages/client/src/stores/derived/snippets.js b/packages/client/src/stores/derived/snippets.js
new file mode 100644
index 0000000000..74b2797643
--- /dev/null
+++ b/packages/client/src/stores/derived/snippets.js
@@ -0,0 +1,10 @@
+import { appStore } from "../app.js"
+import { builderStore } from "../builder.js"
+import { derivedMemo } from "@budibase/frontend-core"
+
+export const snippets = derivedMemo(
+  [appStore, builderStore],
+  ([$appStore, $builderStore]) => {
+    return $builderStore?.snippets || $appStore?.application?.snippets || []
+  }
+)
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 0f142ab297..3756d8789a 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -1,23 +1,5 @@
 import { Helpers } from "@budibase/bbui"
-import { processString, processObjectSync } from "@budibase/string-templates"
-
-// Regex to test inputs with to see if they are likely candidates for template strings
-const looksLikeTemplate = /{{.*}}/
-
-/**
- * Enriches a given input with a row from the database.
- */
-export const enrichDataBinding = async (input, context) => {
-  // Only accept string inputs
-  if (!input || typeof input !== "string") {
-    return input
-  }
-  // Do a fast regex check if this looks like a template string
-  if (!looksLikeTemplate.test(input)) {
-    return input
-  }
-  return processString(input, context)
-}
+import { processObjectSync } from "@budibase/string-templates"
 
 /**
  * Recursively enriches all props in a props object and returns the new props.
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 097544439c..657f618759 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -317,7 +317,7 @@
   align="right"
   offset={0}
   popoverTarget={document.getElementById(`grid-${rand}`)}
-  customZindex={100}
+  customZindex={50}
 >
   {#if editIsOpen}
     <div
diff --git a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
index 57be2954ee..9a08666857 100644
--- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
@@ -38,7 +38,7 @@
   align={$visibleColumns.length ? "right" : "left"}
   offset={0}
   popoverTarget={document.getElementById(`add-column-button`)}
-  customZindex={100}
+  customZindex={50}
 >
   <div
     use:clickOutside={() => {
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js
index 3f00c00e47..98998b7f0e 100644
--- a/packages/frontend-core/src/utils/index.js
+++ b/packages/frontend-core/src/utils/index.js
@@ -3,6 +3,7 @@ export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
+export * as RowUtils from "./rows"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
diff --git a/packages/frontend-core/src/utils/rows.js b/packages/frontend-core/src/utils/rows.js
new file mode 100644
index 0000000000..ea43d63734
--- /dev/null
+++ b/packages/frontend-core/src/utils/rows.js
@@ -0,0 +1,48 @@
+/**
+ * Util to check is a given value is "better" than another. "Betterness" is
+ * defined as presence and length.
+ */
+const isBetterSample = (newValue, oldValue) => {
+  // Prefer non-null values
+  if (oldValue == null && newValue != null) {
+    return true
+  }
+
+  // Don't change type
+  const oldType = typeof oldValue
+  const newType = typeof newValue
+  if (oldType !== newType) {
+    return false
+  }
+
+  // Prefer longer values
+  if (newType === "string" && newValue.length > oldValue.length) {
+    return true
+  }
+  if (
+    newType === "object" &&
+    Object.keys(newValue).length > Object.keys(oldValue).length
+  ) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Generates a best-case example object of the provided samples.
+ * The generated sample does not necessarily exist - it simply is a sample that
+ * contains "good" examples for every property of all the samples.
+ * The generate sample will have a value for all keys across all samples.
+ */
+export const generateGoldenSample = samples => {
+  let goldenSample = {}
+  samples?.slice(0, 100).forEach(sample => {
+    Object.keys(sample).forEach(key => {
+      if (isBetterSample(sample[key], goldenSample[key])) {
+        goldenSample[key] = sample[key]
+      }
+    })
+  })
+  return goldenSample
+}
diff --git a/packages/server/package.json b/packages/server/package.json
index 97de17eb58..bac65c768e 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -13,9 +13,10 @@
     "build": "node ./scripts/build.js",
     "postbuild": "copyfiles -f ../client/dist/budibase-client.js ../client/manifest.json client && copyfiles -f ../../yarn.lock ./dist/",
     "check:types": "tsc -p tsconfig.json --noEmit --paths null",
+    "build:isolated-vm-lib:snippets": "esbuild --minify --bundle src/jsRunner/bundles/snippets.ts --outfile=src/jsRunner/bundles/snippets.ivm.bundle.js --platform=node --format=iife --global-name=snippets",
     "build:isolated-vm-lib:string-templates": "esbuild --minify --bundle src/jsRunner/bundles/index-helpers.ts --outfile=src/jsRunner/bundles/index-helpers.ivm.bundle.js --platform=node --format=iife --external:handlebars --global-name=helpers",
     "build:isolated-vm-lib:bson": "esbuild --minify --bundle src/jsRunner/bundles/bsonPackage.ts --outfile=src/jsRunner/bundles/bson.ivm.bundle.js --platform=node --format=iife --global-name=bson",
-    "build:isolated-vm-libs": "yarn build:isolated-vm-lib:string-templates && yarn build:isolated-vm-lib:bson",
+    "build:isolated-vm-libs": "yarn build:isolated-vm-lib:string-templates && yarn build:isolated-vm-lib:bson && yarn build:isolated-vm-lib:snippets",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "debug": "yarn build && node --expose-gc --inspect=9222 dist/index.js",
     "jest": "NODE_OPTIONS=\"--no-node-snapshot $NODE_OPTIONS\" jest",
diff --git a/packages/server/src/api/controllers/row/ExternalRequest.ts b/packages/server/src/api/controllers/row/ExternalRequest.ts
index 685af4e98e..814b57567f 100644
--- a/packages/server/src/api/controllers/row/ExternalRequest.ts
+++ b/packages/server/src/api/controllers/row/ExternalRequest.ts
@@ -437,11 +437,11 @@ export class ExternalRequest<T extends Operation> {
     return { row: newRow, manyRelationships }
   }
 
-  processRelationshipFields(
+  async processRelationshipFields(
     table: Table,
     row: Row,
     relationships: RelationshipsJson[]
-  ): Row {
+  ): Promise<Row> {
     for (let relationship of relationships) {
       const linkedTable = this.tables[relationship.tableName]
       if (!linkedTable || !row[relationship.column]) {
@@ -457,7 +457,7 @@ export class ExternalRequest<T extends Operation> {
         }
         // process additional types
         relatedRow = processDates(table, relatedRow)
-        relatedRow = processFormulas(linkedTable, relatedRow)
+        relatedRow = await processFormulas(linkedTable, relatedRow)
         row[relationship.column][key] = relatedRow
       }
     }
@@ -521,7 +521,7 @@ export class ExternalRequest<T extends Operation> {
     return rows
   }
 
-  outputProcessing(
+  async outputProcessing(
     rows: Row[] = [],
     table: Table,
     relationships: RelationshipsJson[]
@@ -561,9 +561,12 @@ export class ExternalRequest<T extends Operation> {
     }
 
     // make sure all related rows are correct
-    let finalRowArray = Object.values(finalRows).map(row =>
-      this.processRelationshipFields(table, row, relationships)
-    )
+    let finalRowArray = []
+    for (let row of Object.values(finalRows)) {
+      finalRowArray.push(
+        await this.processRelationshipFields(table, row, relationships)
+      )
+    }
 
     // process some additional types
     finalRowArray = processDates(table, finalRowArray)
@@ -934,7 +937,11 @@ export class ExternalRequest<T extends Operation> {
         processed.manyRelationships
       )
     }
-    const output = this.outputProcessing(responseRows, table, relationships)
+    const output = await this.outputProcessing(
+      responseRows,
+      table,
+      relationships
+    )
     // if reading it'll just be an array of rows, return whole thing
     if (operation === Operation.READ) {
       return (
diff --git a/packages/server/src/api/controllers/row/staticFormula.ts b/packages/server/src/api/controllers/row/staticFormula.ts
index 0ea8b3560e..a75a6cd2cc 100644
--- a/packages/server/src/api/controllers/row/staticFormula.ts
+++ b/packages/server/src/api/controllers/row/staticFormula.ts
@@ -110,7 +110,7 @@ export async function updateAllFormulasInTable(table: Table) {
       (enriched: Row) => enriched._id === row._id
     )
     if (enrichedRow) {
-      const processed = processFormulas(table, cloneDeep(row), {
+      const processed = await processFormulas(table, cloneDeep(row), {
         dynamic: false,
         contextRows: [enrichedRow],
       })
@@ -143,7 +143,7 @@ export async function finaliseRow(
     squash: false,
   })) as Row
   // use enriched row to generate formulas for saving, specifically only use as context
-  row = processFormulas(table, row, {
+  row = await processFormulas(table, row, {
     dynamic: false,
     contextRows: [enrichedRow],
   })
@@ -179,7 +179,7 @@ export async function finaliseRow(
   const response = await db.put(row)
   // for response, calculate the formulas for the enriched row
   enrichedRow._rev = response.rev
-  enrichedRow = processFormulas(table, enrichedRow, {
+  enrichedRow = await processFormulas(table, enrichedRow, {
     dynamic: false,
   })
   // this updates the related formulas in other rows based on the relations to this row
diff --git a/packages/server/src/api/controllers/script.ts b/packages/server/src/api/controllers/script.ts
index b69fc430a6..4317f5fcde 100644
--- a/packages/server/src/api/controllers/script.ts
+++ b/packages/server/src/api/controllers/script.ts
@@ -1,6 +1,6 @@
 import { Ctx } from "@budibase/types"
 import { IsolatedVM } from "../../jsRunner/vm"
-import { iifeWrapper } from "../../jsRunner/utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 
 export async function execute(ctx: Ctx) {
   const { script, context } = ctx.request.body
diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs
index 63c61baa9f..54b5b1a4e4 100644
--- a/packages/server/src/api/controllers/static/templates/preview.hbs
+++ b/packages/server/src/api/controllers/static/templates/preview.hbs
@@ -72,7 +72,8 @@
         navigation,
         hiddenComponentIds,
         usedPlugins,
-        location
+        location,
+        snippets
       } = parsed
 
       // Set some flags so the app knows we're in the builder
@@ -89,6 +90,7 @@
       window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
       window["##BUDIBASE_USED_PLUGINS##"] = usedPlugins
       window["##BUDIBASE_LOCATION##"] = location
+      window["##BUDIBASE_SNIPPETS##"] = snippets
 
       // Initialise app
       try {
diff --git a/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap b/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap
deleted file mode 100644
index 357285a69a..0000000000
--- a/packages/server/src/api/routes/tests/__snapshots__/view.spec.js.snap
+++ /dev/null
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`/views query returns data for the created view 1`] = `
-[
-  {
-    "avg": 2333.3333333333335,
-    "count": 3,
-    "group": null,
-    "max": 4000,
-    "min": 1000,
-    "sum": 7000,
-    "sumsqr": 21000000,
-  },
-]
-`;
-
-exports[`/views query returns data for the created view using a group by 1`] = `
-[
-  {
-    "avg": 1500,
-    "count": 2,
-    "group": "One",
-    "max": 2000,
-    "min": 1000,
-    "sum": 3000,
-    "sumsqr": 5000000,
-  },
-  {
-    "avg": 4000,
-    "count": 1,
-    "group": "Two",
-    "max": 4000,
-    "min": 4000,
-    "sum": 4000,
-    "sumsqr": 16000000,
-  },
-]
-`;
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index d50dd8a3d9..371045687b 100644
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@@ -7,6 +7,7 @@ import { context, InternalTable, roles, tenancy } from "@budibase/backend-core"
 import { quotas } from "@budibase/pro"
 import {
   AutoFieldSubType,
+  Datasource,
   DeleteRow,
   FieldSchema,
   FieldType,
@@ -24,15 +25,15 @@ import {
   StaticQuotaName,
   Table,
   TableSourceType,
+  ViewV2,
 } from "@budibase/types"
 import {
   expectAnyExternalColsAttributes,
   expectAnyInternalColsAttributes,
   generator,
   mocks,
-  structures,
 } from "@budibase/backend-core/tests"
-import _ from "lodash"
+import _, { merge } from "lodash"
 import * as uuid from "uuid"
 
 const timestamp = new Date("2023-01-26T11:48:57.597Z").toISOString()
@@ -42,8 +43,6 @@ jest.unmock("mysql2")
 jest.unmock("mysql2/promise")
 jest.unmock("mssql")
 
-const { basicRow } = setup.structures
-
 describe.each([
   ["internal", undefined],
   ["postgres", databaseTestProviders.postgres],
@@ -51,12 +50,20 @@ describe.each([
   ["mssql", databaseTestProviders.mssql],
   ["mariadb", databaseTestProviders.mariadb],
 ])("/rows (%s)", (__, dsProvider) => {
-  const isInternal = !dsProvider
-
-  const request = setup.getRequest()
+  const isInternal = dsProvider === undefined
   const config = setup.getConfig()
+
   let table: Table
-  let tableId: string
+  let datasource: Datasource | undefined
+
+  beforeAll(async () => {
+    await config.init()
+    if (dsProvider) {
+      datasource = await config.createDatasource({
+        datasource: await dsProvider.datasource(),
+      })
+    }
+  })
 
   afterAll(async () => {
     if (dsProvider) {
@@ -65,24 +72,17 @@ describe.each([
     setup.afterAll()
   })
 
-  beforeAll(async () => {
-    await config.init()
-
-    if (dsProvider) {
-      await config.createDatasource({
-        datasource: await dsProvider.datasource(),
-      })
-    }
-  })
-
-  const generateTableConfig: () => SaveTableRequest = () => {
-    return {
+  function saveTableRequest(
+    ...overrides: Partial<SaveTableRequest>[]
+  ): SaveTableRequest {
+    const req: SaveTableRequest = {
       name: uuid.v4().substring(0, 16),
       type: "table",
+      sourceType: datasource
+        ? TableSourceType.EXTERNAL
+        : TableSourceType.INTERNAL,
+      sourceId: datasource ? datasource._id! : INTERNAL_TABLE_SOURCE_ID,
       primary: ["id"],
-      primaryDisplay: "name",
-      sourceType: TableSourceType.INTERNAL,
-      sourceId: INTERNAL_TABLE_SOURCE_ID,
       schema: {
         id: {
           type: FieldType.AUTO,
@@ -92,22 +92,36 @@ describe.each([
             presence: true,
           },
         },
-        name: {
-          type: FieldType.STRING,
-          name: "name",
-          constraints: {
-            type: "string",
+      },
+    }
+    return merge(req, ...overrides)
+  }
+
+  function defaultTable(
+    ...overrides: Partial<SaveTableRequest>[]
+  ): SaveTableRequest {
+    return saveTableRequest(
+      {
+        primaryDisplay: "name",
+        schema: {
+          name: {
+            type: FieldType.STRING,
+            name: "name",
+            constraints: {
+              type: "string",
+            },
           },
-        },
-        description: {
-          type: FieldType.STRING,
-          name: "description",
-          constraints: {
-            type: "string",
+          description: {
+            type: FieldType.STRING,
+            name: "description",
+            constraints: {
+              type: "string",
+            },
           },
         },
       },
-    }
+      ...overrides
+    )
   }
 
   beforeEach(async () => {
@@ -134,53 +148,28 @@ describe.each([
       }
     : undefined
 
-  async function createTable(
-    cfg: Omit<SaveTableRequest, "sourceId" | "sourceType">,
-    opts?: { skipReassigning: boolean }
-  ) {
-    let table
-    if (dsProvider) {
-      table = await config.createExternalTable(cfg, opts)
-    } else {
-      table = await config.createTable(cfg, opts)
-    }
-    return table
-  }
-
   beforeAll(async () => {
-    const tableConfig = generateTableConfig()
-    let table = await createTable(tableConfig)
-    tableId = table._id!
+    table = await config.api.table.save(defaultTable())
   })
 
   describe("save, load, update", () => {
     it("returns a success message when the row is created", async () => {
       const rowUsage = await getRowUsage()
-
-      const res = await request
-        .post(`/api/${tableId}/rows`)
-        .send(basicRow(tableId))
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect((res as any).res.statusMessage).toEqual(
-        `${config.table!.name} saved successfully`
-      )
-      expect(res.body.name).toEqual("Test Contact")
-      expect(res.body._rev).toBeDefined()
+      const row = await config.api.row.save(table._id!, {
+        name: "Test Contact",
+      })
+      expect(row.name).toEqual("Test Contact")
+      expect(row._rev).toBeDefined()
       await assertRowUsage(rowUsage + 1)
     })
 
     it("Increment row autoId per create row request", async () => {
       const rowUsage = await getRowUsage()
 
-      const tableConfig = generateTableConfig()
-      const newTable = await createTable(
-        {
-          ...tableConfig,
+      const newTable = await config.api.table.save(
+        saveTableRequest({
           name: "TestTableAuto",
           schema: {
-            ...tableConfig.schema,
             "Row ID": {
               name: "Row ID",
               type: FieldType.NUMBER,
@@ -197,37 +186,25 @@ describe.each([
               },
             },
           },
-        },
-        { skipReassigning: true }
+        })
       )
 
-      const ids = [1, 2, 3]
-
-      // Performing several create row requests should increment the autoID fields accordingly
-      const createRow = async (id: number) => {
-        const res = await config.api.row.save(newTable._id!, {
-          name: "row_" + id,
-        })
-        expect(res.name).toEqual("row_" + id)
-        expect(res._rev).toBeDefined()
-        expect(res["Row ID"]).toEqual(id)
+      let previousId = 0
+      for (let i = 0; i < 10; i++) {
+        const row = await config.api.row.save(newTable._id!, {})
+        expect(row["Row ID"]).toBeGreaterThan(previousId)
+        previousId = row["Row ID"]
       }
-
-      for (let i = 0; i < ids.length; i++) {
-        await createRow(ids[i])
-      }
-
-      await assertRowUsage(rowUsage + ids.length)
+      await assertRowUsage(rowUsage + 10)
     })
 
     it("updates a row successfully", async () => {
-      const existing = await config.createRow()
+      const existing = await config.api.row.save(table._id!, {})
       const rowUsage = await getRowUsage()
 
-      const res = await config.api.row.save(tableId, {
+      const res = await config.api.row.save(table._id!, {
         _id: existing._id,
         _rev: existing._rev,
-        tableId,
         name: "Updated Name",
       })
 
@@ -236,9 +213,9 @@ describe.each([
     })
 
     it("should load a row", async () => {
-      const existing = await config.createRow()
+      const existing = await config.api.row.save(table._id!, {})
 
-      const res = await config.api.row.get(tableId, existing._id!)
+      const res = await config.api.row.get(table._id!, existing._id!)
 
       expect(res).toEqual({
         ...existing,
@@ -247,29 +224,22 @@ describe.each([
     })
 
     it("should list all rows for given tableId", async () => {
-      const table = await createTable(generateTableConfig(), {
-        skipReassigning: true,
-      })
-      const tableId = table._id!
-      const newRow = {
-        tableId,
-        name: "Second Contact",
-        description: "new",
-      }
-      const firstRow = await config.createRow({ tableId })
-      await config.createRow(newRow)
+      const table = await config.api.table.save(defaultTable())
+      const rows = await Promise.all([
+        config.api.row.save(table._id!, {}),
+        config.api.row.save(table._id!, {}),
+      ])
 
-      const res = await config.api.row.fetch(tableId)
-
-      expect(res.length).toBe(2)
-      expect(res.find((r: Row) => r.name === newRow.name)).toBeDefined()
-      expect(res.find((r: Row) => r.name === firstRow.name)).toBeDefined()
+      const res = await config.api.row.fetch(table._id!)
+      expect(res.map(r => r._id)).toEqual(
+        expect.arrayContaining(rows.map(r => r._id))
+      )
     })
 
     it("load should return 404 when row does not exist", async () => {
-      await config.createRow()
-
-      await config.api.row.get(tableId, "1234567", {
+      const table = await config.api.table.save(defaultTable())
+      await config.api.row.save(table._id!, {})
+      await config.api.row.get(table._id!, "1234567", {
         status: 404,
       })
     })
@@ -324,45 +294,49 @@ describe.each([
             inclusion: ["Alpha", "Beta", "Gamma"],
           },
         }
-        const table = await createTable({
-          name: "TestTable2",
-          type: "table",
-          schema: {
-            name: str,
-            stringUndefined: str,
-            stringNull: str,
-            stringString: str,
-            numberEmptyString: number,
-            numberNull: number,
-            numberUndefined: number,
-            numberString: number,
-            numberNumber: number,
-            datetimeEmptyString: datetime,
-            datetimeNull: datetime,
-            datetimeUndefined: datetime,
-            datetimeString: datetime,
-            datetimeDate: datetime,
-            boolNull: bool,
-            boolEmpty: bool,
-            boolUndefined: bool,
-            boolString: bool,
-            boolBool: bool,
-            attachmentNull: attachment,
-            attachmentUndefined: attachment,
-            attachmentEmpty: attachment,
-            attachmentEmptyArrayStr: attachment,
-            arrayFieldEmptyArrayStr: arrayField,
-            arrayFieldArrayStrKnown: arrayField,
-            arrayFieldNull: arrayField,
-            arrayFieldUndefined: arrayField,
-            optsFieldEmptyStr: optsField,
-            optsFieldUndefined: optsField,
-            optsFieldNull: optsField,
-            optsFieldStrKnown: optsField,
-          },
-        })
+        const table = await config.api.table.save(
+          saveTableRequest({
+            name: "TestTable2",
+            type: "table",
+            schema: {
+              name: str,
+              stringUndefined: str,
+              stringNull: str,
+              stringString: str,
+              numberEmptyString: number,
+              numberNull: number,
+              numberUndefined: number,
+              numberString: number,
+              numberNumber: number,
+              datetimeEmptyString: datetime,
+              datetimeNull: datetime,
+              datetimeUndefined: datetime,
+              datetimeString: datetime,
+              datetimeDate: datetime,
+              boolNull: bool,
+              boolEmpty: bool,
+              boolUndefined: bool,
+              boolString: bool,
+              boolBool: bool,
+              attachmentNull: attachment,
+              attachmentUndefined: attachment,
+              attachmentEmpty: attachment,
+              attachmentEmptyArrayStr: attachment,
+              arrayFieldEmptyArrayStr: arrayField,
+              arrayFieldArrayStrKnown: arrayField,
+              arrayFieldNull: arrayField,
+              arrayFieldUndefined: arrayField,
+              optsFieldEmptyStr: optsField,
+              optsFieldUndefined: optsField,
+              optsFieldNull: optsField,
+              optsFieldStrKnown: optsField,
+            },
+          })
+        )
 
-        const row = {
+        const datetimeStr = "1984-04-20T00:00:00.000Z"
+
+        const row = await config.api.row.save(table._id!, {
           name: "Test Row",
           stringUndefined: undefined,
           stringNull: null,
@@ -375,8 +349,8 @@ describe.each([
           datetimeEmptyString: "",
           datetimeNull: null,
           datetimeUndefined: undefined,
-          datetimeString: "1984-04-20T00:00:00.000Z",
-          datetimeDate: new Date("1984-04-20"),
+          datetimeString: datetimeStr,
+          datetimeDate: new Date(datetimeStr),
           boolNull: null,
           boolEmpty: "",
           boolUndefined: undefined,
@@ -395,79 +369,66 @@ describe.each([
           optsFieldUndefined: undefined,
           optsFieldNull: null,
           optsFieldStrKnown: "Alpha",
-        }
+        })
 
-        const createdRow = await config.createRow(row)
-        const id = createdRow._id!
-
-        const saved = await config.api.row.get(table._id!, id)
-
-        expect(saved.stringUndefined).toBe(undefined)
-        expect(saved.stringNull).toBe(null)
-        expect(saved.stringString).toBe("i am a string")
-        expect(saved.numberEmptyString).toBe(null)
-        expect(saved.numberNull).toBe(null)
-        expect(saved.numberUndefined).toBe(undefined)
-        expect(saved.numberString).toBe(123)
-        expect(saved.numberNumber).toBe(123)
-        expect(saved.datetimeEmptyString).toBe(null)
-        expect(saved.datetimeNull).toBe(null)
-        expect(saved.datetimeUndefined).toBe(undefined)
-        expect(saved.datetimeString).toBe(
-          new Date(row.datetimeString).toISOString()
-        )
-        expect(saved.datetimeDate).toBe(row.datetimeDate.toISOString())
-        expect(saved.boolNull).toBe(null)
-        expect(saved.boolEmpty).toBe(null)
-        expect(saved.boolUndefined).toBe(undefined)
-        expect(saved.boolString).toBe(true)
-        expect(saved.boolBool).toBe(true)
-        expect(saved.attachmentNull).toEqual([])
-        expect(saved.attachmentUndefined).toBe(undefined)
-        expect(saved.attachmentEmpty).toEqual([])
-        expect(saved.attachmentEmptyArrayStr).toEqual([])
-        expect(saved.arrayFieldEmptyArrayStr).toEqual([])
-        expect(saved.arrayFieldNull).toEqual([])
-        expect(saved.arrayFieldUndefined).toEqual(undefined)
-        expect(saved.optsFieldEmptyStr).toEqual(null)
-        expect(saved.optsFieldUndefined).toEqual(undefined)
-        expect(saved.optsFieldNull).toEqual(null)
-        expect(saved.arrayFieldArrayStrKnown).toEqual(["One"])
-        expect(saved.optsFieldStrKnown).toEqual("Alpha")
+        expect(row.stringUndefined).toBe(undefined)
+        expect(row.stringNull).toBe(null)
+        expect(row.stringString).toBe("i am a string")
+        expect(row.numberEmptyString).toBe(null)
+        expect(row.numberNull).toBe(null)
+        expect(row.numberUndefined).toBe(undefined)
+        expect(row.numberString).toBe(123)
+        expect(row.numberNumber).toBe(123)
+        expect(row.datetimeEmptyString).toBe(null)
+        expect(row.datetimeNull).toBe(null)
+        expect(row.datetimeUndefined).toBe(undefined)
+        expect(row.datetimeString).toBe(new Date(datetimeStr).toISOString())
+        expect(row.datetimeDate).toBe(new Date(datetimeStr).toISOString())
+        expect(row.boolNull).toBe(null)
+        expect(row.boolEmpty).toBe(null)
+        expect(row.boolUndefined).toBe(undefined)
+        expect(row.boolString).toBe(true)
+        expect(row.boolBool).toBe(true)
+        expect(row.attachmentNull).toEqual([])
+        expect(row.attachmentUndefined).toBe(undefined)
+        expect(row.attachmentEmpty).toEqual([])
+        expect(row.attachmentEmptyArrayStr).toEqual([])
+        expect(row.arrayFieldEmptyArrayStr).toEqual([])
+        expect(row.arrayFieldNull).toEqual([])
+        expect(row.arrayFieldUndefined).toEqual(undefined)
+        expect(row.optsFieldEmptyStr).toEqual(null)
+        expect(row.optsFieldUndefined).toEqual(undefined)
+        expect(row.optsFieldNull).toEqual(null)
+        expect(row.arrayFieldArrayStrKnown).toEqual(["One"])
+        expect(row.optsFieldStrKnown).toEqual("Alpha")
       })
   })
 
   describe("view save", () => {
     it("views have extra data trimmed", async () => {
-      const table = await createTable({
-        type: "table",
-        name: "orders",
-        primary: ["OrderID"],
-        schema: {
-          Country: {
-            type: FieldType.STRING,
-            name: "Country",
+      const table = await config.api.table.save(
+        saveTableRequest({
+          name: "orders",
+          schema: {
+            Country: {
+              type: FieldType.STRING,
+              name: "Country",
+            },
+            Story: {
+              type: FieldType.STRING,
+              name: "Story",
+            },
           },
-          OrderID: {
-            type: FieldType.NUMBER,
-            name: "OrderID",
-          },
-          Story: {
-            type: FieldType.STRING,
-            name: "Story",
-          },
-        },
-      })
+        })
+      )
 
-      const createViewResponse = await config.createView({
+      const createViewResponse = await config.api.viewV2.create({
+        tableId: table._id!,
         name: uuid.v4(),
         schema: {
           Country: {
             visible: true,
           },
-          OrderID: {
-            visible: true,
-          },
         },
       })
 
@@ -483,8 +444,8 @@ describe.each([
       expect(row.Story).toBeUndefined()
       expect(row).toEqual({
         ...defaultRowFields,
-        OrderID: createRowResponse.OrderID,
         Country: "Aussy",
+        id: createRowResponse.id,
         _id: createRowResponse._id,
         _rev: createRowResponse._rev,
         tableId: table._id,
@@ -496,25 +457,25 @@ describe.each([
     let otherTable: Table
 
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-      table = await createTable(tableConfig)
-      const otherTableConfig = generateTableConfig()
-      // need a short name of table here - for relationship tests
-      otherTableConfig.name = "a"
-      otherTableConfig.schema.relationship = {
-        name: "relationship",
-        relationshipType: RelationshipType.ONE_TO_MANY,
-        type: FieldType.LINK,
-        tableId: table._id!,
-        fieldName: "relationship",
-      }
-      otherTable = await createTable(otherTableConfig)
-      // need to set the config back to the original table
-      config.table = table
+      table = await config.api.table.save(defaultTable())
+      otherTable = await config.api.table.save(
+        defaultTable({
+          name: "a",
+          schema: {
+            relationship: {
+              name: "relationship",
+              relationshipType: RelationshipType.ONE_TO_MANY,
+              type: FieldType.LINK,
+              tableId: table._id!,
+              fieldName: "relationship",
+            },
+          },
+        })
+      )
     })
 
     it("should update only the fields that are supplied", async () => {
-      const existing = await config.createRow()
+      const existing = await config.api.row.save(table._id!, {})
 
       const rowUsage = await getRowUsage()
 
@@ -536,7 +497,7 @@ describe.each([
     })
 
     it("should throw an error when given improper types", async () => {
-      const existing = await config.createRow()
+      const existing = await config.api.row.save(table._id!, {})
       const rowUsage = await getRowUsage()
 
       await config.api.row.patch(
@@ -628,12 +589,11 @@ describe.each([
 
   describe("destroy", () => {
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-      table = await createTable(tableConfig)
+      table = await config.api.table.save(defaultTable())
     })
 
     it("should be able to delete a row", async () => {
-      const createdRow = await config.createRow()
+      const createdRow = await config.api.row.save(table._id!, {})
       const rowUsage = await getRowUsage()
 
       const res = await config.api.row.bulkDelete(table._id!, {
@@ -644,7 +604,7 @@ describe.each([
     })
 
     it("should be able to bulk delete rows, including a row that doesn't exist", async () => {
-      const createdRow = await config.createRow()
+      const createdRow = await config.api.row.save(table._id!, {})
 
       const res = await config.api.row.bulkDelete(table._id!, {
         rows: [createdRow, { _id: "9999999" }],
@@ -657,8 +617,7 @@ describe.each([
 
   describe("validate", () => {
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-      table = await createTable(tableConfig)
+      table = await config.api.table.save(defaultTable())
     })
 
     it("should return no errors on valid row", async () => {
@@ -690,13 +649,12 @@ describe.each([
 
   describe("bulkDelete", () => {
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-      table = await createTable(tableConfig)
+      table = await config.api.table.save(defaultTable())
     })
 
     it("should be able to delete a bulk set of rows", async () => {
-      const row1 = await config.createRow()
-      const row2 = await config.createRow()
+      const row1 = await config.api.row.save(table._id!, {})
+      const row2 = await config.api.row.save(table._id!, {})
       const rowUsage = await getRowUsage()
 
       const res = await config.api.row.bulkDelete(table._id!, {
@@ -710,9 +668,9 @@ describe.each([
 
     it("should be able to delete a variety of row set types", async () => {
       const [row1, row2, row3] = await Promise.all([
-        config.createRow(),
-        config.createRow(),
-        config.createRow(),
+        config.api.row.save(table._id!, {}),
+        config.api.row.save(table._id!, {}),
+        config.api.row.save(table._id!, {}),
       ])
       const rowUsage = await getRowUsage()
 
@@ -726,7 +684,7 @@ describe.each([
     })
 
     it("should accept a valid row object and delete the row", async () => {
-      const row1 = await config.createRow()
+      const row1 = await config.api.row.save(table._id!, {})
       const rowUsage = await getRowUsage()
 
       const res = await config.api.row.delete(table._id!, row1 as DeleteRow)
@@ -768,12 +726,11 @@ describe.each([
   isInternal &&
     describe("fetchView", () => {
       beforeEach(async () => {
-        const tableConfig = generateTableConfig()
-        table = await createTable(tableConfig)
+        table = await config.api.table.save(defaultTable())
       })
 
       it("should be able to fetch tables contents via 'view'", async () => {
-        const row = await config.createRow()
+        const row = await config.api.row.save(table._id!, {})
         const rowUsage = await getRowUsage()
 
         const rows = await config.api.legacyView.get(table._id!)
@@ -785,7 +742,7 @@ describe.each([
       it("should throw an error if view doesn't exist", async () => {
         const rowUsage = await getRowUsage()
 
-        await config.api.legacyView.get("derp", { status: 404 })
+        await config.api.legacyView.get("derp", undefined, { status: 404 })
 
         await assertRowUsage(rowUsage)
       })
@@ -797,7 +754,7 @@ describe.each([
           filters: [],
           schema: {},
         })
-        const row = await config.createRow()
+        const row = await config.api.row.save(table._id!, {})
         const rowUsage = await getRowUsage()
 
         const rows = await config.api.legacyView.get(view.name)
@@ -810,45 +767,34 @@ describe.each([
 
   describe("fetchEnrichedRows", () => {
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-      table = await createTable(tableConfig)
+      table = await config.api.table.save(defaultTable())
     })
 
     it("should allow enriching some linked rows", async () => {
       const { linkedTable, firstRow, secondRow } = await tenancy.doInTenant(
         config.getTenantId(),
         async () => {
-          const linkedTable = await config.createLinkedTable(
-            RelationshipType.ONE_TO_MANY,
-            ["link"],
-            {
-              // Making sure that the combined table name + column name is within postgres limits
-              name: uuid.v4().replace(/-/g, "").substring(0, 16),
-              type: "table",
-              primary: ["id"],
-              primaryDisplay: "id",
+          const linkedTable = await config.api.table.save(
+            defaultTable({
               schema: {
-                id: {
-                  type: FieldType.AUTO,
-                  name: "id",
-                  autocolumn: true,
-                  constraints: {
-                    presence: true,
-                  },
+                link: {
+                  name: "link",
+                  fieldName: "link",
+                  type: FieldType.LINK,
+                  relationshipType: RelationshipType.ONE_TO_MANY,
+                  tableId: table._id!,
                 },
               },
-            }
+            })
           )
-          const firstRow = await config.createRow({
+          const firstRow = await config.api.row.save(table._id!, {
             name: "Test Contact",
             description: "original description",
-            tableId: table._id,
           })
-          const secondRow = await config.createRow({
+          const secondRow = await config.api.row.save(linkedTable._id!, {
             name: "Test 2",
             description: "og desc",
             link: [{ _id: firstRow._id }],
-            tableId: linkedTable._id,
           })
           return { linkedTable, firstRow, secondRow }
         }
@@ -882,14 +828,23 @@ describe.each([
   isInternal &&
     describe("attachments", () => {
       beforeAll(async () => {
-        const tableConfig = generateTableConfig()
-        table = await createTable(tableConfig)
+        table = await config.api.table.save(defaultTable())
       })
 
       it("should allow enriching attachment rows", async () => {
-        const table = await config.createAttachmentTable()
-        const attachmentId = `${structures.uuid()}.csv`
-        const row = await config.createRow({
+        const table = await config.api.table.save(
+          defaultTable({
+            schema: {
+              attachment: {
+                type: FieldType.ATTACHMENT,
+                name: "attachment",
+                constraints: { type: "array", presence: false },
+              },
+            },
+          })
+        )
+        const attachmentId = `${uuid.v4()}.csv`
+        const row = await config.api.row.save(table._id!, {
           name: "test",
           description: "test",
           attachment: [
@@ -912,12 +867,11 @@ describe.each([
 
   describe("exportData", () => {
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-      table = await createTable(tableConfig)
+      table = await config.api.table.save(defaultTable())
     })
 
     it("should allow exporting all columns", async () => {
-      const existing = await config.createRow()
+      const existing = await config.api.row.save(table._id!, {})
       const res = await config.api.row.exportRows(table._id!, {
         rows: [existing._id!],
       })
@@ -935,7 +889,7 @@ describe.each([
     })
 
     it("should allow exporting only certain columns", async () => {
-      const existing = await config.createRow()
+      const existing = await config.api.row.save(table._id!, {})
       const res = await config.api.row.exportRows(table._id!, {
         rows: [existing._id!],
         columns: ["_id"],
@@ -952,21 +906,10 @@ describe.each([
 
   describe("view 2.0", () => {
     async function userTable(): Promise<Table> {
-      return {
+      return saveTableRequest({
         name: `users_${uuid.v4()}`,
-        sourceId: INTERNAL_TABLE_SOURCE_ID,
-        sourceType: TableSourceType.INTERNAL,
         type: "table",
-        primary: ["id"],
         schema: {
-          id: {
-            type: FieldType.AUTO,
-            name: "id",
-            autocolumn: true,
-            constraints: {
-              presence: true,
-            },
-          },
           name: {
             type: FieldType.STRING,
             name: "name",
@@ -988,7 +931,7 @@ describe.each([
             name: "jobTitle",
           },
         },
-      }
+      })
     }
 
     const randomRowData = () => ({
@@ -1001,8 +944,9 @@ describe.each([
 
     describe("create", () => {
       it("should persist a new row with only the provided view fields", async () => {
-        const table = await createTable(await userTable())
-        const view = await config.createView({
+        const table = await config.api.table.save(await userTable())
+        const view = await config.api.viewV2.create({
+          tableId: table._id!,
           schema: {
             name: { visible: true },
             surname: { visible: true },
@@ -1036,9 +980,10 @@ describe.each([
 
     describe("patch", () => {
       it("should update only the view fields for a row", async () => {
-        const table = await createTable(await userTable())
+        const table = await config.api.table.save(await userTable())
         const tableId = table._id!
-        const view = await config.createView({
+        const view = await config.api.viewV2.create({
+          tableId: tableId,
           schema: {
             name: { visible: true },
             address: { visible: true },
@@ -1077,16 +1022,17 @@ describe.each([
 
     describe("destroy", () => {
       it("should be able to delete a row", async () => {
-        const table = await createTable(await userTable())
+        const table = await config.api.table.save(await userTable())
         const tableId = table._id!
-        const view = await config.createView({
+        const view = await config.api.viewV2.create({
+          tableId: tableId,
           schema: {
             name: { visible: true },
             address: { visible: true },
           },
         })
 
-        const createdRow = await config.createRow()
+        const createdRow = await config.api.row.save(table._id!, {})
         const rowUsage = await getRowUsage()
 
         await config.api.row.bulkDelete(view.id, { rows: [createdRow] })
@@ -1099,9 +1045,10 @@ describe.each([
       })
 
       it("should be able to delete multiple rows", async () => {
-        const table = await createTable(await userTable())
+        const table = await config.api.table.save(await userTable())
         const tableId = table._id!
-        const view = await config.createView({
+        const view = await config.api.viewV2.create({
+          tableId: tableId,
           schema: {
             name: { visible: true },
             address: { visible: true },
@@ -1109,9 +1056,9 @@ describe.each([
         })
 
         const rows = await Promise.all([
-          config.createRow(),
-          config.createRow(),
-          config.createRow(),
+          config.api.row.save(table._id!, {}),
+          config.api.row.save(table._id!, {}),
+          config.api.row.save(table._id!, {}),
         ])
         const rowUsage = await getRowUsage()
 
@@ -1130,46 +1077,39 @@ describe.each([
     })
 
     describe("view search", () => {
+      let table: Table
       const viewSchema = { age: { visible: true }, name: { visible: true } }
-      async function userTable(): Promise<Table> {
-        return {
-          name: `users_${uuid.v4()}`,
-          sourceId: INTERNAL_TABLE_SOURCE_ID,
-          sourceType: TableSourceType.INTERNAL,
-          type: "table",
-          primary: ["id"],
-          schema: {
-            id: {
-              type: FieldType.AUTO,
-              name: "id",
-              autocolumn: true,
-              constraints: {
-                presence: true,
+
+      beforeAll(async () => {
+        table = await config.api.table.save(
+          saveTableRequest({
+            name: `users_${uuid.v4()}`,
+            schema: {
+              name: {
+                type: FieldType.STRING,
+                name: "name",
+                constraints: { type: "string" },
+              },
+              age: {
+                type: FieldType.NUMBER,
+                name: "age",
+                constraints: {},
               },
             },
-            name: {
-              type: FieldType.STRING,
-              name: "name",
-              constraints: { type: "string" },
-            },
-            age: {
-              type: FieldType.NUMBER,
-              name: "age",
-              constraints: {},
-            },
-          },
-        }
-      }
+          })
+        )
+      })
 
       it("returns empty rows from view when no schema is passed", async () => {
-        const table = await createTable(await userTable())
         const rows = await Promise.all(
           Array.from({ length: 10 }, () =>
             config.api.row.save(table._id!, { tableId: table._id })
           )
         )
 
-        const createViewResponse = await config.createView()
+        const createViewResponse = await config.api.viewV2.create({
+          tableId: table._id!,
+        })
         const response = await config.api.viewV2.search(createViewResponse.id)
 
         expect(response.rows).toHaveLength(10)
@@ -1193,8 +1133,6 @@ describe.each([
       })
 
       it("searching respects the view filters", async () => {
-        const table = await createTable(await userTable())
-
         await Promise.all(
           Array.from({ length: 10 }, () =>
             config.api.row.save(table._id!, {
@@ -1215,7 +1153,8 @@ describe.each([
           )
         )
 
-        const createViewResponse = await config.createView({
+        const createViewResponse = await config.api.viewV2.create({
+          tableId: table._id!,
           query: [
             { operator: SearchQueryOperators.EQUAL, field: "age", value: 40 },
           ],
@@ -1316,8 +1255,9 @@ describe.each([
       ]
 
       describe("sorting", () => {
+        let table: Table
         beforeAll(async () => {
-          const table = await createTable(await userTable())
+          table = await config.api.table.save(await userTable())
           const users = [
             { name: "Alice", age: 25 },
             { name: "Bob", age: 30 },
@@ -1337,7 +1277,8 @@ describe.each([
         it.each(sortTestOptions)(
           "allow sorting (%s)",
           async (sortParams, expected) => {
-            const createViewResponse = await config.createView({
+            const createViewResponse = await config.api.viewV2.create({
+              tableId: table._id!,
               sort: sortParams,
               schema: viewSchema,
             })
@@ -1356,7 +1297,8 @@ describe.each([
         it.each(sortTestOptions)(
           "allow override the default view sorting (%s)",
           async (sortParams, expected) => {
-            const createViewResponse = await config.createView({
+            const createViewResponse = await config.api.viewV2.create({
+              tableId: table._id!,
               sort: {
                 field: "name",
                 order: SortOrder.ASCENDING,
@@ -1384,7 +1326,7 @@ describe.each([
       })
 
       it("when schema is defined, defined columns and row attributes are returned", async () => {
-        const table = await createTable(await userTable())
+        const table = await config.api.table.save(await userTable())
         const rows = await Promise.all(
           Array.from({ length: 10 }, () =>
             config.api.row.save(table._id!, {
@@ -1395,7 +1337,8 @@ describe.each([
           )
         )
 
-        const view = await config.createView({
+        const view = await config.api.viewV2.create({
+          tableId: table._id!,
           schema: { name: { visible: true } },
         })
         const response = await config.api.viewV2.search(view.id)
@@ -1415,21 +1358,25 @@ describe.each([
       })
 
       it("views without data can be returned", async () => {
-        const table = await createTable(await userTable())
-
-        const createViewResponse = await config.createView()
+        const table = await config.api.table.save(await userTable())
+        const createViewResponse = await config.api.viewV2.create({
+          tableId: table._id!,
+        })
         const response = await config.api.viewV2.search(createViewResponse.id)
-
         expect(response.rows).toHaveLength(0)
       })
 
       it("respects the limit parameter", async () => {
-        await createTable(await userTable())
-        await Promise.all(Array.from({ length: 10 }, () => config.createRow()))
+        const table = await config.api.table.save(await userTable())
+        await Promise.all(
+          Array.from({ length: 10 }, () => config.api.row.save(table._id!, {}))
+        )
 
         const limit = generator.integer({ min: 1, max: 8 })
 
-        const createViewResponse = await config.createView()
+        const createViewResponse = await config.api.viewV2.create({
+          tableId: table._id!,
+        })
         const response = await config.api.viewV2.search(createViewResponse.id, {
           limit,
           query: {},
@@ -1439,56 +1386,49 @@ describe.each([
       })
 
       it("can handle pagination", async () => {
-        await createTable(await userTable())
-        await Promise.all(Array.from({ length: 10 }, () => config.createRow()))
-
-        const createViewResponse = await config.createView()
-        const allRows = (await config.api.viewV2.search(createViewResponse.id))
-          .rows
-
-        const firstPageResponse = await config.api.viewV2.search(
-          createViewResponse.id,
-          {
-            paginate: true,
-            limit: 4,
-            query: {},
-          }
+        const table = await config.api.table.save(await userTable())
+        await Promise.all(
+          Array.from({ length: 10 }, () => config.api.row.save(table._id!, {}))
         )
-        expect(firstPageResponse).toEqual({
-          rows: expect.arrayContaining(allRows.slice(0, 4)),
+        const view = await config.api.viewV2.create({
+          tableId: table._id!,
+        })
+        const rows = (await config.api.viewV2.search(view.id)).rows
+
+        const page1 = await config.api.viewV2.search(view.id, {
+          paginate: true,
+          limit: 4,
+          query: {},
+        })
+        expect(page1).toEqual({
+          rows: expect.arrayContaining(rows.slice(0, 4)),
           totalRows: isInternal ? 10 : undefined,
           hasNextPage: true,
           bookmark: expect.anything(),
         })
 
-        const secondPageResponse = await config.api.viewV2.search(
-          createViewResponse.id,
-          {
-            paginate: true,
-            limit: 4,
-            bookmark: firstPageResponse.bookmark,
+        const page2 = await config.api.viewV2.search(view.id, {
+          paginate: true,
+          limit: 4,
+          bookmark: page1.bookmark,
 
-            query: {},
-          }
-        )
-        expect(secondPageResponse).toEqual({
-          rows: expect.arrayContaining(allRows.slice(4, 8)),
+          query: {},
+        })
+        expect(page2).toEqual({
+          rows: expect.arrayContaining(rows.slice(4, 8)),
           totalRows: isInternal ? 10 : undefined,
           hasNextPage: true,
           bookmark: expect.anything(),
         })
 
-        const lastPageResponse = await config.api.viewV2.search(
-          createViewResponse.id,
-          {
-            paginate: true,
-            limit: 4,
-            bookmark: secondPageResponse.bookmark,
-            query: {},
-          }
-        )
-        expect(lastPageResponse).toEqual({
-          rows: expect.arrayContaining(allRows.slice(8)),
+        const page3 = await config.api.viewV2.search(view.id, {
+          paginate: true,
+          limit: 4,
+          bookmark: page2.bookmark,
+          query: {},
+        })
+        expect(page3).toEqual({
+          rows: expect.arrayContaining(rows.slice(8)),
           totalRows: isInternal ? 10 : undefined,
           hasNextPage: false,
           bookmark: expect.anything(),
@@ -1513,19 +1453,20 @@ describe.each([
         })
 
       describe("permissions", () => {
-        let viewId: string
-        let tableId: string
+        let table: Table
+        let view: ViewV2
 
         beforeAll(async () => {
-          await createTable(await userTable())
+          table = await config.api.table.save(await userTable())
           await Promise.all(
-            Array.from({ length: 10 }, () => config.createRow())
+            Array.from({ length: 10 }, () =>
+              config.api.row.save(table._id!, {})
+            )
           )
 
-          const createViewResponse = await config.createView()
-
-          tableId = table._id!
-          viewId = createViewResponse.id
+          view = await config.api.viewV2.create({
+            tableId: table._id!,
+          })
         })
 
         beforeEach(() => {
@@ -1534,7 +1475,7 @@ describe.each([
 
         it("does not allow public users to fetch by default", async () => {
           await config.publish()
-          await config.api.viewV2.publicSearch(viewId, undefined, {
+          await config.api.viewV2.publicSearch(view.id, undefined, {
             status: 403,
           })
         })
@@ -1543,11 +1484,11 @@ describe.each([
           await config.api.permission.add({
             roleId: roles.BUILTIN_ROLE_IDS.PUBLIC,
             level: PermissionLevel.READ,
-            resourceId: viewId,
+            resourceId: view.id,
           })
           await config.publish()
 
-          const response = await config.api.viewV2.publicSearch(viewId)
+          const response = await config.api.viewV2.publicSearch(view.id)
 
           expect(response.rows).toHaveLength(10)
         })
@@ -1556,11 +1497,11 @@ describe.each([
           await config.api.permission.add({
             roleId: roles.BUILTIN_ROLE_IDS.PUBLIC,
             level: PermissionLevel.READ,
-            resourceId: tableId,
+            resourceId: table._id!,
           })
           await config.publish()
 
-          const response = await config.api.viewV2.publicSearch(viewId)
+          const response = await config.api.viewV2.publicSearch(view.id)
 
           expect(response.rows).toHaveLength(10)
         })
@@ -1569,16 +1510,16 @@ describe.each([
           await config.api.permission.add({
             roleId: roles.BUILTIN_ROLE_IDS.PUBLIC,
             level: PermissionLevel.READ,
-            resourceId: tableId,
+            resourceId: table._id!,
           })
           await config.api.permission.add({
             roleId: roles.BUILTIN_ROLE_IDS.POWER,
             level: PermissionLevel.READ,
-            resourceId: viewId,
+            resourceId: view.id,
           })
           await config.publish()
 
-          await config.api.viewV2.publicSearch(viewId, undefined, {
+          await config.api.viewV2.publicSearch(view.id, undefined, {
             status: 403,
           })
         })
@@ -1589,18 +1530,8 @@ describe.each([
   let o2mTable: Table
   let m2mTable: Table
   beforeAll(async () => {
-    o2mTable = await createTable(
-      { ...generateTableConfig(), name: "o2m" },
-      {
-        skipReassigning: true,
-      }
-    )
-    m2mTable = await createTable(
-      { ...generateTableConfig(), name: "m2m" },
-      {
-        skipReassigning: true,
-      }
-    )
+    o2mTable = await config.api.table.save(defaultTable({ name: "o2m" }))
+    m2mTable = await config.api.table.save(defaultTable({ name: "m2m" }))
   })
 
   describe.each([
@@ -1662,21 +1593,9 @@ describe.each([
     let m2mData: Row[]
 
     beforeAll(async () => {
-      const tableConfig = generateTableConfig()
-
-      if (config.datasource) {
-        tableConfig.sourceId = config.datasource._id!
-        if (config.datasource.plus) {
-          tableConfig.sourceType = TableSourceType.EXTERNAL
-        }
-      }
-      const table = await config.api.table.save({
-        ...tableConfig,
-        schema: {
-          ...tableConfig.schema,
-          ...relSchema(),
-        },
-      })
+      const table = await config.api.table.save(
+        defaultTable({ schema: relSchema() })
+      )
       tableId = table._id!
 
       o2mData = [
@@ -1695,37 +1614,33 @@ describe.each([
     })
 
     it("can save a row when relationship fields are empty", async () => {
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
+      })
 
       expect(row).toEqual({
-        name: rowData.name,
-        description: rowData.description,
-        tableId,
         _id: expect.any(String),
         _rev: expect.any(String),
         id: isInternal ? undefined : expect.any(Number),
         type: isInternal ? "row" : undefined,
+        name: "foo",
+        description: "bar",
+        tableId,
       })
     })
 
     it("can save a row with a single relationship field", async () => {
       const user = _.sample(o2mData)!
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
         user: [user],
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      })
 
       expect(row).toEqual({
-        name: rowData.name,
-        description: rowData.description,
+        name: "foo",
+        description: "bar",
         tableId,
         user: [user].map(u => resultMapper(u)),
         _id: expect.any(String),
@@ -1738,17 +1653,15 @@ describe.each([
 
     it("can save a row with a multiple relationship field", async () => {
       const selectedUsers = _.sampleSize(m2mData, 2)
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
         users: selectedUsers,
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      })
 
       expect(row).toEqual({
-        name: rowData.name,
-        description: rowData.description,
+        name: "foo",
+        description: "bar",
         tableId,
         users: expect.arrayContaining(selectedUsers.map(u => resultMapper(u))),
         _id: expect.any(String),
@@ -1759,17 +1672,15 @@ describe.each([
     })
 
     it("can retrieve rows with no populated relationships", async () => {
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
+      })
 
       const retrieved = await config.api.row.get(tableId, row._id!)
       expect(retrieved).toEqual({
-        name: rowData.name,
-        description: rowData.description,
+        name: "foo",
+        description: "bar",
         tableId,
         user: undefined,
         users: undefined,
@@ -1784,19 +1695,17 @@ describe.each([
       const user1 = _.sample(o2mData)!
       const [user2, user3] = _.sampleSize(m2mData, 2)
 
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
         users: [user2, user3],
         user: [user1],
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      })
 
       const retrieved = await config.api.row.get(tableId, row._id!)
       expect(retrieved).toEqual({
-        name: rowData.name,
-        description: rowData.description,
+        name: "foo",
+        description: "bar",
         tableId,
         user: expect.arrayContaining([user1].map(u => resultMapper(u))),
         users: expect.arrayContaining([user2, user3].map(u => resultMapper(u))),
@@ -1812,13 +1721,11 @@ describe.each([
       const user = _.sample(o2mData)!
       const [users1, users2, users3] = _.sampleSize(m2mData, 3)
 
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
         users: [users1, users2],
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      })
 
       const updatedRow = await config.api.row.save(tableId, {
         ...row,
@@ -1826,8 +1733,8 @@ describe.each([
         users: [users3, users1],
       })
       expect(updatedRow).toEqual({
-        name: rowData.name,
-        description: rowData.description,
+        name: "foo",
+        description: "bar",
         tableId,
         user: expect.arrayContaining([user].map(u => resultMapper(u))),
         users: expect.arrayContaining(
@@ -1843,14 +1750,11 @@ describe.each([
 
     it("can wipe an existing populated relationships in row", async () => {
       const [user1, user2] = _.sampleSize(m2mData, 2)
-
-      const rowData = {
-        ...basicRow(tableId),
-        name: generator.name(),
-        description: generator.name(),
+      const row = await config.api.row.save(tableId, {
+        name: "foo",
+        description: "bar",
         users: [user1, user2],
-      }
-      const row = await config.api.row.save(tableId, rowData)
+      })
 
       const updatedRow = await config.api.row.save(tableId, {
         ...row,
@@ -1858,8 +1762,8 @@ describe.each([
         users: null,
       })
       expect(updatedRow).toEqual({
-        name: rowData.name,
-        description: rowData.description,
+        name: "foo",
+        description: "bar",
         tableId,
         _id: row._id,
         _rev: expect.any(String),
@@ -1872,28 +1776,19 @@ describe.each([
       const [user1] = _.sampleSize(o2mData, 1)
       const [users1, users2, users3] = _.sampleSize(m2mData, 3)
 
-      const rows: {
-        name: string
-        description: string
-        user?: Row[]
-        users?: Row[]
-        tableId: string
-      }[] = [
+      const rows = [
         {
-          ...basicRow(tableId),
           name: generator.name(),
           description: generator.name(),
           users: [users1, users2],
         },
         {
-          ...basicRow(tableId),
           name: generator.name(),
           description: generator.name(),
           user: [user1],
           users: [users1, users3],
         },
         {
-          ...basicRow(tableId),
           name: generator.name(),
           description: generator.name(),
           users: [users3],
@@ -1931,28 +1826,19 @@ describe.each([
       const [user1] = _.sampleSize(o2mData, 1)
       const [users1, users2, users3] = _.sampleSize(m2mData, 3)
 
-      const rows: {
-        name: string
-        description: string
-        user?: Row[]
-        users?: Row[]
-        tableId: string
-      }[] = [
+      const rows = [
         {
-          ...basicRow(tableId),
           name: generator.name(),
           description: generator.name(),
           users: [users1, users2],
         },
         {
-          ...basicRow(tableId),
           name: generator.name(),
           description: generator.name(),
           user: [user1],
           users: [users1, users3],
         },
         {
-          ...basicRow(tableId),
           name: generator.name(),
           description: generator.name(),
           users: [users3],
@@ -1994,20 +1880,23 @@ describe.each([
   })
 
   describe("Formula fields", () => {
-    let relationshipTable: Table, tableId: string, relatedRow: Row
+    let table: Table
+    let otherTable: Table
+    let relatedRow: Row
 
     beforeAll(async () => {
-      const otherTableId = config.table!._id!
-      const cfg = generateTableConfig()
-      relationshipTable = await config.createLinkedTable(
-        RelationshipType.ONE_TO_MANY,
-        ["links"],
-        {
-          ...cfg,
-          // needs to be a short name
+      otherTable = await config.api.table.save(defaultTable())
+      table = await config.api.table.save(
+        saveTableRequest({
           name: "b",
           schema: {
-            ...cfg.schema,
+            links: {
+              name: "links",
+              fieldName: "links",
+              type: FieldType.LINK,
+              tableId: otherTable._id!,
+              relationshipType: RelationshipType.ONE_TO_MANY,
+            },
             formula: {
               name: "formula",
               type: FieldType.FORMULA,
@@ -2015,25 +1904,23 @@ describe.each([
               formulaType: FormulaType.DYNAMIC,
             },
           },
-        }
+        })
       )
 
-      tableId = relationshipTable._id!
-
-      relatedRow = await config.api.row.save(otherTableId, {
+      relatedRow = await config.api.row.save(otherTable._id!, {
         name: generator.word(),
         description: generator.paragraph(),
       })
-      await config.api.row.save(tableId, {
+      await config.api.row.save(table._id!, {
         name: generator.word(),
         description: generator.paragraph(),
-        tableId,
+        tableId: table._id!,
         links: [relatedRow._id],
       })
     })
 
     it("should be able to search for rows containing formulas", async () => {
-      const { rows } = await config.api.row.search(tableId)
+      const { rows } = await config.api.row.search(table._id!)
       expect(rows.length).toBe(1)
       expect(rows[0].links.length).toBe(1)
       const row = rows[0]
@@ -2054,22 +1941,22 @@ describe.each([
             `
         ).toString("base64")
 
-        const table = await config.createTable({
-          name: "table",
-          type: "table",
-          schema: {
-            text: {
-              name: "text",
-              type: FieldType.STRING,
+        const table = await config.api.table.save(
+          saveTableRequest({
+            schema: {
+              text: {
+                name: "text",
+                type: FieldType.STRING,
+              },
+              formula: {
+                name: "formula",
+                type: FieldType.FORMULA,
+                formula: `{{ js "${js}"}}`,
+                formulaType: FormulaType.DYNAMIC,
+              },
             },
-            formula: {
-              name: "formula",
-              type: FieldType.FORMULA,
-              formula: `{{ js "${js}"}}`,
-              formulaType: FormulaType.DYNAMIC,
-            },
-          },
-        })
+          })
+        )
 
         await config.api.row.save(table._id!, { text: "foo" })
         const { rows } = await config.api.row.search(table._id!)
@@ -2097,22 +1984,23 @@ describe.each([
             `
           ).toString("base64")
 
-          const table = await config.createTable({
-            name: "table",
-            type: "table",
-            schema: {
-              text: {
-                name: "text",
-                type: FieldType.STRING,
+          const table = await config.api.table.save(
+            saveTableRequest({
+              name: "table",
+              schema: {
+                text: {
+                  name: "text",
+                  type: FieldType.STRING,
+                },
+                formula: {
+                  name: "formula",
+                  type: FieldType.FORMULA,
+                  formula: `{{ js "${js}"}}`,
+                  formulaType: FormulaType.DYNAMIC,
+                },
               },
-              formula: {
-                name: "formula",
-                type: FieldType.FORMULA,
-                formula: `{{ js "${js}"}}`,
-                formulaType: FormulaType.DYNAMIC,
-              },
-            },
-          })
+            })
+          )
 
           for (let i = 0; i < 10; i++) {
             await config.api.row.save(table._id!, { text: "foo" })
@@ -2150,22 +2038,22 @@ describe.each([
 
     it("should not carry over context between formulas", async () => {
       const js = Buffer.from(`return $("[text]");`).toString("base64")
-      const table = await config.createTable({
-        name: "table",
-        type: "table",
-        schema: {
-          text: {
-            name: "text",
-            type: FieldType.STRING,
+      const table = await config.api.table.save(
+        saveTableRequest({
+          schema: {
+            text: {
+              name: "text",
+              type: FieldType.STRING,
+            },
+            formula: {
+              name: "formula",
+              type: FieldType.FORMULA,
+              formula: `{{ js "${js}"}}`,
+              formulaType: FormulaType.DYNAMIC,
+            },
           },
-          formula: {
-            name: "formula",
-            type: FieldType.FORMULA,
-            formula: `{{ js "${js}"}}`,
-            formulaType: FormulaType.DYNAMIC,
-          },
-        },
-      })
+        })
+      )
 
       for (let i = 0; i < 10; i++) {
         await config.api.row.save(table._id!, { text: `foo${i}` })
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.ts
similarity index 59%
rename from packages/server/src/api/routes/tests/view.spec.js
rename to packages/server/src/api/routes/tests/view.spec.ts
index 92ff097899..2e8c71b812 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.ts
@@ -1,30 +1,38 @@
-const setup = require("./utilities")
-const { events } = require("@budibase/backend-core")
+import { events } from "@budibase/backend-core"
+import * as setup from "./utilities"
+import {
+  FieldType,
+  INTERNAL_TABLE_SOURCE_ID,
+  SaveTableRequest,
+  Table,
+  TableSourceType,
+  View,
+  ViewCalculation,
+} from "@budibase/types"
 
-function priceTable() {
-  return {
-    name: "table",
-    type: "table",
-    key: "name",
-    schema: {
-      Price: {
-        type: "number",
-        constraints: {},
-      },
-      Category: {
+const priceTable: SaveTableRequest = {
+  name: "table",
+  type: "table",
+  sourceId: INTERNAL_TABLE_SOURCE_ID,
+  sourceType: TableSourceType.INTERNAL,
+  schema: {
+    Price: {
+      name: "Price",
+      type: FieldType.NUMBER,
+    },
+    Category: {
+      name: "Category",
+      type: FieldType.STRING,
+      constraints: {
         type: "string",
-        constraints: {
-          type: "string",
-        },
       },
     },
-  }
+  },
 }
 
 describe("/views", () => {
-  let request = setup.getRequest()
   let config = setup.getConfig()
-  let table
+  let table: Table
 
   afterAll(setup.afterAll)
 
@@ -33,38 +41,34 @@ describe("/views", () => {
   })
 
   beforeEach(async () => {
-    table = await config.createTable(priceTable())
+    table = await config.api.table.save(priceTable)
   })
 
-  const saveView = async view => {
-    const viewToSave = {
+  const saveView = async (view?: Partial<View>) => {
+    const viewToSave: View = {
       name: "TestView",
       field: "Price",
-      calculation: "stats",
-      tableId: table._id,
+      calculation: ViewCalculation.STATISTICS,
+      tableId: table._id!,
+      filters: [],
+      schema: {},
       ...view,
     }
-    return request
-      .post(`/api/views`)
-      .send(viewToSave)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
+    return config.api.legacyView.save(viewToSave)
   }
 
   describe("create", () => {
     it("returns a success message when the view is successfully created", async () => {
       const res = await saveView()
-      expect(res.body.tableId).toBe(table._id)
       expect(events.view.created).toBeCalledTimes(1)
     })
 
     it("creates a view with a calculation", async () => {
       jest.clearAllMocks()
 
-      const res = await saveView({ calculation: "count" })
+      const view = await saveView({ calculation: ViewCalculation.COUNT })
 
-      expect(res.body.tableId).toBe(table._id)
+      expect(view.tableId).toBe(table._id)
       expect(events.view.created).toBeCalledTimes(1)
       expect(events.view.updated).not.toBeCalled()
       expect(events.view.calculationCreated).toBeCalledTimes(1)
@@ -78,8 +82,8 @@ describe("/views", () => {
     it("creates a view with a filter", async () => {
       jest.clearAllMocks()
 
-      const res = await saveView({
-        calculation: null,
+      const view = await saveView({
+        calculation: undefined,
         filters: [
           {
             value: "1",
@@ -89,7 +93,7 @@ describe("/views", () => {
         ],
       })
 
-      expect(res.body.tableId).toBe(table._id)
+      expect(view.tableId).toBe(table._id)
       expect(events.view.created).toBeCalledTimes(1)
       expect(events.view.updated).not.toBeCalled()
       expect(events.view.calculationCreated).not.toBeCalled()
@@ -101,52 +105,41 @@ describe("/views", () => {
     })
 
     it("updates the table row with the new view metadata", async () => {
-      const res = await request
-        .post(`/api/views`)
-        .send({
-          name: "TestView",
-          field: "Price",
-          calculation: "stats",
-          tableId: table._id,
+      await saveView()
+      const updatedTable = await config.api.table.get(table._id!)
+      expect(updatedTable.views).toEqual(
+        expect.objectContaining({
+          TestView: expect.objectContaining({
+            field: "Price",
+            calculation: "stats",
+            tableId: table._id,
+            filters: [],
+            schema: {
+              sum: {
+                type: "number",
+              },
+              min: {
+                type: "number",
+              },
+              max: {
+                type: "number",
+              },
+              count: {
+                type: "number",
+              },
+              sumsqr: {
+                type: "number",
+              },
+              avg: {
+                type: "number",
+              },
+              field: {
+                type: "string",
+              },
+            },
+          }),
         })
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body.tableId).toBe(table._id)
-
-      const updatedTable = await config.getTable(table._id)
-      const expectedObj = expect.objectContaining({
-        TestView: expect.objectContaining({
-          field: "Price",
-          calculation: "stats",
-          tableId: table._id,
-          filters: [],
-          schema: {
-            sum: {
-              type: "number",
-            },
-            min: {
-              type: "number",
-            },
-            max: {
-              type: "number",
-            },
-            count: {
-              type: "number",
-            },
-            sumsqr: {
-              type: "number",
-            },
-            avg: {
-              type: "number",
-            },
-            field: {
-              type: "string",
-            },
-          },
-        }),
-      })
-      expect(updatedTable.views).toEqual(expectedObj)
+      )
     })
   })
 
@@ -168,10 +161,10 @@ describe("/views", () => {
     })
 
     it("updates a view calculation", async () => {
-      await saveView({ calculation: "sum" })
+      await saveView({ calculation: ViewCalculation.SUM })
       jest.clearAllMocks()
 
-      await saveView({ calculation: "count" })
+      await saveView({ calculation: ViewCalculation.COUNT })
 
       expect(events.view.created).not.toBeCalled()
       expect(events.view.updated).toBeCalledTimes(1)
@@ -184,10 +177,10 @@ describe("/views", () => {
     })
 
     it("deletes a view calculation", async () => {
-      await saveView({ calculation: "sum" })
+      await saveView({ calculation: ViewCalculation.SUM })
       jest.clearAllMocks()
 
-      await saveView({ calculation: null })
+      await saveView({ calculation: undefined })
 
       expect(events.view.created).not.toBeCalled()
       expect(events.view.updated).toBeCalledTimes(1)
@@ -258,100 +251,98 @@ describe("/views", () => {
 
   describe("fetch", () => {
     beforeEach(async () => {
-      table = await config.createTable(priceTable())
+      table = await config.api.table.save(priceTable)
     })
 
     it("returns only custom views", async () => {
-      await config.createLegacyView({
+      await saveView({
         name: "TestView",
         field: "Price",
-        calculation: "stats",
+        calculation: ViewCalculation.STATISTICS,
         tableId: table._id,
       })
-      const res = await request
-        .get(`/api/views`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body.length).toBe(1)
-      expect(res.body.find(({ name }) => name === "TestView")).toBeDefined()
+      const views = await config.api.legacyView.fetch()
+      expect(views.length).toBe(1)
+      expect(views.find(({ name }) => name === "TestView")).toBeDefined()
     })
   })
 
   describe("query", () => {
     it("returns data for the created view", async () => {
-      await config.createLegacyView({
+      await saveView({
         name: "TestView",
         field: "Price",
-        calculation: "stats",
-        tableId: table._id,
+        calculation: ViewCalculation.STATISTICS,
+        tableId: table._id!,
       })
-      await config.createRow({
-        tableId: table._id,
+      await config.api.row.save(table._id!, {
         Price: 1000,
       })
-      await config.createRow({
-        tableId: table._id,
+      await config.api.row.save(table._id!, {
         Price: 2000,
       })
-      await config.createRow({
-        tableId: table._id,
+      await config.api.row.save(table._id!, {
         Price: 4000,
       })
-      const res = await request
-        .get(`/api/views/TestView?calculation=stats`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body.length).toBe(1)
-      expect(res.body).toMatchSnapshot()
+      const rows = await config.api.legacyView.get("TestView", {
+        calculation: ViewCalculation.STATISTICS,
+      })
+      expect(rows.length).toBe(1)
+      expect(rows[0]).toEqual({
+        avg: 2333.3333333333335,
+        count: 3,
+        group: null,
+        max: 4000,
+        min: 1000,
+        sum: 7000,
+        sumsqr: 21000000,
+      })
     })
 
     it("returns data for the created view using a group by", async () => {
-      await config.createLegacyView({
-        calculation: "stats",
+      await saveView({
+        calculation: ViewCalculation.STATISTICS,
         name: "TestView",
         field: "Price",
         groupBy: "Category",
         tableId: table._id,
       })
-      await config.createRow({
-        tableId: table._id,
+      await config.api.row.save(table._id!, {
         Price: 1000,
         Category: "One",
       })
-      await config.createRow({
-        tableId: table._id,
+      await config.api.row.save(table._id!, {
         Price: 2000,
         Category: "One",
       })
-      await config.createRow({
-        tableId: table._id,
+      await config.api.row.save(table._id!, {
         Price: 4000,
         Category: "Two",
       })
-      const res = await request
-        .get(`/api/views/TestView?calculation=stats&group=Category`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-
-      expect(res.body.length).toBe(2)
-      expect(res.body).toMatchSnapshot()
+      const rows = await config.api.legacyView.get("TestView", {
+        calculation: ViewCalculation.STATISTICS,
+        group: "Category",
+      })
+      expect(rows.length).toBe(2)
+      expect(rows[0]).toEqual({
+        avg: 1500,
+        count: 2,
+        group: "One",
+        max: 2000,
+        min: 1000,
+        sum: 3000,
+        sumsqr: 5000000,
+      })
     })
   })
 
   describe("destroy", () => {
     it("should be able to delete a view", async () => {
-      const table = await config.createTable(priceTable())
-      const view = await config.createLegacyView()
-      const res = await request
-        .delete(`/api/views/${view.name}`)
-        .set(config.defaultHeaders())
-        .expect("Content-Type", /json/)
-        .expect(200)
-      expect(res.body.map).toBeDefined()
-      expect(res.body.meta.tableId).toEqual(table._id)
+      const table = await config.api.table.save(priceTable)
+      const view = await saveView({ tableId: table._id })
+      const deletedView = await config.api.legacyView.destroy(view.name!)
+      expect(deletedView.map).toBeDefined()
+      expect(deletedView.meta?.tableId).toEqual(table._id)
       expect(events.view.deleted).toBeCalledTimes(1)
     })
   })
@@ -362,33 +353,44 @@ describe("/views", () => {
     })
 
     const setupExport = async () => {
-      const table = await config.createTable()
-      await config.createRow({ name: "test-name", description: "ùúûü" })
+      const table = await config.api.table.save({
+        name: "test-table",
+        type: "table",
+        sourceId: INTERNAL_TABLE_SOURCE_ID,
+        sourceType: TableSourceType.INTERNAL,
+        schema: {
+          name: {
+            name: "name",
+            type: FieldType.STRING,
+          },
+          description: {
+            name: "description",
+            type: FieldType.STRING,
+          },
+        },
+      })
+      await config.api.row.save(table._id!, {
+        name: "test-name",
+        description: "ùúûü",
+      })
       return table
     }
 
-    const exportView = async (viewName, format) => {
-      return request
-        .get(`/api/views/export?view=${viewName}&format=${format}`)
-        .set(config.defaultHeaders())
-        .expect(200)
-    }
-
-    const assertJsonExport = res => {
-      const rows = JSON.parse(res.text)
+    const assertJsonExport = (res: string) => {
+      const rows = JSON.parse(res)
       expect(rows.length).toBe(1)
       expect(rows[0].name).toBe("test-name")
       expect(rows[0].description).toBe("ùúûü")
     }
 
-    const assertCSVExport = res => {
-      expect(res.text).toBe(`"name","description"\n"test-name","ùúûü"`)
+    const assertCSVExport = (res: string) => {
+      expect(res).toBe(`"name","description"\n"test-name","ùúûü"`)
     }
 
     it("should be able to export a table as JSON", async () => {
       const table = await setupExport()
 
-      const res = await exportView(table._id, "json")
+      const res = await config.api.legacyView.export(table._id!, "json")
 
       assertJsonExport(res)
       expect(events.table.exported).toBeCalledTimes(1)
@@ -398,7 +400,7 @@ describe("/views", () => {
     it("should be able to export a table as CSV", async () => {
       const table = await setupExport()
 
-      const res = await exportView(table._id, "csv")
+      const res = await config.api.legacyView.export(table._id!, "csv")
 
       assertCSVExport(res)
       expect(events.table.exported).toBeCalledTimes(1)
@@ -407,10 +409,15 @@ describe("/views", () => {
 
     it("should be able to export a view as JSON", async () => {
       let table = await setupExport()
-      const view = await config.createLegacyView()
-      table = await config.getTable(table._id)
+      const view = await config.api.legacyView.save({
+        name: "test-view",
+        tableId: table._id!,
+        filters: [],
+        schema: {},
+      })
+      table = await config.api.table.get(table._id!)
 
-      let res = await exportView(view.name, "json")
+      let res = await config.api.legacyView.export(view.name!, "json")
 
       assertJsonExport(res)
       expect(events.view.exported).toBeCalledTimes(1)
@@ -419,10 +426,15 @@ describe("/views", () => {
 
     it("should be able to export a view as CSV", async () => {
       let table = await setupExport()
-      const view = await config.createLegacyView()
-      table = await config.getTable(table._id)
+      const view = await config.api.legacyView.save({
+        name: "test-view",
+        tableId: table._id!,
+        filters: [],
+        schema: {},
+      })
+      table = await config.api.table.get(table._id!)
 
-      let res = await exportView(view.name, "csv")
+      let res = await config.api.legacyView.export(view.name!, "csv")
 
       assertCSVExport(res)
       expect(events.view.exported).toBeCalledTimes(1)
diff --git a/packages/server/src/api/routes/utils/validators.ts b/packages/server/src/api/routes/utils/validators.ts
index 55766cd120..424d0d6c79 100644
--- a/packages/server/src/api/routes/utils/validators.ts
+++ b/packages/server/src/api/routes/utils/validators.ts
@@ -2,6 +2,7 @@ import { auth, permissions } from "@budibase/backend-core"
 import { DataSourceOperation } from "../../../constants"
 import { WebhookActionType } from "@budibase/types"
 import Joi from "joi"
+import { ValidSnippetNameRegex } from "@budibase/shared-core"
 
 const OPTIONAL_STRING = Joi.string().optional().allow(null).allow("")
 const OPTIONAL_NUMBER = Joi.number().optional().allow(null)
@@ -226,6 +227,21 @@ export function applicationValidator(opts = { isCreate: true }) {
     base.name = appNameValidator.optional()
   }
 
+  const snippetValidator = Joi.array()
+    .optional()
+    .items(
+      Joi.object({
+        name: Joi.string()
+          .pattern(new RegExp(ValidSnippetNameRegex))
+          .error(
+            new Error(
+              "Snippet name cannot include spaces or special characters, and cannot start with a number"
+            )
+          ),
+        code: OPTIONAL_STRING,
+      })
+    )
+
   return auth.joiValidator.body(
     Joi.object({
       _id: OPTIONAL_STRING,
@@ -235,6 +251,7 @@ export function applicationValidator(opts = { isCreate: true }) {
       template: Joi.object({
         templateString: OPTIONAL_STRING,
       }).unknown(true),
+      snippets: snippetValidator,
     }).unknown(true)
   )
 }
diff --git a/packages/server/src/db/linkedRows/index.ts b/packages/server/src/db/linkedRows/index.ts
index 7af3f9392f..513e0c0df2 100644
--- a/packages/server/src/db/linkedRows/index.ts
+++ b/packages/server/src/db/linkedRows/index.ts
@@ -202,7 +202,8 @@ export async function attachFullLinkedDocs(
           table => table._id === linkedTableId
         )
         if (linkedTable) {
-          row[link.fieldName].push(processFormulas(linkedTable, linkedRow))
+          const processed = await processFormulas(linkedTable, linkedRow)
+          row[link.fieldName].push(processed)
         }
       }
     }
diff --git a/packages/server/src/jsRunner/bundles/index.ts b/packages/server/src/jsRunner/bundles/index.ts
index 9e2960807a..f7685206a6 100644
--- a/packages/server/src/jsRunner/bundles/index.ts
+++ b/packages/server/src/jsRunner/bundles/index.ts
@@ -5,11 +5,13 @@ import fs from "fs"
 export const enum BundleType {
   HELPERS = "helpers",
   BSON = "bson",
+  SNIPPETS = "snippets",
 }
 
 const bundleSourceFile: Record<BundleType, string> = {
   [BundleType.HELPERS]: "./index-helpers.ivm.bundle.js",
   [BundleType.BSON]: "./bson.ivm.bundle.js",
+  [BundleType.SNIPPETS]: "./snippets.ivm.bundle.js",
 }
 const bundleSourceCode: Partial<Record<BundleType, string>> = {}
 
diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
new file mode 100644
index 0000000000..bad9049af0
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -0,0 +1,3 @@
+"use strict";var snippets=(()=>{var u=Object.create;var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),W=(i,e)=>{for(var p in e)n(i,p,{get:e[p],enumerable:!0})},f=(i,e,p,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!C.call(i,t)&&t!==p&&n(i,t,{get:()=>e[t],enumerable:!(r=a(e,t))||r.enumerable});return i};var d=(i,e,p)=>(p=i!=null?u(x(i)):{},f(e||!i||!i.__esModule?n(p,"default",{value:i,enumerable:!0}):p,i)),g=i=>f(n({},"__esModule",{value:!0}),i);var s=l((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
+${i}
+})();`});var w={};W(w,{default:()=>v});var c=d(s()),v=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0]((0,c.iifeWrapper)(snippetDefinitions[e]))),snippetCache[e]}});return g(w);})();
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
new file mode 100644
index 0000000000..258d501a27
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -0,0 +1,24 @@
+// @ts-ignore
+// eslint-disable-next-line local-rules/no-budibase-imports
+import { iifeWrapper } from "@budibase/string-templates/iife"
+
+export default new Proxy(
+  {},
+  {
+    get: function (_, name) {
+      // Both snippetDefinitions and snippetCache are injected to the isolate
+      // global scope before this bundle is loaded, so we can access it from
+      // there.
+      // See https://esbuild.github.io/content-types/#direct-eval for info on
+      // why eval is being called this way.
+      // Snippets are cached and reused once they have been evaluated.
+      // @ts-ignore
+      if (!(name in snippetCache)) {
+        // @ts-ignore
+        snippetCache[name] = [eval][0](iifeWrapper(snippetDefinitions[name]))
+      }
+      // @ts-ignore
+      return snippetCache[name]
+    },
+  }
+)
diff --git a/packages/server/src/jsRunner/index.ts b/packages/server/src/jsRunner/index.ts
index 19bf0fa6b5..b5c8e036f6 100644
--- a/packages/server/src/jsRunner/index.ts
+++ b/packages/server/src/jsRunner/index.ts
@@ -14,16 +14,19 @@ export function init() {
   setJSRunner((js: string, ctx: Record<string, any>) => {
     return tracer.trace("runJS", {}, span => {
       try {
+        // Reuse an existing isolate from context, or make a new one
         const bbCtx = context.getCurrentContext()
-
         const vm =
           bbCtx?.vm ||
           new IsolatedVM({
             memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
             invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
             isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
-          }).withHelpers()
+          })
+            .withHelpers()
+            .withSnippets(bbCtx?.snippets)
 
+        // Persist isolate in context so we can reuse it
         if (bbCtx && !bbCtx.vm) {
           bbCtx.vm = vm
           bbCtx.cleanup = bbCtx.cleanup || []
@@ -33,7 +36,7 @@ export function init() {
         // Because we can't pass functions into an Isolate, we remove them from
         // the passed context and rely on the withHelpers() method to add them
         // back in.
-        const { helpers, ...rest } = ctx
+        const { helpers, snippets, ...rest } = ctx
         return vm.withContext(rest, () => vm.execute(js))
       } catch (error: any) {
         if (error.message === "Script execution timed out.") {
diff --git a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
index 5296598ef1..5a9bc05d76 100644
--- a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
+++ b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
@@ -1,7 +1,7 @@
 import fs from "fs"
 import path from "path"
 import { IsolatedVM } from "../vm"
-import { iifeWrapper } from "../utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 
 function runJSWithIsolatedVM(script: string, context: Record<string, any>) {
   const runner = new IsolatedVM()
diff --git a/packages/server/src/jsRunner/utilities.ts b/packages/server/src/jsRunner/utilities.ts
deleted file mode 100644
index fa398ec239..0000000000
--- a/packages/server/src/jsRunner/utilities.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function iifeWrapper(script: string) {
-  return `(function(){\n${script}\n})();`
-}
diff --git a/packages/server/src/jsRunner/vm/isolated-vm.ts b/packages/server/src/jsRunner/vm/isolated-vm.ts
index 53858bd6ff..e89d420ec5 100644
--- a/packages/server/src/jsRunner/vm/isolated-vm.ts
+++ b/packages/server/src/jsRunner/vm/isolated-vm.ts
@@ -6,8 +6,8 @@ import crypto from "crypto"
 import querystring from "querystring"
 
 import { BundleType, loadBundle } from "../bundles"
-import { VM } from "@budibase/types"
-import { iifeWrapper } from "../utilities"
+import { Snippet, VM } from "@budibase/types"
+import { iifeWrapper } from "@budibase/string-templates"
 import environment from "../../environment"
 
 class ExecutionTimeoutError extends Error {
@@ -98,6 +98,26 @@ export class IsolatedVM implements VM {
     return this
   }
 
+  withSnippets(snippets?: Snippet[]) {
+    // Transform snippets into a map for faster access
+    let snippetMap: Record<string, string> = {}
+    for (let snippet of snippets || []) {
+      snippetMap[snippet.name] = snippet.code
+    }
+    const snippetsSource = loadBundle(BundleType.SNIPPETS)
+    const script = this.isolate.compileScriptSync(`
+      const snippetDefinitions = ${JSON.stringify(snippetMap)};
+      const snippetCache = {};
+      ${snippetsSource};
+      snippets = snippets.default;
+    `)
+    script.runSync(this.vm, { timeout: this.invocationTimeout, release: false })
+    new Promise(() => {
+      script.release()
+    })
+    return this
+  }
+
   withContext<T>(context: Record<string, any>, executeWithContext: () => T) {
     this.addToContext(context)
 
diff --git a/packages/server/src/tests/utilities/api/legacyView.ts b/packages/server/src/tests/utilities/api/legacyView.ts
index 38ef70d62a..b018988670 100644
--- a/packages/server/src/tests/utilities/api/legacyView.ts
+++ b/packages/server/src/tests/utilities/api/legacyView.ts
@@ -1,8 +1,36 @@
 import { Expectations, TestAPI } from "./base"
-import { Row } from "@budibase/types"
+import { Row, View, ViewCalculation } from "@budibase/types"
 
 export class LegacyViewAPI extends TestAPI {
-  get = async (id: string, expectations?: Expectations) => {
-    return await this._get<Row[]>(`/api/views/${id}`, { expectations })
+  get = async (
+    id: string,
+    query?: { calculation: ViewCalculation; group?: string },
+    expectations?: Expectations
+  ) => {
+    return await this._get<Row[]>(`/api/views/${id}`, { query, expectations })
+  }
+
+  save = async (body: View, expectations?: Expectations) => {
+    return await this._post<View>(`/api/views/`, { body, expectations })
+  }
+
+  fetch = async (expectations?: Expectations) => {
+    return await this._get<View[]>(`/api/views`, { expectations })
+  }
+
+  destroy = async (id: string, expectations?: Expectations) => {
+    return await this._delete<View>(`/api/views/${id}`, { expectations })
+  }
+
+  export = async (
+    viewName: string,
+    format: "json" | "csv" | "jsonWithSchema",
+    expectations?: Expectations
+  ) => {
+    const response = await this._requestRaw("get", `/api/views/export`, {
+      query: { view: viewName, format },
+      expectations,
+    })
+    return response.text
   }
 }
diff --git a/packages/server/src/threads/automation.ts b/packages/server/src/threads/automation.ts
index a4938bb138..4e33fadce6 100644
--- a/packages/server/src/threads/automation.ts
+++ b/packages/server/src/threads/automation.ts
@@ -625,6 +625,7 @@ export async function executeInThread(job: Job<AutomationData>) {
   })
 
   return await context.doInAppContext(appId, async () => {
+    await context.ensureSnippetContext()
     const envVars = await sdkUtils.getEnvironmentVariables()
     // put into automation thread for whole context
     return await context.doInEnvironmentContext(envVars, async () => {
diff --git a/packages/server/src/threads/query.ts b/packages/server/src/threads/query.ts
index baee2d5c05..9f5e02bf69 100644
--- a/packages/server/src/threads/query.ts
+++ b/packages/server/src/threads/query.ts
@@ -8,9 +8,8 @@ import {
   QueryResponse,
 } from "./definitions"
 import { IsolatedVM } from "../jsRunner/vm"
-import { iifeWrapper } from "../jsRunner/utilities"
+import { iifeWrapper, processStringSync } from "@budibase/string-templates"
 import { getIntegration } from "../integrations"
-import { processStringSync } from "@budibase/string-templates"
 import { context, cache, auth } from "@budibase/backend-core"
 import { getGlobalIDFromUserMetadataID } from "../db/utils"
 import sdk from "../sdk"
diff --git a/packages/server/src/utilities/rowProcessor/index.ts b/packages/server/src/utilities/rowProcessor/index.ts
index e3ca576fb7..d956a94d0b 100644
--- a/packages/server/src/utilities/rowProcessor/index.ts
+++ b/packages/server/src/utilities/rowProcessor/index.ts
@@ -245,7 +245,7 @@ export async function outputProcessing<T extends Row[] | Row>(
   }
 
   // process formulas after the complex types had been processed
-  enriched = processFormulas(table, enriched, { dynamic: true })
+  enriched = await processFormulas(table, enriched, { dynamic: true })
 
   if (opts.squash) {
     enriched = (await linkRows.squashLinksToPrimaryDisplay(
diff --git a/packages/server/src/utilities/rowProcessor/utils.ts b/packages/server/src/utilities/rowProcessor/utils.ts
index d0fc82b3ee..8201680f13 100644
--- a/packages/server/src/utilities/rowProcessor/utils.ts
+++ b/packages/server/src/utilities/rowProcessor/utils.ts
@@ -10,6 +10,7 @@ import {
   FieldType,
 } from "@budibase/types"
 import tracer from "dd-trace"
+import { context } from "@budibase/backend-core"
 
 interface FormulaOpts {
   dynamic?: boolean
@@ -44,16 +45,19 @@ export function fixAutoColumnSubType(
 /**
  * Looks through the rows provided and finds formulas - which it then processes.
  */
-export function processFormulas<T extends Row | Row[]>(
+export async function processFormulas<T extends Row | Row[]>(
   table: Table,
   inputRows: T,
   { dynamic, contextRows }: FormulaOpts = { dynamic: true }
-): T {
-  return tracer.trace("processFormulas", {}, span => {
+): Promise<T> {
+  return tracer.trace("processFormulas", {}, async span => {
     const numRows = Array.isArray(inputRows) ? inputRows.length : 1
     span?.addTags({ table_id: table._id, dynamic, numRows })
     const rows = Array.isArray(inputRows) ? inputRows : [inputRows]
     if (rows) {
+      // Ensure we have snippet context
+      await context.ensureSnippetContext()
+
       for (let [column, schema] of Object.entries(table.schema)) {
         if (schema.type !== FieldType.FORMULA) {
           continue
diff --git a/packages/shared-core/src/constants/index.ts b/packages/shared-core/src/constants/index.ts
index 99fb5c2a73..633fd36e45 100644
--- a/packages/shared-core/src/constants/index.ts
+++ b/packages/shared-core/src/constants/index.ts
@@ -98,6 +98,7 @@ export enum BuilderSocketEvent {
 export const SocketSessionTTL = 60
 export const ValidQueryNameRegex = /^[^()]*$/
 export const ValidColumnNameRegex = /^[_a-zA-Z0-9\s]*$/g
+export const ValidSnippetNameRegex = /^[a-z_][a-z0-9_]*$/i
 
 export const REBOOT_CRON = "@reboot"
 
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index ceafd5364f..340d74ef8a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -12,7 +12,8 @@
       "import": "./dist/bundle.mjs"
     },
     "./package.json": "./package.json",
-    "./test/utils": "./test/utils.js"
+    "./test/utils": "./test/utils.js",
+    "./iife": "./src/iife.js"
   },
   "files": [
     "dist",
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 7827736812..5be2619463 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -2,6 +2,7 @@ const { atob, isBackendService, isJSAllowed } = require("../utilities")
 const cloneDeep = require("lodash.clonedeep")
 const { LITERAL_MARKER } = require("../helpers/constants")
 const { getJsHelperList } = require("./list")
+const { iifeWrapper } = require("../iife")
 
 // The method of executing JS scripts depends on the bundle being built.
 // This setter is used in the entrypoint (either index.js or index.mjs).
@@ -48,14 +49,36 @@ module.exports.processJS = (handlebars, context) => {
   try {
     // Wrap JS in a function and immediately invoke it.
     // This is required to allow the final `return` statement to be valid.
-    const js = `(function(){${atob(handlebars)}})();`
+    const js = iifeWrapper(atob(handlebars))
+
+    // Transform snippets into an object for faster access, and cache previously
+    // evaluated snippets
+    let snippetMap = {}
+    let snippetCache = {}
+    for (let snippet of context.snippets || []) {
+      snippetMap[snippet.name] = snippet.code
+    }
 
     // Our $ context function gets a value from context.
     // We clone the context to avoid mutation in the binding affecting real
     // app context.
+    const clonedContext = cloneDeep({ ...context, snippets: null })
     const sandboxContext = {
-      $: path => getContextValue(path, cloneDeep(context)),
+      $: path => getContextValue(path, clonedContext),
       helpers: getJsHelperList(),
+
+      // Proxy to evaluate snippets when running in the browser
+      snippets: new Proxy(
+        {},
+        {
+          get: function (_, name) {
+            if (!(name in snippetCache)) {
+              snippetCache[name] = eval(iifeWrapper(snippetMap[name]))
+            }
+            return snippetCache[name]
+          },
+        }
+      ),
     }
 
     // Create a sandbox with our context and run the JS
diff --git a/packages/string-templates/src/iife.js b/packages/string-templates/src/iife.js
new file mode 100644
index 0000000000..d043c14565
--- /dev/null
+++ b/packages/string-templates/src/iife.js
@@ -0,0 +1,3 @@
+module.exports.iifeWrapper = script => {
+  return `(function(){\n${script}\n})();`
+}
diff --git a/packages/string-templates/src/index.js b/packages/string-templates/src/index.js
index 0125b9e0ab..5ae773516f 100644
--- a/packages/string-templates/src/index.js
+++ b/packages/string-templates/src/index.js
@@ -3,6 +3,7 @@ const handlebars = require("handlebars")
 const { registerAll, registerMinimum } = require("./helpers/index")
 const processors = require("./processors")
 const { atob, btoa, isBackendService } = require("./utilities")
+const { iifeWrapper } = require("./iife")
 const manifest = require("../manifest.json")
 const {
   FIND_HBS_REGEX,
@@ -426,3 +427,4 @@ function defaultJSSetup() {
 defaultJSSetup()
 
 module.exports.defaultJSSetup = defaultJSSetup
+module.exports.iifeWrapper = iifeWrapper
diff --git a/packages/types/src/core/installation.ts b/packages/types/src/core/installation.ts
index 7679290f36..ec89e439d9 100644
--- a/packages/types/src/core/installation.ts
+++ b/packages/types/src/core/installation.ts
@@ -2,3 +2,7 @@ export enum ServiceType {
   WORKER = "worker",
   APPS = "apps",
 }
+
+export enum MaintenanceType {
+  SQS_MISSING = "sqs_missing",
+}
diff --git a/packages/types/src/documents/app/app.ts b/packages/types/src/documents/app/app.ts
index ae4f3fa6da..3b7f481253 100644
--- a/packages/types/src/documents/app/app.ts
+++ b/packages/types/src/documents/app/app.ts
@@ -1,4 +1,4 @@
-import { User, Document, Plugin } from "../"
+import { User, Document, Plugin, Snippet } from "../"
 import { SocketSession } from "../../sdk"
 
 export type AppMetadataErrors = { [key: string]: string[] }
@@ -26,6 +26,7 @@ export interface App extends Document {
   automations?: AutomationSettings
   usedPlugins?: Plugin[]
   upgradableVersion?: string
+  snippets?: Snippet[]
 }
 
 export interface AppInstance {
diff --git a/packages/types/src/documents/app/index.ts b/packages/types/src/documents/app/index.ts
index b81c9e36ac..a58b708de3 100644
--- a/packages/types/src/documents/app/index.ts
+++ b/packages/types/src/documents/app/index.ts
@@ -14,3 +14,4 @@ export * from "./backup"
 export * from "./webhook"
 export * from "./links"
 export * from "./component"
+export * from "./snippet"
diff --git a/packages/types/src/documents/app/snippet.ts b/packages/types/src/documents/app/snippet.ts
new file mode 100644
index 0000000000..1b8433b32e
--- /dev/null
+++ b/packages/types/src/documents/app/snippet.ts
@@ -0,0 +1,4 @@
+export interface Snippet {
+  name: string
+  code: string
+}
diff --git a/packages/types/src/documents/app/view.ts b/packages/types/src/documents/app/view.ts
index b5a22ec592..7b93d24f3d 100644
--- a/packages/types/src/documents/app/view.ts
+++ b/packages/types/src/documents/app/view.ts
@@ -30,6 +30,7 @@ export interface View {
   map?: string
   reduce?: any
   meta?: ViewTemplateOpts
+  groupBy?: string
 }
 
 export interface ViewV2 {
diff --git a/packages/worker/src/api/controllers/system/environment.ts b/packages/worker/src/api/controllers/system/environment.ts
index bf9270607f..203d3d41ff 100644
--- a/packages/worker/src/api/controllers/system/environment.ts
+++ b/packages/worker/src/api/controllers/system/environment.ts
@@ -1,10 +1,18 @@
-import { Ctx } from "@budibase/types"
+import { Ctx, MaintenanceType } from "@budibase/types"
 import env from "../../../environment"
 import { env as coreEnv } from "@budibase/backend-core"
 import nodeFetch from "node-fetch"
 
+// When we come to move to SQS fully and move away from Clouseau, we will need
+// to flip this to true (or remove it entirely). This will then be used to
+// determine if we should show the maintenance page that links to the SQS
+// migration docs.
+const sqsRequired = false
+
 let sqsAvailable: boolean
 async function isSqsAvailable() {
+  // We cache this value for the duration of the Node process because we don't
+  // want every page load to be making this relatively expensive check.
   if (sqsAvailable !== undefined) {
     return sqsAvailable
   }
@@ -21,6 +29,10 @@ async function isSqsAvailable() {
   }
 }
 
+async function isSqsMissing() {
+  return sqsRequired && !(await isSqsAvailable())
+}
+
 export const fetch = async (ctx: Ctx) => {
   ctx.body = {
     multiTenancy: !!env.MULTI_TENANCY,
@@ -30,11 +42,12 @@ export const fetch = async (ctx: Ctx) => {
     disableAccountPortal: env.DISABLE_ACCOUNT_PORTAL,
     baseUrl: env.PLATFORM_URL,
     isDev: env.isDev() && !env.isTest(),
+    maintenance: [],
   }
 
   if (env.SELF_HOSTED) {
-    ctx.body.infrastructure = {
-      sqs: await isSqsAvailable(),
+    if (await isSqsMissing()) {
+      ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })
     }
   }
 }
diff --git a/packages/worker/src/api/routes/system/tests/environment.spec.ts b/packages/worker/src/api/routes/system/tests/environment.spec.ts
index 2efbfa07c9..dbe9be7374 100644
--- a/packages/worker/src/api/routes/system/tests/environment.spec.ts
+++ b/packages/worker/src/api/routes/system/tests/environment.spec.ts
@@ -27,6 +27,7 @@ describe("/api/system/environment", () => {
         multiTenancy: true,
         baseUrl: "http://localhost:10000",
         offlineMode: false,
+        maintenance: [],
       })
     })
 
@@ -40,9 +41,7 @@ describe("/api/system/environment", () => {
           multiTenancy: true,
           baseUrl: "http://localhost:10000",
           offlineMode: false,
-          infrastructure: {
-            sqs: false,
-          },
+          maintenance: [],
         })
       })
     })
diff --git a/yarn.lock b/yarn.lock
index 235e28e85e..53bf1ac017 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8242,11 +8242,16 @@ codemirror-spell-checker@1.1.2:
   dependencies:
     typo-js "*"
 
-codemirror@^5.59.0, codemirror@^5.63.1:
+codemirror@^5.63.1:
   version "5.65.12"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.12.tgz#294fdf097d10ac5b56a9e011a91eff252afc73ae"
   integrity sha512-z2jlHBocElRnPYysN2HAuhXbO3DNB0bcSKmNz3hcWR2Js2Dkhc1bEOxG93Z3DeUrnm+qx56XOY5wQmbP5KY0sw==
 
+codemirror@^5.65.16:
+  version "5.65.16"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.16.tgz#efc0661be6bf4988a6a1c2fe6893294638cdb334"
+  integrity sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -13944,6 +13949,11 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-format-highlight@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/json-format-highlight/-/json-format-highlight-1.0.4.tgz#2e44277edabcec79a3d2c84e984c62e2258037b9"
+  integrity sha512-RqenIjKr1I99XfXPAml9G7YlEZg/GnsH7emWyWJh2yuGXqHW8spN7qx6/ME+MoIBb35/fxrMC9Jauj6nvGe4Mg==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"