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/.eslintrc.json b/.eslintrc.json
index ae9512152f..9b4eb7eebb 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -34,18 +34,40 @@
     },
     {
       "files": ["**/*.ts"],
+      "excludedFiles": ["qa-core/**"],
       "parser": "@typescript-eslint/parser",
       "extends": ["eslint:recommended"],
+      "globals": {
+        "NodeJS": true
+      },
+      "rules": {
+        "no-unused-vars": "off",
+        "local-rules/no-budibase-imports": "error"
+      }
+    },
+    {
+      "files": ["**/*.spec.ts"],
+      "excludedFiles": ["qa-core/**"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["jest"],
+      "extends": ["eslint:recommended", "plugin:jest/recommended"],
+      "env": {
+        "jest/globals": true
+      },
+      "globals": {
+        "NodeJS": true
+      },
       "rules": {
         "no-unused-vars": "off",
-        "no-inner-declarations": "off",
-        "no-case-declarations": "off",
-        "no-useless-escape": "off",
-        "no-undef": "off",
-        "no-prototype-builtins": "off",
-        "local-rules/no-budibase-imports": "error",
         "local-rules/no-test-com": "error",
-        "local-rules/email-domain-example-com": "error"
+        "local-rules/email-domain-example-com": "error",
+        "no-console": "warn",
+        // We have a lot of tests that don't have assertions, they use our test
+        // API client that does the assertions for them
+        "jest/expect-expect": "off",
+        // We do this in some tests where the behaviour of internal tables
+        // differs to external, but the API is broadly the same
+        "jest/no-conditional-expect": "off"
       }
     },
     {
diff --git a/.github/workflows/budibase_ci.yml b/.github/workflows/budibase_ci.yml
index 3060660d47..5c474aa826 100644
--- a/.github/workflows/budibase_ci.yml
+++ b/.github/workflows/budibase_ci.yml
@@ -107,9 +107,9 @@ jobs:
       - name: Test
         run: |
           if ${{ env.USE_NX_AFFECTED }}; then
-            yarn test --ignore=@budibase/worker --ignore=@budibase/server --ignore=@budibase/pro --since=${{ env.NX_BASE_BRANCH }}
+            yarn test --ignore=@budibase/worker --ignore=@budibase/server --since=${{ env.NX_BASE_BRANCH }}
           else
-            yarn test --ignore=@budibase/worker --ignore=@budibase/server --ignore=@budibase/pro
+            yarn test --ignore=@budibase/worker --ignore=@budibase/server
           fi
 
   test-worker:
@@ -160,31 +160,6 @@ jobs:
             yarn test --scope=@budibase/server
           fi
 
-  test-pro:
-    runs-on: ubuntu-latest
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'Budibase/budibase'
-    steps:
-      - name: Checkout repo and submodules
-        uses: actions/checkout@v4
-        with:
-          submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
-          fetch-depth: 0
-
-      - name: Use Node.js 20.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-          cache: yarn
-      - run: yarn --frozen-lockfile
-      - name: Test
-        run: |
-          if ${{ env.USE_NX_AFFECTED }}; then
-            yarn test --scope=@budibase/pro --since=${{ env.NX_BASE_BRANCH }}
-          else
-            yarn test --scope=@budibase/pro
-          fi
-
   integration-test:
     runs-on: ubuntu-latest
     steps:
diff --git a/charts/budibase/README.md b/charts/budibase/README.md
index 342011bdb1..dea7d1dbae 100644
--- a/charts/budibase/README.md
+++ b/charts/budibase/README.md
@@ -140,7 +140,7 @@ $ helm install --create-namespace --namespace budibase budibase . -f values.yaml
 | ingress.className | string | `""` | What ingress class to use. |
 | ingress.enabled | bool | `true` | Whether to create an Ingress resource pointing to the Budibase proxy. |
 | ingress.hosts | list | `[]` | Standard hosts block for the Ingress resource. Defaults to pointing to the Budibase proxy. |
-| nameOverride | string | `""` | Override the name of the deploymen. Defaults to {{ .Chart.Name }}. |
+| nameOverride | string | `""` | Override the name of the deployment. Defaults to {{ .Chart.Name }}. |
 | service.port | int | `10000` | Port to expose on the service. |
 | service.type | string | `"ClusterIP"` | Service type for the service that points to the main Budibase proxy pod. |
 | serviceAccount.annotations | object | `{}` | Annotations to add to the service account |
diff --git a/charts/budibase/values.yaml b/charts/budibase/values.yaml
index 09262df463..19b6c22d6c 100644
--- a/charts/budibase/values.yaml
+++ b/charts/budibase/values.yaml
@@ -1,6 +1,6 @@
 # -- Passed to all pods created by this chart. Should not ordinarily need to be changed.
 imagePullSecrets: []
-# -- Override the name of the deploymen. Defaults to {{ .Chart.Name }}.
+# -- Override the name of the deployment. Defaults to {{ .Chart.Name }}.
 nameOverride: ""
 
 serviceAccount:
diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js
index 177b0a129c..a4866bc1f8 100644
--- a/eslint-local-rules/index.js
+++ b/eslint-local-rules/index.js
@@ -7,11 +7,12 @@ module.exports = {
 
           if (
             /^@budibase\/[^/]+\/.*$/.test(importPath) &&
-            importPath !== "@budibase/backend-core/tests"
+            importPath !== "@budibase/backend-core/tests" &&
+            importPath !== "@budibase/string-templates/test/utils"
           ) {
             context.report({
               node,
-              message: `Importing from @budibase is not allowed, except for @budibase/backend-core/tests.`,
+              message: `Importing from @budibase is not allowed, except for @budibase/backend-core/tests and @budibase/string-templates/test/utils.`,
             })
           }
         },
@@ -24,11 +25,9 @@ module.exports = {
       docs: {
         description:
           "disallow the use of 'test.com' in strings and replace it with 'example.com'",
-        category: "Possible Errors",
-        recommended: false,
       },
-      schema: [], // no options
-      fixable: "code", // Indicates that this rule supports automatic fixing
+      schema: [],
+      fixable: "code",
     },
     create: function (context) {
       return {
@@ -57,8 +56,6 @@ module.exports = {
       docs: {
         description:
           "enforce using the example.com domain for generator.email calls",
-        category: "Possible Errors",
-        recommended: false,
       },
       fixable: "code",
       schema: [],
diff --git a/hosting/single/Dockerfile b/hosting/single/Dockerfile
index ee98b0729d..be01056b53 100644
--- a/hosting/single/Dockerfile
+++ b/hosting/single/Dockerfile
@@ -12,8 +12,6 @@ COPY .yarnrc .
 
 COPY packages/server/package.json packages/server/package.json
 COPY packages/worker/package.json packages/worker/package.json
-# string-templates does not get bundled during the esbuild process, so we want to use the local version
-COPY packages/string-templates/package.json packages/string-templates/package.json
 
 
 COPY scripts/removeWorkspaceDependencies.sh scripts/removeWorkspaceDependencies.sh
@@ -26,7 +24,7 @@ RUN ./scripts/removeWorkspaceDependencies.sh packages/worker/package.json
 RUN echo '' > scripts/syncProPackage.js
 RUN jq 'del(.scripts.postinstall)' package.json > temp.json && mv temp.json package.json
 RUN ./scripts/removeWorkspaceDependencies.sh package.json
-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production
+RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production --frozen-lockfile
 
 # copy the actual code
 COPY packages/server/dist packages/server/dist
@@ -35,7 +33,6 @@ COPY packages/server/client packages/server/client
 COPY packages/server/builder packages/server/builder
 COPY packages/worker/dist packages/worker/dist
 COPY packages/worker/pm2.config.js packages/worker/pm2.config.js
-COPY packages/string-templates packages/string-templates
 
 
 FROM budibase/couchdb:v3.3.3 as runner
@@ -52,11 +49,11 @@ RUN apt-get update && \
 
 # Install postgres client for pg_dump utils
 RUN apt install -y software-properties-common apt-transport-https ca-certificates gnupg \
-    && curl -fsSl https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor | tee /usr/share/keyrings/postgresql.gpg > /dev/null \
-    && echo deb [arch=amd64,arm64,ppc64el signed-by=/usr/share/keyrings/postgresql.gpg] http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main | tee /etc/apt/sources.list.d/postgresql.list \
-    && apt update -y \
-    && apt install postgresql-client-15 -y \
-    && apt remove software-properties-common apt-transport-https gpg -y
+  && curl -fsSl https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor | tee /usr/share/keyrings/postgresql.gpg > /dev/null \
+  && echo deb [arch=amd64,arm64,ppc64el signed-by=/usr/share/keyrings/postgresql.gpg] http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main | tee /etc/apt/sources.list.d/postgresql.list \
+  && apt update -y \
+  && apt install postgresql-client-15 -y \
+  && apt remove software-properties-common apt-transport-https gpg -y
 
 # We use pm2 in order to run multiple node processes in a single container
 RUN npm install --global pm2
@@ -100,9 +97,6 @@ COPY --from=build /app/node_modules /node_modules
 COPY --from=build /app/package.json /package.json
 COPY --from=build /app/packages/server /app
 COPY --from=build /app/packages/worker /worker
-COPY --from=build /app/packages/string-templates /string-templates
-
-RUN cd /string-templates && yarn link && cd ../app && yarn link @budibase/string-templates && cd ../worker && yarn link @budibase/string-templates
 
 
 EXPOSE 80
diff --git a/lerna.json b/lerna.json
index b845465de5..341efc0cad 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.21.8",
+  "version": "2.22.5",
   "npmClient": "yarn",
   "packages": [
     "packages/*",
diff --git a/package.json b/package.json
index 0a20f01d52..af7aac0025 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "esbuild-node-externals": "^1.8.0",
     "eslint": "^8.52.0",
     "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-local-rules": "^2.0.0",
     "eslint-plugin-svelte": "^2.34.0",
     "husky": "^8.0.3",
diff --git a/packages/account-portal b/packages/account-portal
index 0c050591c2..6465dc9c2a 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 0c050591c21d3b67dc0c9225d60cc9e2324c8dac
+Subproject commit 6465dc9c2a38e1380b32204cad4ae0c1f33e065a
diff --git a/packages/backend-core/scripts/test.sh b/packages/backend-core/scripts/test.sh
index 7d19ec96cc..b9937e3a4a 100644
--- a/packages/backend-core/scripts/test.sh
+++ b/packages/backend-core/scripts/test.sh
@@ -4,10 +4,10 @@ set -e
 if [[ -n $CI ]]
 then
   # --runInBand performs better in ci where resources are limited
-  echo "jest --coverage --runInBand --forceExit"
-  jest --coverage --runInBand --forceExit
+  echo "jest --coverage --runInBand --forceExit $@"
+  jest --coverage --runInBand --forceExit $@
 else
   # --maxWorkers performs better in development
-  echo "jest --coverage --detectOpenHandles"
-  jest --coverage --detectOpenHandles
+  echo "jest --coverage --forceExit --detectOpenHandles $@"
+  jest --coverage --forceExit --detectOpenHandles $@
 fi
\ No newline at end of file
diff --git a/packages/backend-core/src/auth/auth.ts b/packages/backend-core/src/auth/auth.ts
index 1951c7986c..87ac46cf1c 100644
--- a/packages/backend-core/src/auth/auth.ts
+++ b/packages/backend-core/src/auth/auth.ts
@@ -133,7 +133,7 @@ export async function refreshOAuthToken(
   configId?: string
 ): Promise<RefreshResponse> {
   switch (providerType) {
-    case SSOProviderType.OIDC:
+    case SSOProviderType.OIDC: {
       if (!configId) {
         return { err: { data: "OIDC config id not provided" } }
       }
@@ -142,12 +142,14 @@ export async function refreshOAuthToken(
         return { err: { data: "OIDC configuration not found" } }
       }
       return refreshOIDCAccessToken(oidcConfig, refreshToken)
-    case SSOProviderType.GOOGLE:
+    }
+    case SSOProviderType.GOOGLE: {
       let googleConfig = await configs.getGoogleConfig()
       if (!googleConfig) {
         return { err: { data: "Google configuration not found" } }
       }
       return refreshGoogleAccessToken(googleConfig, refreshToken)
+    }
   }
 }
 
diff --git a/packages/backend-core/src/auth/tests/auth.spec.ts b/packages/backend-core/src/auth/tests/auth.spec.ts
index 3ae691be58..a80e1ea739 100644
--- a/packages/backend-core/src/auth/tests/auth.spec.ts
+++ b/packages/backend-core/src/auth/tests/auth.spec.ts
@@ -8,7 +8,7 @@ describe("platformLogout", () => {
     await testEnv.withTenant(async () => {
       const ctx = structures.koa.newContext()
       await auth.platformLogout({ ctx, userId: "test" })
-      expect(events.auth.logout).toBeCalledTimes(1)
+      expect(events.auth.logout).toHaveBeenCalledTimes(1)
     })
   })
 })
diff --git a/packages/backend-core/src/cache/docWritethrough.ts b/packages/backend-core/src/cache/docWritethrough.ts
index 1b129bb26a..05f13a0d91 100644
--- a/packages/backend-core/src/cache/docWritethrough.ts
+++ b/packages/backend-core/src/cache/docWritethrough.ts
@@ -1,6 +1,6 @@
 import { AnyDocument, Database } from "@budibase/types"
 
-import { JobQueue, createQueue } from "../queue"
+import { JobQueue, Queue, createQueue } from "../queue"
 import * as dbUtils from "../db"
 
 interface ProcessDocMessage {
@@ -12,18 +12,26 @@ interface ProcessDocMessage {
 const PERSIST_MAX_ATTEMPTS = 100
 let processor: DocWritethroughProcessor | undefined
 
-export const docWritethroughProcessorQueue = createQueue<ProcessDocMessage>(
-  JobQueue.DOC_WRITETHROUGH_QUEUE,
-  {
-    jobOptions: {
-      attempts: PERSIST_MAX_ATTEMPTS,
-    },
-  }
-)
+export class DocWritethroughProcessor {
+  private static _queue: Queue
+
+  public static get queue() {
+    if (!DocWritethroughProcessor._queue) {
+      DocWritethroughProcessor._queue = createQueue<ProcessDocMessage>(
+        JobQueue.DOC_WRITETHROUGH_QUEUE,
+        {
+          jobOptions: {
+            attempts: PERSIST_MAX_ATTEMPTS,
+          },
+        }
+      )
+    }
+
+    return DocWritethroughProcessor._queue
+  }
 
-class DocWritethroughProcessor {
   init() {
-    docWritethroughProcessorQueue.process(async message => {
+    DocWritethroughProcessor.queue.process(async message => {
       try {
         await this.persistToDb(message.data)
       } catch (err: any) {
@@ -76,7 +84,7 @@ export class DocWritethrough {
   }
 
   async patch(data: Record<string, any>) {
-    await docWritethroughProcessorQueue.add({
+    await DocWritethroughProcessor.queue.add({
       dbName: this.db.name,
       docId: this.docId,
       data,
diff --git a/packages/backend-core/src/cache/tests/docWritethrough.spec.ts b/packages/backend-core/src/cache/tests/docWritethrough.spec.ts
index 5fe09b95ff..47b3f0672f 100644
--- a/packages/backend-core/src/cache/tests/docWritethrough.spec.ts
+++ b/packages/backend-core/src/cache/tests/docWritethrough.spec.ts
@@ -6,7 +6,7 @@ import { getDB } from "../../db"
 
 import {
   DocWritethrough,
-  docWritethroughProcessorQueue,
+  DocWritethroughProcessor,
   init,
 } from "../docWritethrough"
 
@@ -15,7 +15,7 @@ import InMemoryQueue from "../../queue/inMemoryQueue"
 const initialTime = Date.now()
 
 async function waitForQueueCompletion() {
-  const queue: InMemoryQueue = docWritethroughProcessorQueue as never
+  const queue: InMemoryQueue = DocWritethroughProcessor.queue as never
   await queue.waitForCompletion()
 }
 
@@ -32,7 +32,7 @@ describe("docWritethrough", () => {
 
   describe("patch", () => {
     function generatePatchObject(fieldCount: number) {
-      const keys = generator.unique(() => generator.word(), fieldCount)
+      const keys = generator.unique(() => generator.guid(), fieldCount)
       return keys.reduce((acc, c) => {
         acc[c] = generator.word()
         return acc
@@ -235,11 +235,11 @@ describe("docWritethrough", () => {
           return acc
         }, {})
       }
-      const queueMessageSpy = jest.spyOn(docWritethroughProcessorQueue, "add")
+      const queueMessageSpy = jest.spyOn(DocWritethroughProcessor.queue, "add")
 
       await config.doInTenant(async () => {
         let patches = await parallelPatch(5)
-        expect(queueMessageSpy).toBeCalledTimes(5)
+        expect(queueMessageSpy).toHaveBeenCalledTimes(5)
 
         await waitForQueueCompletion()
         expect(await db.get(documentId)).toEqual(
@@ -247,7 +247,7 @@ describe("docWritethrough", () => {
         )
 
         patches = { ...patches, ...(await parallelPatch(40)) }
-        expect(queueMessageSpy).toBeCalledTimes(45)
+        expect(queueMessageSpy).toHaveBeenCalledTimes(45)
 
         await waitForQueueCompletion()
         expect(await db.get(documentId)).toEqual(
@@ -255,7 +255,7 @@ describe("docWritethrough", () => {
         )
 
         patches = { ...patches, ...(await parallelPatch(10)) }
-        expect(queueMessageSpy).toBeCalledTimes(55)
+        expect(queueMessageSpy).toHaveBeenCalledTimes(55)
 
         await waitForQueueCompletion()
         expect(await db.get(documentId)).toEqual(
@@ -265,6 +265,7 @@ describe("docWritethrough", () => {
     })
 
     // This is not yet supported
+    // eslint-disable-next-line jest/no-disabled-tests
     it.skip("patches will execute in order", async () => {
       let incrementalValue = 0
       const keyToOverride = generator.word()
diff --git a/packages/backend-core/src/cache/tests/user.spec.ts b/packages/backend-core/src/cache/tests/user.spec.ts
index 80e5bc3063..49a8d51c16 100644
--- a/packages/backend-core/src/cache/tests/user.spec.ts
+++ b/packages/backend-core/src/cache/tests/user.spec.ts
@@ -55,8 +55,8 @@ describe("user cache", () => {
         })),
       })
 
-      expect(UserDB.bulkGet).toBeCalledTimes(1)
-      expect(UserDB.bulkGet).toBeCalledWith(userIdsToRequest)
+      expect(UserDB.bulkGet).toHaveBeenCalledTimes(1)
+      expect(UserDB.bulkGet).toHaveBeenCalledWith(userIdsToRequest)
     })
 
     it("on a second all, all of them are retrieved from cache", async () => {
@@ -82,7 +82,7 @@ describe("user cache", () => {
         ),
       })
 
-      expect(UserDB.bulkGet).toBeCalledTimes(1)
+      expect(UserDB.bulkGet).toHaveBeenCalledTimes(1)
     })
 
     it("when some users are cached, only the missing ones are retrieved from db", async () => {
@@ -110,8 +110,8 @@ describe("user cache", () => {
         ),
       })
 
-      expect(UserDB.bulkGet).toBeCalledTimes(1)
-      expect(UserDB.bulkGet).toBeCalledWith([
+      expect(UserDB.bulkGet).toHaveBeenCalledTimes(1)
+      expect(UserDB.bulkGet).toHaveBeenCalledWith([
         userIdsToRequest[1],
         userIdsToRequest[2],
         userIdsToRequest[4],
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/tests/index.spec.ts b/packages/backend-core/src/context/tests/index.spec.ts
index cfc820e169..2d89131549 100644
--- a/packages/backend-core/src/context/tests/index.spec.ts
+++ b/packages/backend-core/src/context/tests/index.spec.ts
@@ -246,7 +246,7 @@ describe("context", () => {
           context.doInAppMigrationContext(db.generateAppID(), async () => {
             await otherContextCall()
           })
-        ).rejects.toThrowError(
+        ).rejects.toThrow(
           "The context cannot be changed, a migration is currently running"
         )
       }
diff --git a/packages/backend-core/src/context/types.ts b/packages/backend-core/src/context/types.ts
index 6fb9f44fad..f297d3089f 100644
--- a/packages/backend-core/src/context/types.ts
+++ b/packages/backend-core/src/context/types.ts
@@ -1,5 +1,4 @@
-import { IdentityContext, VM } from "@budibase/types"
-import { ExecutionTimeTracker } from "../timers"
+import { IdentityContext, Snippet, VM } from "@budibase/types"
 
 // keep this out of Budibase types, don't want to expose context info
 export type ContextMap = {
@@ -10,6 +9,7 @@ export type ContextMap = {
   isScim?: boolean
   automationId?: string
   isMigrating?: boolean
-  jsExecutionTracker?: ExecutionTimeTracker
   vm?: VM
+  cleanup?: (() => void | Promise<void>)[]
+  snippets?: Snippet[]
 }
diff --git a/packages/backend-core/src/db/lucene.ts b/packages/backend-core/src/db/lucene.ts
index f982ee67d0..7055ec8031 100644
--- a/packages/backend-core/src/db/lucene.ts
+++ b/packages/backend-core/src/db/lucene.ts
@@ -247,7 +247,7 @@ export class QueryBuilder<T> {
     }
     // Escape characters
     if (!this.#noEscaping && escape && originalType === "string") {
-      value = `${value}`.replace(/[ \/#+\-&|!(){}\]^"~*?:\\]/g, "\\$&")
+      value = `${value}`.replace(/[ /#+\-&|!(){}\]^"~*?:\\]/g, "\\$&")
     }
 
     // Wrap in quotes
diff --git a/packages/backend-core/src/db/searchIndexes/searchIndexes.ts b/packages/backend-core/src/db/searchIndexes/searchIndexes.ts
index b953e3516e..8742d405f2 100644
--- a/packages/backend-core/src/db/searchIndexes/searchIndexes.ts
+++ b/packages/backend-core/src/db/searchIndexes/searchIndexes.ts
@@ -34,12 +34,12 @@ export async function createUserIndex() {
         }
         let idxKey = prev != null ? `${prev}.${key}` : key
         if (typeof input[key] === "string") {
+          // @ts-expect-error index is available in a CouchDB map function
           // eslint-disable-next-line no-undef
-          // @ts-ignore
           index(idxKey, input[key].toLowerCase(), { facet: true })
         } else if (typeof input[key] !== "object") {
+          // @ts-expect-error index is available in a CouchDB map function
           // eslint-disable-next-line no-undef
-          // @ts-ignore
           index(idxKey, input[key], { facet: true })
         } else {
           idx(input[key], idxKey)
diff --git a/packages/backend-core/src/events/publishers/app.ts b/packages/backend-core/src/events/publishers/app.ts
index d08d59b5f1..af26b09e72 100644
--- a/packages/backend-core/src/events/publishers/app.ts
+++ b/packages/backend-core/src/events/publishers/app.ts
@@ -13,6 +13,7 @@ import {
   AppVersionRevertedEvent,
   AppRevertedEvent,
   AppExportedEvent,
+  AppDuplicatedEvent,
 } from "@budibase/types"
 
 const created = async (app: App, timestamp?: string | number) => {
@@ -77,6 +78,17 @@ async function fileImported(app: App) {
   await publishEvent(Event.APP_FILE_IMPORTED, properties)
 }
 
+async function duplicated(app: App, duplicateAppId: string) {
+  const properties: AppDuplicatedEvent = {
+    duplicateAppId,
+    appId: app.appId,
+    audited: {
+      name: app.name,
+    },
+  }
+  await publishEvent(Event.APP_DUPLICATED, properties)
+}
+
 async function templateImported(app: App, templateKey: string) {
   const properties: AppTemplateImportedEvent = {
     appId: app.appId,
@@ -147,6 +159,7 @@ export default {
   published,
   unpublished,
   fileImported,
+  duplicated,
   templateImported,
   versionUpdated,
   versionReverted,
diff --git a/packages/backend-core/src/logging/pino/logger.ts b/packages/backend-core/src/logging/pino/logger.ts
index 7a051e7f12..0a8470a453 100644
--- a/packages/backend-core/src/logging/pino/logger.ts
+++ b/packages/backend-core/src/logging/pino/logger.ts
@@ -10,6 +10,18 @@ import { formats } from "dd-trace/ext"
 
 import { localFileDestination } from "../system"
 
+function isPlainObject(obj: any) {
+  return typeof obj === "object" && obj !== null && !(obj instanceof Error)
+}
+
+function isError(obj: any) {
+  return obj instanceof Error
+}
+
+function isMessage(obj: any) {
+  return typeof obj === "string"
+}
+
 // LOGGER
 
 let pinoInstance: pino.Logger | undefined
@@ -71,23 +83,11 @@ if (!env.DISABLE_PINO_LOGGER) {
     err?: Error
   }
 
-  function isPlainObject(obj: any) {
-    return typeof obj === "object" && obj !== null && !(obj instanceof Error)
-  }
-
-  function isError(obj: any) {
-    return obj instanceof Error
-  }
-
-  function isMessage(obj: any) {
-    return typeof obj === "string"
-  }
-
   /**
    * Backwards compatibility between console logging statements
    * and pino logging requirements.
    */
-  function getLogParams(args: any[]): [MergingObject, string] {
+  const getLogParams = (args: any[]): [MergingObject, string] => {
     let error = undefined
     let objects: any[] = []
     let message = ""
diff --git a/packages/backend-core/src/middleware/matchers.ts b/packages/backend-core/src/middleware/matchers.ts
index efbdec2dbe..8bede1cc6a 100644
--- a/packages/backend-core/src/middleware/matchers.ts
+++ b/packages/backend-core/src/middleware/matchers.ts
@@ -11,7 +11,6 @@ export const buildMatcherRegex = (
   return patterns.map(pattern => {
     let route = pattern.route
     const method = pattern.method
-    const strict = pattern.strict ? pattern.strict : false
 
     // if there is a param in the route
     // use a wildcard pattern
@@ -24,24 +23,17 @@ export const buildMatcherRegex = (
       }
     }
 
-    return { regex: new RegExp(route), method, strict, route }
+    return { regex: new RegExp(route), method, route }
   })
 }
 
 export const matches = (ctx: BBContext, options: RegexMatcher[]) => {
-  return options.find(({ regex, method, strict, route }) => {
-    let urlMatch
-    if (strict) {
-      urlMatch = ctx.request.url === route
-    } else {
-      urlMatch = regex.test(ctx.request.url)
-    }
-
+  return options.find(({ regex, method, route }) => {
+    const urlMatch = regex.test(ctx.request.url)
     const methodMatch =
       method === "ALL"
         ? true
         : ctx.request.method.toLowerCase() === method.toLowerCase()
-
     return urlMatch && methodMatch
   })
 }
diff --git a/packages/backend-core/src/middleware/passport/sso/tests/sso.spec.ts b/packages/backend-core/src/middleware/passport/sso/tests/sso.spec.ts
index d3486a5b14..ea9584c284 100644
--- a/packages/backend-core/src/middleware/passport/sso/tests/sso.spec.ts
+++ b/packages/backend-core/src/middleware/passport/sso/tests/sso.spec.ts
@@ -114,11 +114,11 @@ describe("sso", () => {
           // tenant id added
           ssoUser.tenantId = context.getTenantId()
 
-          expect(mockSaveUser).toBeCalledWith(ssoUser, {
+          expect(mockSaveUser).toHaveBeenCalledWith(ssoUser, {
             hashPassword: false,
             requirePassword: false,
           })
-          expect(mockDone).toBeCalledWith(null, ssoUser)
+          expect(mockDone).toHaveBeenCalledWith(null, ssoUser)
         })
       })
     })
@@ -159,11 +159,11 @@ describe("sso", () => {
           // existing id preserved
           ssoUser._id = existingUser._id
 
-          expect(mockSaveUser).toBeCalledWith(ssoUser, {
+          expect(mockSaveUser).toHaveBeenCalledWith(ssoUser, {
             hashPassword: false,
             requirePassword: false,
           })
-          expect(mockDone).toBeCalledWith(null, ssoUser)
+          expect(mockDone).toHaveBeenCalledWith(null, ssoUser)
         })
       })
 
@@ -187,11 +187,11 @@ describe("sso", () => {
           // existing id preserved
           ssoUser._id = existingUser._id
 
-          expect(mockSaveUser).toBeCalledWith(ssoUser, {
+          expect(mockSaveUser).toHaveBeenCalledWith(ssoUser, {
             hashPassword: false,
             requirePassword: false,
           })
-          expect(mockDone).toBeCalledWith(null, ssoUser)
+          expect(mockDone).toHaveBeenCalledWith(null, ssoUser)
         })
       })
     })
diff --git a/packages/backend-core/src/middleware/tests/builder.spec.ts b/packages/backend-core/src/middleware/tests/builder.spec.ts
index 0514dc13f0..0f35b0b833 100644
--- a/packages/backend-core/src/middleware/tests/builder.spec.ts
+++ b/packages/backend-core/src/middleware/tests/builder.spec.ts
@@ -24,13 +24,13 @@ function buildUserCtx(user: ContextUser) {
 }
 
 function passed(throwFn: jest.Func, nextFn: jest.Func) {
-  expect(throwFn).not.toBeCalled()
-  expect(nextFn).toBeCalled()
+  expect(throwFn).not.toHaveBeenCalled()
+  expect(nextFn).toHaveBeenCalled()
 }
 
 function threw(throwFn: jest.Func) {
   // cant check next, the throw function doesn't actually throw - so it still continues
-  expect(throwFn).toBeCalled()
+  expect(throwFn).toHaveBeenCalled()
 }
 
 describe("adminOnly middleware", () => {
diff --git a/packages/backend-core/src/middleware/tests/matchers.spec.ts b/packages/backend-core/src/middleware/tests/matchers.spec.ts
index c39bbb6dd3..1b79db2e68 100644
--- a/packages/backend-core/src/middleware/tests/matchers.spec.ts
+++ b/packages/backend-core/src/middleware/tests/matchers.spec.ts
@@ -34,23 +34,6 @@ describe("matchers", () => {
     expect(!!matchers.matches(ctx, built)).toBe(true)
   })
 
-  it("doesn't wildcard path with strict", () => {
-    const pattern = [
-      {
-        route: "/api/tests",
-        method: "POST",
-        strict: true,
-      },
-    ]
-    const ctx = structures.koa.newContext()
-    ctx.request.url = "/api/tests/id/something/else"
-    ctx.request.method = "POST"
-
-    const built = matchers.buildMatcherRegex(pattern)
-
-    expect(!!matchers.matches(ctx, built)).toBe(false)
-  })
-
   it("matches with param", () => {
     const pattern = [
       {
@@ -67,23 +50,6 @@ describe("matchers", () => {
     expect(!!matchers.matches(ctx, built)).toBe(true)
   })
 
-  // TODO: Support the below behaviour
-  // Strict does not work when a param is present
-  // it("matches with param with strict", () => {
-  //   const pattern = [{
-  //     route: "/api/tests/:testId",
-  //     method: "GET",
-  //     strict: true
-  //   }]
-  //   const ctx = structures.koa.newContext()
-  //   ctx.request.url = "/api/tests/id"
-  //   ctx.request.method = "GET"
-  //
-  //   const built = matchers.buildMatcherRegex(pattern)
-  //
-  //   expect(!!matchers.matches(ctx, built)).toBe(true)
-  // })
-
   it("doesn't match by path", () => {
     const pattern = [
       {
diff --git a/packages/backend-core/src/queue/inMemoryQueue.ts b/packages/backend-core/src/queue/inMemoryQueue.ts
index afb5592562..f10194b8cf 100644
--- a/packages/backend-core/src/queue/inMemoryQueue.ts
+++ b/packages/backend-core/src/queue/inMemoryQueue.ts
@@ -39,7 +39,7 @@ class InMemoryQueue implements Partial<Queue> {
   _opts?: QueueOptions
   _messages: JobMessage[]
   _queuedJobIds: Set<string>
-  _emitter: EventEmitter
+  _emitter: NodeJS.EventEmitter
   _runCount: number
   _addCount: number
 
diff --git a/packages/backend-core/src/redis/tests/redis.spec.ts b/packages/backend-core/src/redis/tests/redis.spec.ts
index c2c9e4a14e..e2076ad698 100644
--- a/packages/backend-core/src/redis/tests/redis.spec.ts
+++ b/packages/backend-core/src/redis/tests/redis.spec.ts
@@ -147,17 +147,6 @@ describe("redis", () => {
       expect(results).toEqual([1, 2, 3, 4, 5])
     })
 
-    it("can increment on a new key", async () => {
-      const key1 = structures.uuid()
-      const key2 = structures.uuid()
-
-      const result1 = await redis.increment(key1)
-      expect(result1).toBe(1)
-
-      const result2 = await redis.increment(key2)
-      expect(result2).toBe(1)
-    })
-
     it("can increment multiple times in parallel", async () => {
       const key = structures.uuid()
       const results = await Promise.all(
@@ -184,7 +173,7 @@ describe("redis", () => {
       const key = structures.uuid()
       await redis.store(key, value)
 
-      await expect(redis.increment(key)).rejects.toThrowError(
+      await expect(redis.increment(key)).rejects.toThrow(
         "ERR value is not an integer or out of range"
       )
     })
diff --git a/packages/backend-core/src/redis/tests/redlockImpl.spec.ts b/packages/backend-core/src/redis/tests/redlockImpl.spec.ts
index a1e83d8e6c..e647b63bf5 100644
--- a/packages/backend-core/src/redis/tests/redlockImpl.spec.ts
+++ b/packages/backend-core/src/redis/tests/redlockImpl.spec.ts
@@ -96,8 +96,8 @@ describe("redlockImpl", () => {
             task: mockTask,
             executionTimeMs: lockTtl * 2,
           })
-        ).rejects.toThrowError(
-          `Unable to fully release the lock on resource \"lock:${config.tenantId}_persist_writethrough\".`
+        ).rejects.toThrow(
+          `Unable to fully release the lock on resource "lock:${config.tenantId}_persist_writethrough".`
         )
       }
     )
diff --git a/packages/backend-core/src/tenancy/tests/tenancy.spec.ts b/packages/backend-core/src/tenancy/tests/tenancy.spec.ts
index 95dd76a6dd..34e9f87064 100644
--- a/packages/backend-core/src/tenancy/tests/tenancy.spec.ts
+++ b/packages/backend-core/src/tenancy/tests/tenancy.spec.ts
@@ -158,8 +158,8 @@ describe("getTenantIDFromCtx", () => {
         ],
       }
       expect(getTenantIDFromCtx(ctx, mockOpts)).toBeUndefined()
-      expect(ctx.throw).toBeCalledTimes(1)
-      expect(ctx.throw).toBeCalledWith(403, "Tenant id not set")
+      expect(ctx.throw).toHaveBeenCalledTimes(1)
+      expect(ctx.throw).toHaveBeenCalledWith(403, "Tenant id not set")
     })
 
     it("returns undefined if allowNoTenant is true", () => {
diff --git a/packages/backend-core/src/timers/timers.ts b/packages/backend-core/src/timers/timers.ts
index 9121c576cd..000be74821 100644
--- a/packages/backend-core/src/timers/timers.ts
+++ b/packages/backend-core/src/timers/timers.ts
@@ -20,41 +20,3 @@ export function cleanup() {
   }
   intervals = []
 }
-
-export class ExecutionTimeoutError extends Error {
-  public readonly name = "ExecutionTimeoutError"
-}
-
-export class ExecutionTimeTracker {
-  static withLimit(limitMs: number) {
-    return new ExecutionTimeTracker(limitMs)
-  }
-
-  constructor(readonly limitMs: number) {}
-
-  private totalTimeMs = 0
-
-  track<T>(f: () => T): T {
-    this.checkLimit()
-    const start = process.hrtime.bigint()
-    try {
-      return f()
-    } finally {
-      const end = process.hrtime.bigint()
-      this.totalTimeMs += Number(end - start) / 1e6
-      this.checkLimit()
-    }
-  }
-
-  get elapsedMS() {
-    return this.totalTimeMs
-  }
-
-  checkLimit() {
-    if (this.totalTimeMs > this.limitMs) {
-      throw new ExecutionTimeoutError(
-        `Execution time limit of ${this.limitMs}ms exceeded: ${this.totalTimeMs}ms`
-      )
-    }
-  }
-}
diff --git a/packages/backend-core/tests/core/utilities/mocks/events.ts b/packages/backend-core/tests/core/utilities/mocks/events.ts
index fef730768a..96f351de10 100644
--- a/packages/backend-core/tests/core/utilities/mocks/events.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/events.ts
@@ -15,6 +15,7 @@ beforeAll(async () => {
 
   jest.spyOn(events.app, "created")
   jest.spyOn(events.app, "updated")
+  jest.spyOn(events.app, "duplicated")
   jest.spyOn(events.app, "deleted")
   jest.spyOn(events.app, "published")
   jest.spyOn(events.app, "unpublished")
diff --git a/packages/backend-core/tests/core/utilities/structures/userGroups.ts b/packages/backend-core/tests/core/utilities/structures/userGroups.ts
index 4dc870a00a..4af3f72e51 100644
--- a/packages/backend-core/tests/core/utilities/structures/userGroups.ts
+++ b/packages/backend-core/tests/core/utilities/structures/userGroups.ts
@@ -3,7 +3,7 @@ import { generator } from "./generator"
 
 export function userGroup(): UserGroup {
   return {
-    name: generator.word(),
+    name: generator.guid(),
     icon: generator.word(),
     color: generator.word(),
   }
diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index 642ec4932a..c55d1cb43d 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -38,7 +38,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} on:open on:close>
   <Menu>
     <slot />
   </Menu>
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/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 2bd95df516..3d803c0961 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -197,7 +197,9 @@
         >
           <Icon name="ChevronRight" />
         </div>
-        <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+        {#if maximum !== 1}
+          <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+        {/if}
       </div>
     {:else if value?.length}
       {#each value as file}
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 275c339bf4..e293bd408b 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,58 +1,54 @@
-<script context="module">
-  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
-</script>
-
 <script>
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import { fade } from "svelte/transition"
+  import {
+    default as AbsTooltip,
+    TooltipPosition,
+    TooltipType,
+  } from "../Tooltip/AbsTooltip.svelte"
 
-  export let direction = "n"
   export let name = "Add"
   export let hidden = false
   export let size = "M"
   export let hoverable = false
   export let disabled = false
   export let color
+  export let hoverColor
   export let tooltip
-
-  $: rotation = getRotation(direction)
-
-  let showTooltip = false
-
-  const getRotation = direction => {
-    return directions.indexOf(direction) * 45
-  }
+  export let tooltipPosition = TooltipPosition.Bottom
+  export let tooltipType = TooltipType.Default
+  export let tooltipColor
+  export let tooltipWrap = true
+  export let newStyles = false
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="icon"
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click={() => (showTooltip = false)}
+<AbsTooltip
+  text={tooltip}
+  type={tooltipType}
+  position={tooltipPosition}
+  color={tooltipColor}
+  noWrap={tooltipWrap}
 >
-  <svg
-    on:click
-    class:hoverable
-    class:disabled
-    class="spectrum-Icon spectrum-Icon--size{size}"
-    focusable="false"
-    aria-hidden={hidden}
-    aria-label={name}
-    style={`transform: rotate(${rotation}deg); ${
-      color ? `color: ${color};` : ""
-    }`}
-  >
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
-  </svg>
-  {#if tooltip && showTooltip}
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction="top" text={tooltip} />
-    </div>
-  {/if}
-</div>
+  <div class="icon" class:newStyles>
+    <svg
+      on:click
+      class:hoverable
+      class:disabled
+      class="spectrum-Icon spectrum-Icon--size{size}"
+      focusable="false"
+      aria-hidden={hidden}
+      aria-label={name}
+      style={`${color ? `color: ${color};` : ""} ${
+        hoverColor
+          ? `--hover-color: ${hoverColor}`
+          : "--hover-color: var(--spectrum-alias-icon-color-selected-hover)"
+      }`}
+    >
+      <use
+        style="pointer-events: none;"
+        xlink:href="#spectrum-icon-18-{name}"
+      />
+    </svg>
+  </div>
+</AbsTooltip>
 
 <style>
   .icon {
@@ -60,19 +56,25 @@
     display: grid;
     place-items: center;
   }
+  .newStyles {
+    color: var(--spectrum-global-color-gray-700);
+  }
 
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover) !important;
+    color: var(--hover-color) !important;
     cursor: pointer;
   }
   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/bbui/src/Tooltip/AbsTooltip.svelte b/packages/bbui/src/Tooltip/AbsTooltip.svelte
index d26c73d1c1..4d2399aaf8 100644
--- a/packages/bbui/src/Tooltip/AbsTooltip.svelte
+++ b/packages/bbui/src/Tooltip/AbsTooltip.svelte
@@ -24,6 +24,7 @@
   export let text = ""
   export let fixed = false
   export let color = null
+  export let noWrap = false
 
   let wrapper
   let hovered = false
@@ -105,6 +106,7 @@
   <Portal target=".spectrum">
     <span
       class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+      class:noWrap
       style={`left:${left}px;top:${top}px;${tooltipStyle}`}
       transition:fade|local={{ duration: 130 }}
     >
@@ -118,6 +120,9 @@
   .abs-tooltip {
     display: contents;
   }
+  .spectrum-Tooltip.noWrap .spectrum-Tooltip-label {
+    width: max-content;
+  }
   .spectrum-Tooltip {
     position: absolute;
     z-index: 9999;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index cda6b5acbf..d18c4d6910 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -19,7 +19,7 @@ export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
-export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
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..f6a4f29a06 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) {
@@ -479,7 +470,7 @@
       newError.name = `Column name already in use.`
     }
 
-    if (fieldInfo.type === "auto" && !fieldInfo.subtype) {
+    if (fieldInfo.type === FieldType.AUTO && !fieldInfo.subtype) {
       newError.subtype = `Auto Column requires a type`
     }
 
@@ -540,18 +531,18 @@
     }}
   />
 
-  {#if editableColumn.type === "string"}
+  {#if editableColumn.type === FieldType.STRING}
     <Input
       type="number"
       label="Max Length"
       bind:value={editableColumn.constraints.length.maximum}
     />
-  {:else if editableColumn.type === "options"}
+  {:else if editableColumn.type === FieldType.OPTIONS}
     <OptionSelectDnD
       bind:constraints={editableColumn.constraints}
       bind:optionColors={editableColumn.optionColors}
     />
-  {:else if editableColumn.type === "longform"}
+  {:else if editableColumn.type === FieldType.LONGFORM}
     <div>
       <div class="tooltip-alignment">
         <Label size="M">Formatting</Label>
@@ -569,12 +560,12 @@
         text="Enable rich text support (markdown)"
       />
     </div>
-  {:else if editableColumn.type === "array"}
+  {:else if editableColumn.type === FieldType.ARRAY}
     <OptionSelectDnD
       bind:constraints={editableColumn.constraints}
       bind:optionColors={editableColumn.optionColors}
     />
-  {:else if editableColumn.type === "datetime" && !editableColumn.autocolumn}
+  {:else if editableColumn.type === FieldType.DATETIME && !editableColumn.autocolumn}
     <div class="split-label">
       <div class="label-length">
         <Label size="M">Earliest</Label>
@@ -613,7 +604,7 @@
       </div>
     {/if}
     <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
-  {:else if editableColumn.type === "number" && !editableColumn.autocolumn}
+  {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
     <div class="split-label">
       <div class="label-length">
         <Label size="M">Min Value</Label>
@@ -638,7 +629,7 @@
         />
       </div>
     </div>
-  {:else if editableColumn.type === "link"}
+  {:else if editableColumn.type === FieldType.LINK}
     <RelationshipSelector
       bind:relationshipPart1
       bind:relationshipPart2
@@ -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>
@@ -710,6 +703,24 @@
       thin
       text="Allow multiple users"
     />
+  {:else if editableColumn.type === FieldType.ATTACHMENT}
+    <Toggle
+      value={editableColumn.constraints?.length?.maximum !== 1}
+      on:change={e => {
+        if (!e.detail) {
+          editableColumn.constraints ??= { length: {} }
+          editableColumn.constraints.length ??= {}
+          editableColumn.constraints.length.maximum = 1
+          editableColumn.constraints.length.message =
+            "cannot contain multiple files"
+        } else {
+          delete editableColumn.constraints?.length?.maximum
+          delete editableColumn.constraints?.length?.message
+        }
+      }}
+      thin
+      text="Allow multiple"
+    />
   {/if}
   {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
     <Select
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/NavHeader.svelte b/packages/builder/src/components/common/NavHeader.svelte
index a163f354d2..2c67a3f9b3 100644
--- a/packages/builder/src/components/common/NavHeader.svelte
+++ b/packages/builder/src/components/common/NavHeader.svelte
@@ -59,7 +59,7 @@
     class="searchButton"
     class:hide={search}
   >
-    <Icon size="S" name="Search" />
+    <Icon size="S" name="Search" hoverable hoverColor="var(--ink)" />
   </div>
 
   <div
@@ -68,7 +68,7 @@
     class="addButton"
     class:rotate={search}
   >
-    <Icon name="Add" />
+    <Icon name="Add" hoverable hoverColor="var(--ink)" />
   </div>
 </div>
 
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 0819bcb86b..66b21e95a1 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -8,6 +8,7 @@
   export let iconTooltip
   export let withArrow = false
   export let withActions = true
+  export let showActions = false
   export let indentLevel = 0
   export let text
   export let border = true
@@ -68,6 +69,8 @@
   class:border
   class:selected
   class:withActions
+  class:showActions
+  class:actionsOpen={highlighted && withActions}
   class:scrollable
   class:highlighted
   class:selectedBy
@@ -168,8 +171,10 @@
     --avatars-background: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions,
-  .hovering .actions {
-    visibility: visible;
+  .hovering .actions,
+  .nav-item.withActions.actionsOpen .actions,
+  .nav-item.withActions.showActions .actions {
+    opacity: 1;
   }
   .nav-item-content {
     flex: 1 1 auto;
@@ -272,7 +277,6 @@
     position: relative;
     display: grid;
     place-items: center;
-    visibility: hidden;
     order: 3;
     opacity: 0;
     width: 20px;
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/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 72622d0a86..1fa4fc7cd6 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -19,7 +19,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import analytics, { Events, EventSource } from "analytics"
   import { API } from "api"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import {
     previewStore,
     builderStore,
@@ -46,7 +46,7 @@
   let publishing = false
   let lastOpened
 
-  $: filteredApps = $apps.filter(app => app.devId === application)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
   $: latestDeployments = $deploymentStore
     .filter(deployment => deployment.status === "SUCCESS")
@@ -130,7 +130,7 @@
     }
     try {
       await API.unpublishApp(selectedApp.prodId)
-      await apps.load()
+      await appsStore.load()
       notifications.send("App unpublished", {
         type: "success",
         icon: "GlobeStrike",
@@ -142,7 +142,7 @@
 
   const completePublish = async () => {
     try {
-      await apps.load()
+      await appsStore.load()
       await deploymentStore.load()
     } catch (err) {
       notifications.error("Error refreshing app")
diff --git a/packages/builder/src/components/deploy/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 855f6a0757..75204b55ce 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -2,10 +2,17 @@
   import { Input, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { apps } from "stores/portal"
-  import { appStore } from "stores/builder"
+  import { appsStore } from "stores/portal"
   import { API } from "api"
 
+  export let appId
+  export let appName
+  export let onDeleteSuccess = () => {
+    $goto("/builder")
+  }
+
+  let deleting = false
+
   export const show = () => {
     deletionModal.show()
   }
@@ -17,32 +24,52 @@
   let deletionModal
   let deletionConfirmationAppName
 
+  const copyName = () => {
+    deletionConfirmationAppName = appName
+  }
+
   const deleteApp = async () => {
+    if (!appId) {
+      console.error("No app id provided")
+      return
+    }
+    deleting = true
     try {
-      await API.deleteApp($appStore.appId)
-      apps.load()
+      await API.deleteApp(appId)
+      appsStore.load()
       notifications.success("App deleted successfully")
-      $goto("/builder")
+      onDeleteSuccess()
     } catch (err) {
       notifications.error("Error deleting app")
+      deleting = false
     }
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ConfirmDialog
   bind:this={deletionModal}
   title="Delete app"
   okText="Delete"
   onOk={deleteApp}
   onCancel={() => (deletionConfirmationAppName = null)}
-  disabled={deletionConfirmationAppName !== $appStore.name}
+  disabled={deletionConfirmationAppName !== appName || deleting}
 >
-  Are you sure you want to delete <b>{$appStore.name}</b>?
+  Are you sure you want to delete
+  <span class="app-name" role="button" tabindex={-1} on:click={copyName}>
+    {appName}
+  </span>?
+
   <br />
   Please enter the app name below to confirm.
   <br /><br />
-  <Input
-    bind:value={deletionConfirmationAppName}
-    placeholder={$appStore.name}
-  />
+  <Input bind:value={deletionConfirmationAppName} placeholder={appName} />
 </ConfirmDialog>
+
+<style>
+  .app-name {
+    cursor: pointer;
+    font-weight: bold;
+    display: inline-block;
+  }
+</style>
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/components/portal/licensing/AppLimitModal.svelte b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
index 39f553517e..bdecbcab3d 100644
--- a/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
+++ b/packages/builder/src/components/portal/licensing/AppLimitModal.svelte
@@ -31,17 +31,11 @@
       : null}
   >
     <Body>
-      You are currently on our <span class="free-plan">Free plan</span>. Upgrade
-      to our Pro plan to get unlimited apps and additional features.
+      You have exceeded the app limit for your current plan. Upgrade to get
+      unlimited apps and additional features!
     </Body>
     {#if !$auth.user.accountPortalAccess}
       <Body>Please contact the account holder to upgrade.</Body>
     {/if}
   </ModalContent>
 </Modal>
-
-<style>
-  .free-plan {
-    font-weight: 600;
-  }
-</style>
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 32bddd58a6..6dd4030f3a 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -5,10 +5,14 @@
   import { goto } from "@roxi/routify"
   import { UserAvatars } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
+  import AppRowContext from "./AppRowContext.svelte"
+  import FavouriteAppButton from "pages/builder/portal/apps/FavouriteAppButton.svelte"
 
   export let app
   export let lockedAction
 
+  let actionsOpen = false
+
   $: editing = app.sessions?.length
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
   $: unclickable = !isBuilder && !app.deployed
@@ -42,8 +46,10 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="app-row"
-  on:click={lockedAction || handleDefaultClick}
   class:unclickable
+  class:actionsOpen
+  class:favourite={app.favourite}
+  on:click={lockedAction || handleDefaultClick}
 >
   <div class="title">
     <div class="app-icon">
@@ -74,21 +80,35 @@
     <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
   </div>
 
-  {#if isBuilder}
+  <div class="actions-wrap">
     <div class="app-row-actions">
-      <Button size="S" secondary on:click={lockedAction || goToOverview}>
-        Manage
-      </Button>
-      <Button size="S" primary on:click={lockedAction || goToBuilder}>
-        Edit
-      </Button>
+      {#if isBuilder}
+        <div class="row-action">
+          <Button size="S" secondary on:click={lockedAction || goToBuilder}>
+            Edit
+          </Button>
+        </div>
+        <div class="row-action">
+          <AppRowContext
+            {app}
+            on:open={() => {
+              actionsOpen = true
+            }}
+            on:close={() => {
+              actionsOpen = false
+            }}
+          />
+        </div>
+      {:else}
+        <!-- this can happen if an app builder has app user access to an app -->
+        <Button size="S" secondary>View</Button>
+      {/if}
     </div>
-  {:else if app.deployed}
-    <!-- this can happen if an app builder has app user access to an app -->
-    <div class="app-row-actions">
-      <Button size="S" secondary>View</Button>
+
+    <div class="favourite-icon">
+      <FavouriteAppButton {app} noWrap />
     </div>
-  {/if}
+  </div>
 </div>
 
 <style>
@@ -108,6 +128,16 @@
     border-color: var(--spectrum-global-color-gray-300);
   }
 
+  .app-row .favourite-icon {
+    display: none;
+  }
+
+  .app-row:hover .favourite-icon,
+  .app-row.favourite .favourite-icon,
+  .app-row.actionsOpen .favourite-icon {
+    display: flex;
+  }
+
   .updated {
     color: var(--spectrum-global-color-gray-700);
     display: flex;
@@ -143,11 +173,23 @@
   }
 
   .app-row-actions {
+    display: none;
+  }
+
+  .app-row:hover .app-row-actions,
+  .app-row.actionsOpen .app-row-actions {
     gap: var(--spacing-m);
-    display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
+    display: flex;
+  }
+
+  .actions-wrap {
+    gap: var(--spacing-m);
+    display: flex;
+    justify-content: flex-end;
+    min-height: var(--spectrum-alias-item-height-s);
   }
 
   .name {
diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
new file mode 100644
index 0000000000..031697a187
--- /dev/null
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -0,0 +1,108 @@
+<script>
+  import { ActionMenu, MenuItem, Icon, Modal } from "@budibase/bbui"
+  import DeleteModal from "components/deploy/DeleteModal.svelte"
+  import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
+  import ExportAppModal from "./ExportAppModal.svelte"
+  import DuplicateAppModal from "./DuplicateAppModal.svelte"
+  import { onMount } from "svelte"
+  import { licensing } from "stores/portal"
+
+  export let app
+  export let align = "right"
+  export let options
+
+  let deleteModal
+  let exportModal
+  let duplicateModal
+  let exportPublishedVersion = false
+  let loaded = false
+
+  const getActions = app => {
+    if (!loaded) {
+      return []
+    }
+    return [
+      {
+        id: "duplicate",
+        icon: "Copy",
+        onClick: duplicateModal.show,
+        body: "Duplicate",
+      },
+      {
+        id: "exportDev",
+        icon: "Export",
+        onClick: () => {
+          exportPublishedVersion = false
+          exportModal.show()
+        },
+        body: "Export latest edited app",
+      },
+      {
+        id: "exportProd",
+        icon: "Export",
+        onClick: () => {
+          exportPublishedVersion = true
+          exportModal.show()
+        },
+        body: "Export latest published app",
+      },
+      {
+        id: "delete",
+        icon: "Delete",
+        onClick: deleteModal.show,
+        body: "Delete",
+      },
+    ].filter(action => {
+      if (action.id === "exportProd" && app.deployed !== true) {
+        return false
+      } else if (Array.isArray(options) && !options.includes(action.id)) {
+        return false
+      }
+      return true
+    })
+  }
+
+  $: actions = getActions(app, loaded)
+
+  onMount(() => {
+    loaded = true
+  })
+  let appLimitModal
+</script>
+
+<DeleteModal
+  bind:this={deleteModal}
+  appId={app.devId}
+  appName={app.name}
+  onDeleteSuccess={async () => {
+    await licensing.init()
+  }}
+/>
+
+<AppLimitModal bind:this={appLimitModal} />
+
+<Modal bind:this={exportModal} padding={false}>
+  <ExportAppModal {app} published={exportPublishedVersion} />
+</Modal>
+
+<Modal bind:this={duplicateModal} padding={false}>
+  <DuplicateAppModal
+    appId={app.devId}
+    appName={app.name}
+    onDuplicateSuccess={async () => {
+      await licensing.init()
+    }}
+  />
+</Modal>
+
+<ActionMenu {align} on:open on:close>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
+  </div>
+
+  {#each actions as action}
+    <MenuItem icon={action.icon} on:click={action.onClick}>
+      {action.body}
+    </MenuItem>
+  {/each}
+</ActionMenu>
diff --git a/packages/builder/src/components/start/ChooseIconModal.svelte b/packages/builder/src/components/start/ChooseIconModal.svelte
index ac1decfb6f..463567b12a 100644
--- a/packages/builder/src/components/start/ChooseIconModal.svelte
+++ b/packages/builder/src/components/start/ChooseIconModal.svelte
@@ -6,7 +6,7 @@
     Label,
     notifications,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { createEventDispatcher } from "svelte"
 
   export let app
@@ -49,7 +49,7 @@
       return
     }
     try {
-      await apps.update(app.instance._id, {
+      await appsStore.save(app.instance._id, {
         icon: { name, color },
       })
     } catch (error) {
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index b582232207..b5fed9cdc1 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -9,13 +9,14 @@
   } from "@budibase/bbui"
   import { initialise } from "stores/builder"
   import { API } from "api"
-  import { apps, admin, auth } from "stores/portal"
+  import { appsStore, admin, auth } from "stores/portal"
   import { onMount } from "svelte"
   import { goto } from "@roxi/routify"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import { lowercase } from "helpers"
+  import { sdk } from "@budibase/shared-core"
 
   export let template
 
@@ -92,7 +93,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = svelteGet(apps)
+    const applications = svelteGet(appsStore).apps
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
     appValidation.file(validation, { template })
@@ -141,6 +142,11 @@
       // Create user
       await auth.setInitInfo({})
 
+      if (!sdk.users.isBuilder($auth.user, createdApp?.appId)) {
+        // Refresh for access to created applications
+        await auth.getSelf()
+      }
+
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
new file mode 100644
index 0000000000..0db92ff76d
--- /dev/null
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -0,0 +1,163 @@
+<script>
+  import {
+    ModalContent,
+    Input,
+    notifications,
+    Layout,
+    keepOpen,
+  } from "@budibase/bbui"
+  import { createValidationStore } from "helpers/validation/yup"
+  import { writable, get } from "svelte/store"
+  import * as appValidation from "helpers/validation/yup/app"
+  import { appsStore, auth } from "stores/portal"
+  import { onMount } from "svelte"
+  import { API } from "api"
+  import { sdk } from "@budibase/shared-core"
+
+  export let appId
+  export let appName
+  export let onDuplicateSuccess = () => {}
+
+  const validation = createValidationStore()
+  const values = writable({ name: appName + " copy", url: null })
+  const appPrefix = "/app"
+
+  let defaultAppName = appName + " copy"
+  let duplicating = false
+
+  $: {
+    const { url } = $values
+
+    validation.check({
+      ...$values,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
+  }
+
+  const resolveAppName = name => {
+    return name ? name.trim() : null
+  }
+
+  const resolveAppUrl = name => {
+    let parsedName
+    const resolvedName = resolveAppName(name)
+    parsedName = resolvedName ? resolvedName.toLowerCase() : ""
+    const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
+    return encodeURI(parsedUrl)
+  }
+
+  const nameToUrl = appName => {
+    let resolvedUrl = resolveAppUrl(appName)
+    tidyUrl(resolvedUrl)
+  }
+
+  const tidyUrl = url => {
+    if (url && !url.startsWith("/")) {
+      url = `/${url}`
+    }
+    $values.url = url === "" ? null : url
+  }
+
+  const duplicateApp = async () => {
+    duplicating = true
+
+    let data = new FormData()
+    data.append("name", $values.name.trim())
+    if ($values.url) {
+      data.append("url", $values.url.trim())
+    }
+
+    try {
+      const app = await API.duplicateApp(data, appId)
+      appsStore.load()
+      if (!sdk.users.isBuilder($auth.user, app?.duplicateAppId)) {
+        // Refresh for access to created applications
+        await auth.getSelf()
+      }
+      onDuplicateSuccess()
+      notifications.success("App duplicated successfully")
+    } catch (err) {
+      notifications.error("Error duplicating app")
+      duplicating = false
+    }
+  }
+
+  const setupValidation = async () => {
+    const applications = get(appsStore).apps
+    appValidation.name(validation, { apps: applications })
+    appValidation.url(validation, { apps: applications })
+
+    const { url } = $values
+    validation.check({
+      ...$values,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
+  }
+
+  $: appUrl = `${window.location.origin}${
+    $values.url
+      ? `${appPrefix}${$values.url}`
+      : `${appPrefix}${resolveAppUrl($values.name)}`
+  }`
+
+  onMount(async () => {
+    nameToUrl($values.name)
+    await setupValidation()
+  })
+</script>
+
+<ModalContent
+  title={"Duplicate App"}
+  onConfirm={async () => {
+    validation.check({
+      ...$values,
+    })
+    if ($validation.valid) {
+      await duplicateApp()
+    } else {
+      return keepOpen
+    }
+  }}
+>
+  <Layout gap="S" noPadding>
+    <Input
+      autofocus={true}
+      bind:value={$values.name}
+      disabled={duplicating}
+      error={$validation.touched.name && $validation.errors.name}
+      on:blur={() => ($validation.touched.name = true)}
+      on:change={nameToUrl($values.name)}
+      label="Name"
+      placeholder={defaultAppName}
+    />
+    <span>
+      <Input
+        bind:value={$values.url}
+        disabled={duplicating}
+        error={$validation.touched.url && $validation.errors.url}
+        on:blur={() => ($validation.touched.url = true)}
+        on:change={tidyUrl($values.url)}
+        label="URL"
+        placeholder={$values.url
+          ? $values.url
+          : `/${resolveAppUrl($values.name)}`}
+      />
+      {#if $values.url && $values.url !== "" && !$validation.errors.url}
+        <div class="app-server" title={appUrl}>
+          {appUrl}
+        </div>
+      {/if}
+    </span>
+  </Layout>
+</ModalContent>
+
+<style>
+  .app-server {
+    color: var(--spectrum-global-color-gray-600);
+    margin-top: 10px;
+    width: 320px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/start/ExportAppModal.svelte b/packages/builder/src/components/start/ExportAppModal.svelte
index 734e4448a1..ec0cf42fe0 100644
--- a/packages/builder/src/components/start/ExportAppModal.svelte
+++ b/packages/builder/src/components/start/ExportAppModal.svelte
@@ -121,6 +121,7 @@
     <Input
       type="password"
       label="Password"
+      autocomplete="new-password"
       placeholder="Type here..."
       bind:value={password}
       error={$validation.errors.password}
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index 5302104a45..94f6b20694 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -7,7 +7,7 @@
     Layout,
     Label,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
@@ -37,7 +37,7 @@
   }
 
   const setupValidation = async () => {
-    const applications = svelteGet(apps)
+    const applications = svelteGet(appsStore).apps
     appValidation.name(validation, {
       apps: applications,
       currentApp: {
@@ -62,7 +62,7 @@
 
   async function updateApp() {
     try {
-      await apps.update(app.appId, {
+      await appsStore.save(app.appId, {
         name: $values.name?.trim(),
         url: $values.url?.trim(),
         icon: {
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index bc1f55d9d3..adf4a47070 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -22,6 +22,7 @@ body {
   --grey-7: var(--spectrum-global-color-gray-700);
   --grey-8: var(--spectrum-global-color-gray-800);
   --grey-9: var(--spectrum-global-color-gray-900);
+  --spectrum-global-color-yellow-1000: #d8b500;
 
   color: var(--ink);
   background-color: var(--background-alt);
diff --git a/packages/builder/src/helpers/components.js b/packages/builder/src/helpers/components.js
index 4f4f3ed380..a03ebfdfa7 100644
--- a/packages/builder/src/helpers/components.js
+++ b/packages/builder/src/helpers/components.js
@@ -279,3 +279,11 @@ export const buildContextTreeLookupMap = rootComponent => {
   })
   return map
 }
+
+// Get a flat list of ids for all descendants of a component
+export const getChildIdsForComponent = component => {
+  return [
+    component._id,
+    ...(component?._children ?? []).map(getChildIdsForComponent).flat(1),
+  ]
+}
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]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index 7c1cc583e1..d714bafc70 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -15,7 +15,14 @@
     FancySelect,
   } from "@budibase/bbui"
   import { builderStore, appStore, roles } from "stores/builder"
-  import { groups, licensing, apps, users, auth, admin } from "stores/portal"
+  import {
+    groups,
+    licensing,
+    appsStore,
+    users,
+    auth,
+    admin,
+  } from "stores/portal"
   import {
     fetchData,
     Constants,
@@ -54,7 +61,7 @@
 
   let inviteFailureResponse = ""
   $: validEmail = emailValidator(email) === true
-  $: prodAppId = apps.getProdAppID($appStore.appId)
+  $: prodAppId = appsStore.getProdAppID($appStore.appId)
   $: promptInvite = showInvite(
     filteredInvites,
     filteredUsers,
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 16a1adadee..fd6a97560d 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -8,7 +8,7 @@
     userStore,
     deploymentStore,
   } from "stores/builder"
-  import { auth, apps } from "stores/portal"
+  import { auth, appsStore } from "stores/portal"
   import { TENANT_FEATURE_FLAGS, isEnabled } from "helpers/featureFlags"
   import {
     Icon,
@@ -52,7 +52,7 @@
       const pkg = await API.fetchAppPackage(application)
       await initialise(pkg)
 
-      await apps.load()
+      await appsStore.load()
       await deploymentStore.load()
 
       loaded = true
@@ -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]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index 50e1ad0cf8..4db218f60b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -24,6 +24,13 @@
     navigationStore,
   } from "stores/builder"
   import { DefaultAppTheme } from "constants"
+  import BarButtonList from "/src/components/design/settings/controls/BarButtonList.svelte"
+
+  $: alignmentOptions = [
+    { value: "Left", barIcon: "TextAlignLeft" },
+    { value: "Center", barIcon: "TextAlignCenter" },
+    { value: "Right", barIcon: "TextAlignRight" },
+  ]
 
   $: screenRouteOptions = $screenStore.screens
     .map(screen => screen.routing?.route)
@@ -46,6 +53,10 @@
       notifications.error("Error updating navigation settings")
     }
   }
+
+  const updateTextAlign = textAlignValue => {
+    navigationStore.syncAppNavigation({ textAlign: textAlignValue })
+  }
 </script>
 
 <Panel
@@ -133,6 +144,15 @@
             on:change={e => update("title", e.detail)}
             updateOnChange={false}
           />
+
+          <div class="label">
+            <Label size="M">Text align</Label>
+          </div>
+          <BarButtonList
+            options={alignmentOptions}
+            value={$navigationStore.textAlign}
+            onChange={updateTextAlign}
+          />
         {/if}
         <div class="label">
           <Label>Background</Label>
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 bf66c28a09..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
@@ -10,6 +10,8 @@
     navigationStore,
     selectedScreen,
     hoverStore,
+    componentTreeNodesStore,
+    snippets,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -68,6 +70,7 @@
       hostname: window.location.hostname,
       port: window.location.port,
     },
+    snippets: $snippets,
   }
 
   // Refresh the preview when required
@@ -130,6 +133,7 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       componentStore.select(data.id)
+      componentTreeNodesStore.makeNodeVisible(data.id)
     } else if (type === "hover-component") {
       hoverStore.hover(data.id, false)
     } else if (type === "update-prop") {
@@ -196,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/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
index f6bbac39a5..7e9c113a77 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
@@ -4,12 +4,12 @@
     selectedScreen,
     componentStore,
     selectedComponent,
+    componentTreeNodesStore,
   } from "stores/builder"
-  import { findComponent } from "helpers/components"
+  import { findComponent, getChildIdsForComponent } from "helpers/components"
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
   let confirmDeleteDialog
   let confirmEjectDialog
@@ -63,38 +63,25 @@
       componentStore.selectNext()
     },
     ["ArrowRight"]: component => {
-      componentTreeNodesStore.expandNode(component._id)
+      componentTreeNodesStore.expandNodes([component._id])
     },
     ["ArrowLeft"]: component => {
-      componentTreeNodesStore.collapseNode(component._id)
+      // Select the collapsing root component to ensure the currently selected component is not
+      // hidden in a collapsed node
+      componentStore.select(component._id)
+      componentTreeNodesStore.collapseNodes([component._id])
     },
     ["Ctrl+ArrowRight"]: component => {
-      componentTreeNodesStore.expandNode(component._id)
-
-      const expandChildren = component => {
-        const children = component._children ?? []
-
-        children.forEach(child => {
-          componentTreeNodesStore.expandNode(child._id)
-          expandChildren(child)
-        })
-      }
-
-      expandChildren(component)
+      const childIds = getChildIdsForComponent(component)
+      componentTreeNodesStore.expandNodes(childIds)
     },
     ["Ctrl+ArrowLeft"]: component => {
-      componentTreeNodesStore.collapseNode(component._id)
+      // Select the collapsing root component to ensure the currently selected component is not
+      // hidden in a collapsed node
+      componentStore.select(component._id)
 
-      const collapseChildren = component => {
-        const children = component._children ?? []
-
-        children.forEach(child => {
-          componentTreeNodesStore.collapseNode(child._id)
-          collapseChildren(child)
-        })
-      }
-
-      collapseChildren(component)
+      const childIds = getChildIdsForComponent(component)
+      componentTreeNodesStore.collapseNodes(childIds)
     },
     ["Escape"]: () => {
       if ($isActive(`./:componentId/new`)) {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
index f24235ad07..0219dc304d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
@@ -7,8 +7,8 @@
     componentStore,
     userSelectedResourceMap,
     selectedComponent,
-    selectedComponentPath,
     hoverStore,
+    componentTreeNodesStore,
   } from "stores/builder"
   import {
     findComponentPath,
@@ -17,7 +17,6 @@
   } from "helpers/components"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
-  import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
   export let components = []
   export let level = 0
@@ -64,14 +63,11 @@
     }
   }
 
-  const isOpen = (component, selectedComponentPath, openNodes) => {
+  const isOpen = component => {
     if (!component?._children?.length) {
       return false
     }
-    if (selectedComponentPath.slice(0, -1).includes(component._id)) {
-      return true
-    }
-    return openNodes[`nodeOpen-${component._id}`]
+    return componentTreeNodesStore.isNodeExpanded(component._id)
   }
 
   const isChildOfSelectedComponent = component => {
@@ -83,6 +79,11 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
+  const handleIconClick = componentId => {
+    componentStore.select(componentId)
+    componentTreeNodesStore.toggleNode(componentId)
+  }
+
   const hover = hoverStore.hover
 </script>
 
@@ -90,7 +91,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ul>
   {#each filteredComponents || [] as component, index (component._id)}
-    {@const opened = isOpen(component, $selectedComponentPath, openNodes)}
+    {@const opened = isOpen(component, openNodes)}
     <li
       on:click|stopPropagation={() => {
         componentStore.select(component._id)
@@ -104,7 +105,7 @@
         on:dragend={dndStore.actions.reset}
         on:dragstart={() => dndStore.actions.dragstart(component)}
         on:dragover={dragover(component, index)}
-        on:iconClick={() => componentTreeNodesStore.toggleNode(component._id)}
+        on:iconClick={() => handleIconClick(component._id)}
         on:drop={onDrop}
         hovering={$hoverStore.componentId === component._id}
         on:mouseenter={() => hover(component._id)}
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index da4f743f04..67befddcb9 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -3,7 +3,7 @@
   import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
-  import { isOnlyUser } from "stores/builder"
+  import { isOnlyUser, appStore } from "stores/builder"
 
   let deleteModal
 </script>
@@ -67,7 +67,11 @@
   </Page>
 </div>
 
-<DeleteModal bind:this={deleteModal} />
+<DeleteModal
+  bind:this={deleteModal}
+  appId={$appStore.appId}
+  appName={$appStore.name}
+/>
 
 <style>
   .delete-action :global(.text) {
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
index d421645ede..7bba5f638c 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
@@ -18,7 +18,7 @@
   import { createPaginationStore } from "helpers/pagination"
   import { getContext, onDestroy, onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin, apps } from "stores/portal"
+  import { auth, licensing, admin, appsStore } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
   import Portal from "svelte-portal"
 
@@ -36,7 +36,7 @@
   let status = null
   let timeRange = null
   let loaded = false
-  $: app = $apps.find(app => $appStore.appId?.includes(app.appId))
+  $: app = $appsStore.apps.find(app => $appStore.appId?.includes(app.appId))
   $: licensePlan = $auth.user?.license?.plan
   $: page = $pageInfo.page
   $: fetchLogs(automationId, status, page, timeRange)
@@ -129,7 +129,7 @@
 
   async function save({ detail }) {
     try {
-      await apps.update($appStore.appId, {
+      await appsStore.save($appStore.appId, {
         automations: {
           chainAutomations: detail,
         },
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index f1d95da362..5f82447e36 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -10,10 +10,10 @@
     notifications,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { appStore } from "stores/builder"
 
-  $: filteredApps = $apps.filter(app => app.devId == $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appUrl = `${window.origin}/embed${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte b/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
index 0ac2bc0d3f..417b5e4872 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/exportImport.svelte
@@ -8,12 +8,12 @@
     Modal,
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { appStore } from "stores/builder"
   import ExportAppModal from "components/start/ExportAppModal.svelte"
   import ImportAppModal from "components/start/ImportAppModal.svelte"
 
-  $: filteredApps = $apps.filter(app => app.devId === $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId === $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
index 06fe7e1456..be580552c7 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -11,13 +11,13 @@
   } from "@budibase/bbui"
   import { AppStatus } from "constants"
   import { appStore, initialise } from "stores/builder"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
   import { API } from "api"
 
   let updatingModal
 
-  $: filteredApps = $apps.filter(app => app.devId == $appStore.appId)
+  $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index 7ccc98d78a..095bf2023b 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -12,7 +12,14 @@
     notifications,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
-  import { apps, organisation, auth, groups, licensing } from "stores/portal"
+  import {
+    appsStore,
+    organisation,
+    auth,
+    groups,
+    licensing,
+    enrichedApps,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
@@ -31,7 +38,9 @@
   $: userGroups = $groups.filter(group =>
     group.users.find(user => user._id === $auth.user?._id)
   )
-  $: publishedApps = $apps.filter(app => app.status === AppStatus.DEPLOYED)
+  $: publishedApps = $enrichedApps.filter(
+    app => app.status === AppStatus.DEPLOYED
+  )
   $: userApps = getUserApps(publishedApps, userGroups, $auth.user)
 
   function getUserApps(publishedApps, userGroups, user) {
@@ -46,12 +55,12 @@
         return userGroups.find(group => {
           return groups.actions
             .getGroupAppIds(group)
-            .map(role => apps.extractAppId(role))
+            .map(role => appsStore.extractAppId(role))
             .includes(app.appId)
         })
       } else {
         return Object.keys($auth.user?.roles)
-          .map(x => apps.extractAppId(x))
+          .map(x => appsStore.extractAppId(x))
           .includes(app.appId)
       }
     })
@@ -76,7 +85,7 @@
   onMount(async () => {
     try {
       await organisation.init()
-      await apps.load()
+      await appsStore.load()
       await groups.actions.init()
     } catch (error) {
       notifications.error("Error loading apps")
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/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index aad33f852a..18378c37e9 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -1,7 +1,7 @@
 <script>
   import { isActive, redirect, goto, url } from "@roxi/routify"
   import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
-  import { organisation, auth, menu, apps } from "stores/portal"
+  import { organisation, auth, menu, appsStore } from "stores/portal"
   import { onMount } from "svelte"
   import UpgradeButton from "./_components/UpgradeButton.svelte"
   import MobileMenu from "./_components/MobileMenu.svelte"
@@ -16,7 +16,8 @@
   let activeTab = "Apps"
 
   $: $url(), updateActiveTab($menu)
-  $: isOnboarding = !$apps.length && sdk.users.hasBuilderPermissions($auth.user)
+  $: isOnboarding =
+    !$appsStore.apps.length && sdk.users.hasBuilderPermissions($auth.user)
 
   const updateActiveTab = menu => {
     for (let entry of menu) {
@@ -40,7 +41,7 @@
       } else {
         try {
           // We need to load apps to know if we need to show onboarding fullscreen
-          await Promise.all([apps.load(), organisation.init()])
+          await Promise.all([appsStore.load(), organisation.init()])
         } catch (error) {
           notifications.error("Error getting org config")
         }
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
index 4fe98cf960..7f12c9ac36 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -18,7 +18,7 @@
     Divider,
     ActionButton,
   } from "@budibase/bbui"
-  import { licensing, users, apps, auditLogs } from "stores/portal"
+  import { licensing, users, appsStore, auditLogs } from "stores/portal"
   import LockedFeature from "../../_components/LockedFeature.svelte"
   import { createPaginationStore } from "helpers/pagination"
   import { onMount, setContext } from "svelte"
@@ -102,7 +102,7 @@
     enrich(parseEventObject($auditLogs.events), selectedEvents, "id"),
     "id"
   )
-  $: sortedApps = sort(enrich($apps, selectedApps, "appId"), "name")
+  $: sortedApps = sort(enrich($appsStore.apps, selectedApps, "appId"), "name")
 
   const debounce = value => {
     clearTimeout(timer)
diff --git a/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
new file mode 100644
index 0000000000..7d6b4d81a9
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/FavouriteAppButton.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { Icon, TooltipPosition, TooltipType } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+
+  export let app
+  export let size = "S"
+  export let position = TooltipPosition.Top
+  export let noWrap = false
+  export let hoverColor = "var(--ink)"
+</script>
+
+<Icon
+  name={app?.favourite ? "Star" : "StarOutline"}
+  hoverable
+  color={app?.favourite ? "var(--spectrum-global-color-yellow-1000)" : null}
+  tooltip={app?.favourite ? "Remove from favourites" : "Add to favourites"}
+  tooltipType={TooltipType.Info}
+  tooltipPosition={position}
+  tooltipWrap={noWrap}
+  {hoverColor}
+  {size}
+  on:click={async e => {
+    e.stopPropagation()
+    const userAppFavourites = new Set([...($auth.user.appFavourites || [])])
+    let processedAppIds = []
+
+    if ($auth.user.appFavourites && app?.appId) {
+      if (userAppFavourites.has(app.appId)) {
+        userAppFavourites.delete(app.appId)
+      } else {
+        userAppFavourites.add(app.appId)
+      }
+      processedAppIds = [...userAppFavourites]
+    } else {
+      processedAppIds = [app.appId]
+    }
+
+    await auth.updateSelf({
+      appFavourites: processedAppIds,
+    })
+  }}
+  disabled={!app}
+/>
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
index f1ed686a3a..871326eb91 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
@@ -1,8 +1,8 @@
 <script>
   import { params, redirect } from "@roxi/routify"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
 
-  $: app = $apps.find(app => app.appId === $params.appId)
+  $: app = $appsStore.apps.find(app => app.appId === $params.appId)
   $: {
     if (!app) {
       $redirect("../")
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index e87c1104dd..3f8e9e7545 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -1,12 +1,21 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { apps, auth, sideBarCollapsed } from "stores/portal"
-  import { Link, Body, ActionButton } from "@budibase/bbui"
+  import { auth, sideBarCollapsed, enrichedApps } from "stores/portal"
+  import AppRowContext from "components/start/AppRowContext.svelte"
+  import FavouriteAppButton from "../FavouriteAppButton.svelte"
+  import {
+    Link,
+    Body,
+    Button,
+    Icon,
+    TooltipPosition,
+    TooltipType,
+  } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
 
-  $: app = $apps.find(app => app.appId === $params.appId)
+  $: app = $enrichedApps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
 
@@ -30,42 +39,63 @@
   $: fetchScreens(app?.devId)
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="container">
   <div class="header">
     {#if $sideBarCollapsed}
-      <ActionButton
-        quiet
-        icon="Rail"
-        on:click={() => sideBarCollapsed.set(false)}
-      >
-        Menu
-      </ActionButton>
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(false)}>
+        <Icon
+          name={"Rail"}
+          hoverable
+          tooltip="Expand"
+          tooltipPosition={TooltipPosition.Right}
+          tooltipType={TooltipType.Info}
+          hoverColor={"var(--ink)"}
+        />
+      </div>
     {:else}
-      <ActionButton
-        quiet
-        icon="RailRightOpen"
-        on:click={() => sideBarCollapsed.set(true)}
-      >
-        Collapse
-      </ActionButton>
+      <div class="headerButton" on:click={() => sideBarCollapsed.set(true)}>
+        <Icon
+          name={"RailRightOpen"}
+          hoverable
+          tooltip="Collapse"
+          tooltipType={TooltipType.Info}
+          tooltipPosition={TooltipPosition.Top}
+          hoverColor={"var(--ink)"}
+          size="S"
+        />
+      </div>
     {/if}
     {#if isBuilder}
-      <ActionButton
-        quiet
-        icon="Edit"
+      <Button
+        size="M"
+        secondary
         on:click={() => $goto(`/builder/app/${app.devId}`)}
       >
         Edit
-      </ActionButton>
+      </Button>
     {/if}
-    <ActionButton
-      disabled={noScreens}
-      quiet
-      icon="LinkOut"
-      on:click={() => window.open(iframeUrl, "_blank")}
-    >
-      Fullscreen
-    </ActionButton>
+    <div class="headerButton">
+      <FavouriteAppButton {app} />
+    </div>
+    <div class="headerButton" on:click={() => window.open(iframeUrl, "_blank")}>
+      <Icon
+        name="LinkOut"
+        disabled={noScreens}
+        hoverable
+        tooltip="Open in new tab"
+        tooltipType={TooltipType.Info}
+        tooltipPosition={TooltipPosition.Top}
+        hoverColor={"var(--ink)"}
+        size="S"
+      />
+    </div>
+    <AppRowContext
+      {app}
+      options={["duplicate", "delete", "exportDev", "exportProd"]}
+      align="left"
+    />
   </div>
   {#if noScreens}
     <div class="noScreens">
@@ -83,6 +113,15 @@
 </div>
 
 <style>
+  .headerButton {
+    color: var(--grey-7);
+    cursor: pointer;
+  }
+
+  .headerButton:hover {
+    color: var(--ink);
+  }
+
   .container {
     flex: 1 1 auto;
     display: flex;
@@ -96,7 +135,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xs);
+    gap: var(--spacing-xl);
     flex: 0 0 50px;
   }
 
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index 3ece483425..e9cd170c0b 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,23 +1,21 @@
 <script>
-  import { apps, sideBarCollapsed } from "stores/portal"
+  import { sideBarCollapsed, enrichedApps, auth } from "stores/portal"
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
+  import AppRowContext from "components/start/AppRowContext.svelte"
+  import FavouriteAppButton from "../FavouriteAppButton.svelte"
+  import { sdk } from "@budibase/shared-core"
 
   let searchString
+  let opened
 
-  $: filteredApps = $apps
-    .filter(app => {
-      return (
-        !searchString ||
-        app.name.toLowerCase().includes(searchString.toLowerCase())
-      )
-    })
-    .sort((a, b) => {
-      const lowerA = a.name.toLowerCase()
-      const lowerB = b.name.toLowerCase()
-      return lowerA > lowerB ? 1 : -1
-    })
+  $: filteredApps = $enrichedApps.filter(app => {
+    return (
+      !searchString ||
+      app.name.toLowerCase().includes(searchString.toLowerCase())
+    )
+  })
 </script>
 
 <div class="side-bar" class:collapsed={$sideBarCollapsed}>
@@ -37,13 +35,40 @@
       selected={!$params.appId}
     />
     {#each filteredApps as app}
-      <NavItem
-        text={app.name}
-        icon={app.icon?.name || "Apps"}
-        iconColor={app.icon?.color}
-        selected={$params.appId === app.appId}
-        on:click={() => $goto(`./${app.appId}`)}
-      />
+      <span
+        class="side-bar-app-entry"
+        class:favourite={app.favourite}
+        class:actionsOpen={opened == app.appId}
+      >
+        <NavItem
+          text={app.name}
+          icon={app.icon?.name || "Apps"}
+          iconColor={app.icon?.color}
+          selected={$params.appId === app.appId}
+          highlighted={opened == app.appId}
+          on:click={() => $goto(`./${app.appId}`)}
+          withActions
+          showActions
+        >
+          <div class="app-entry-actions">
+            {#if sdk.users.isBuilder($auth.user, app?.devId)}
+              <AppRowContext
+                {app}
+                align="left"
+                on:open={() => {
+                  opened = app.appId
+                }}
+                on:close={() => {
+                  opened = null
+                }}
+              />
+            {/if}
+          </div>
+          <div class="favourite-icon">
+            <FavouriteAppButton {app} size="XS" />
+          </div>
+        </NavItem>
+      </span>
     {/each}
   </div>
 </div>
@@ -86,4 +111,23 @@
     overflow: auto;
     overflow-x: hidden;
   }
+
+  .side-bar-app-entry :global(.nav-item-content .actions) {
+    width: auto;
+    display: flex;
+    gap: var(--spacing-s);
+  }
+
+  .side-bar-app-entry:hover .app-entry-actions,
+  .side-bar-app-entry:hover .favourite-icon,
+  .side-bar-app-entry.favourite .favourite-icon,
+  .side-bar-app-entry.actionsOpen .app-entry-actions,
+  .side-bar-app-entry.actionsOpen .favourite-icon {
+    opacity: 1;
+  }
+
+  .side-bar-app-entry .app-entry-actions,
+  .side-bar-app-entry .favourite-icon {
+    opacity: 0;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
index 8810edca9c..00719dc6d5 100644
--- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
@@ -2,7 +2,7 @@
   import { notifications } from "@budibase/bbui"
   import {
     admin,
-    apps,
+    appsStore,
     templates,
     licensing,
     groups,
@@ -14,7 +14,7 @@
   import PortalSideBar from "./_components/PortalSideBar.svelte"
 
   // Don't block loading if we've already hydrated state
-  let loaded = !!$apps?.length
+  let loaded = !!$appsStore.apps?.length
 
   onMount(async () => {
     try {
@@ -34,7 +34,10 @@
       }
 
       // Go to new app page if no apps exists
-      if (!$apps.length && sdk.users.hasBuilderPermissions($auth.user)) {
+      if (
+        !$appsStore.apps.length &&
+        sdk.users.hasBuilderPermissions($auth.user)
+      ) {
         $redirect("./onboarding")
       }
     } catch (error) {
@@ -46,7 +49,7 @@
 
 {#if loaded}
   <div class="page">
-    {#if $apps.length > 0}
+    {#if $appsStore.apps.length > 0}
       <PortalSideBar />
     {/if}
     <slot />
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index 1f2c579071..1248c41cf8 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -5,7 +5,7 @@
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import { apps, templates, licensing } from "stores/portal"
+  import { appsStore, templates, licensing } from "stores/portal"
   import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
 
   let template
@@ -35,7 +35,7 @@
   }
 </script>
 
-{#if !$apps.length}
+{#if !$appsStore.apps.length}
   <FirstAppOnboarding />
 {:else}
   <Page>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index a1aa242a36..9a073d041f 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -19,13 +19,18 @@
   import { automationStore, initialise } from "stores/builder"
   import { API } from "api"
   import { onMount } from "svelte"
-  import { apps, auth, admin, licensing, environment } from "stores/portal"
+  import {
+    appsStore,
+    auth,
+    admin,
+    licensing,
+    environment,
+    enrichedApps,
+  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
-  import { AppStatus } from "constants"
   import Logo from "assets/bb-space-man.svg"
 
-  let sortBy = "name"
   let template
   let creationModal
   let appLimitModal
@@ -33,56 +38,27 @@
   let searchTerm = ""
   let creatingFromTemplate = false
   let automationErrors
-  let accessFilterList = null
 
   $: welcomeHeader = `Welcome ${$auth?.user?.firstName || "back"}`
-  $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
-  $: filteredApps = enrichedApps.filter(
-    app =>
-      (searchTerm
-        ? app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
-        : true) &&
-      (accessFilterList !== null
-        ? accessFilterList?.includes(
-            `${app?.type}_${app?.tenantId}_${app?.appId}`
-          )
-        : true)
-  )
-  $: automationErrors = getAutomationErrors(enrichedApps)
+  $: filteredApps = filterApps($enrichedApps, searchTerm)
+  $: automationErrors = getAutomationErrors(filteredApps || [])
   $: isOwner = $auth.accountPortalAccess && $admin.cloud
 
+  const filterApps = (apps, searchTerm) => {
+    return apps?.filter(app => {
+      const query = searchTerm?.trim()?.replace(/\s/g, "")
+      if (query) {
+        return app?.name?.toLowerCase().includes(query.toLowerCase())
+      } else {
+        return true
+      }
+    })
+  }
+
   const usersLimitLockAction = $licensing?.errUserLimit
     ? () => accountLockedModal.show()
     : null
 
-  const enrichApps = (apps, user, sortBy) => {
-    const enrichedApps = apps.map(app => ({
-      ...app,
-      deployed: app.status === AppStatus.DEPLOYED,
-      lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
-      lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
-    }))
-
-    if (sortBy === "status") {
-      return enrichedApps.sort((a, b) => {
-        if (a.status === b.status) {
-          return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
-        }
-        return a.status === AppStatus.DEPLOYED ? -1 : 1
-      })
-    } else if (sortBy === "updated") {
-      return enrichedApps.sort((a, b) => {
-        const aUpdated = a.updatedAt || "9999"
-        const bUpdated = b.updatedAt || "9999"
-        return aUpdated < bUpdated ? 1 : -1
-      })
-    } else {
-      return enrichedApps.sort((a, b) => {
-        return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
-      })
-    }
-  }
-
   const getAutomationErrors = apps => {
     const automationErrors = {}
     for (let app of apps) {
@@ -109,7 +85,7 @@
   }
 
   const automationErrorMessage = appId => {
-    const app = enrichedApps.find(app => app.devId === appId)
+    const app = $enrichedApps.find(app => app.devId === appId)
     const errors = automationErrors[appId]
     return `${app.name} - Automation error (${errorCount(errors)})`
   }
@@ -117,7 +93,7 @@
   const initiateAppCreation = async () => {
     if ($licensing?.usageMetrics?.apps >= 100) {
       appLimitModal.show()
-    } else if ($apps?.length) {
+    } else if ($appsStore.apps?.length) {
       $goto("/builder/portal/apps/create")
     } else {
       template = null
@@ -136,7 +112,7 @@
       const templateKey = template.key.split("/")[1]
 
       let appName = templateKey.replace(/-/g, " ")
-      const appsWithSameName = $apps.filter(app =>
+      const appsWithSameName = $appsStore.apps.filter(app =>
         app.name?.startsWith(appName)
       )
       appName = `${appName} ${appsWithSameName.length + 1}`
@@ -217,7 +193,7 @@
           : "View error"}
         on:dismiss={async () => {
           await automationStore.actions.clearLogErrors({ appId })
-          await apps.load()
+          await appsStore.load()
         }}
         message={automationErrorMessage(appId)}
       />
@@ -233,7 +209,7 @@
       </div>
     </div>
 
-    {#if enrichedApps.length}
+    {#if $appsStore.apps.length}
       <Layout noPadding gap="L">
         <div class="title">
           {#if $auth.user && sdk.users.canCreateApps($auth.user)}
@@ -245,7 +221,7 @@
               >
                 Create new app
               </Button>
-              {#if $apps?.length > 0 && !$admin.offlineMode}
+              {#if $appsStore.apps?.length > 0 && !$admin.offlineMode}
                 <Button
                   size="M"
                   secondary
@@ -255,7 +231,7 @@
                   View templates
                 </Button>
               {/if}
-              {#if !$apps?.length}
+              {#if !$appsStore.apps?.length}
                 <Button
                   size="L"
                   quiet
@@ -267,11 +243,14 @@
               {/if}
             </div>
           {/if}
-          {#if enrichedApps.length > 1}
+          {#if $appsStore.apps.length > 1}
             <div class="app-actions">
               <Select
                 autoWidth
-                bind:value={sortBy}
+                value={$appsStore.sortBy}
+                on:change={e => {
+                  appsStore.updateSort(e.detail)
+                }}
                 placeholder={null}
                 options={[
                   { label: "Sort by name", value: "name" },
@@ -279,7 +258,17 @@
                   { label: "Sort by status", value: "status" },
                 ]}
               />
-              <Search placeholder="Search" bind:value={searchTerm} />
+              <Search
+                placeholder="Search"
+                on:input={e => {
+                  searchTerm = e.target.value
+                }}
+                on:change={e => {
+                  if (!e.detail) {
+                    searchTerm = null
+                  }
+                }}
+              />
             </div>
           {/if}
         </div>
diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
index 5cb88149d5..36ec43b6b3 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@@ -13,7 +13,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { Breadcrumb, Breadcrumbs } from "components/portal/page"
   import { roles } from "stores/builder"
-  import { apps, auth, groups } from "stores/portal"
+  import { appsStore, auth, groups } from "stores/portal"
   import { onMount, setContext } from "svelte"
   import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte"
   import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte"
@@ -51,17 +51,17 @@
   $: isScimGroup = group?.scimInfo?.isSync
   $: isAdmin = sdk.users.isAdmin($auth.user)
   $: readonly = !isAdmin || isScimGroup
-  $: groupApps = $apps
+  $: groupApps = $appsStore.apps
     .filter(app =>
       groups.actions
         .getGroupAppIds(group)
-        .includes(apps.getProdAppID(app.devId))
+        .includes(appsStore.getProdAppID(app.devId))
     )
     .map(app => ({
       ...app,
-      role: group?.builder?.apps.includes(apps.getProdAppID(app.devId))
+      role: group?.builder?.apps.includes(appsStore.getProdAppID(app.devId))
         ? Constants.Roles.CREATOR
-        : group?.roles?.[apps.getProdAppID(app.devId)],
+        : group?.roles?.[appsStore.getProdAppID(app.devId)],
     }))
 
   $: {
@@ -93,7 +93,7 @@
   }
 
   const removeApp = async app => {
-    await groups.actions.removeApp(groupId, apps.getProdAppID(app.devId))
+    await groups.actions.removeApp(groupId, appsStore.getProdAppID(app.devId))
   }
   setContext("roles", {
     updateRole: () => {},
diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
index f657a722a3..5071d40add 100644
--- a/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte
@@ -1,12 +1,12 @@
 <script>
   import { keepOpen, Body, ModalContent, Select } from "@budibase/bbui"
-  import { apps, groups } from "stores/portal"
+  import { appsStore, groups } from "stores/portal"
   import { roles } from "stores/builder"
   import RoleSelect from "components/common/RoleSelect.svelte"
 
   export let group
 
-  $: appOptions = $apps.map(app => ({
+  $: appOptions = $appsStore.apps.map(app => ({
     label: app.name,
     value: app,
   }))
@@ -16,7 +16,7 @@
   let selectingRole = false
 
   async function appSelected() {
-    const prodAppId = apps.getProdAppID(selectedApp.devId)
+    const prodAppId = appsStore.getProdAppID(selectedApp.devId)
     if (!selectingRole) {
       selectingRole = true
       await roles.fetchByAppId(prodAppId)
diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
index eb0305e959..d4e765a4be 100644
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@@ -18,7 +18,7 @@
     Table,
   } from "@budibase/bbui"
   import { onMount, setContext } from "svelte"
-  import { users, auth, groups, apps, licensing } from "stores/portal"
+  import { users, auth, groups, appsStore, licensing } from "stores/portal"
   import { roles } from "stores/builder"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
@@ -97,7 +97,7 @@
   $: privileged = sdk.users.isAdminOrGlobalBuilder(user)
   $: nameLabel = getNameLabel(user)
   $: filteredGroups = getFilteredGroups(internalGroups, searchTerm)
-  $: availableApps = getAvailableApps($apps, privileged, user?.roles)
+  $: availableApps = getAvailableApps($appsStore.apps, privileged, user?.roles)
   $: userGroups = $groups.filter(x => {
     return x.users?.find(y => {
       return y._id === userId
@@ -111,12 +111,12 @@
       availableApps = availableApps.filter(x => {
         let roleKeys = Object.keys(roles || {})
         return roleKeys.concat(user?.builder?.apps).find(y => {
-          return x.appId === apps.extractAppId(y)
+          return x.appId === appsStore.extractAppId(y)
         })
       })
     }
     return availableApps.map(app => {
-      const prodAppId = apps.getProdAppID(app.devId)
+      const prodAppId = appsStore.getProdAppID(app.devId)
       return {
         name: app.name,
         devId: app.devId,
diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
index 32e50ef05f..28057f609c 100644
--- a/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppsTableRenderer.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { apps } from "stores/portal"
+  import { appsStore } from "stores/portal"
   import { sdk } from "@budibase/shared-core"
 
   export let value
@@ -10,7 +10,7 @@
 
   const getCount = () => {
     if (priviliged) {
-      return $apps.length
+      return $appsStore.apps.length
     } else {
       return sdk.users.hasAppBuilderPermissions(row)
         ? row?.builder?.apps?.length +
diff --git a/packages/builder/src/stores/builder/BudiStore.js b/packages/builder/src/stores/BudiStore.js
similarity index 100%
rename from packages/builder/src/stores/builder/BudiStore.js
rename to packages/builder/src/stores/BudiStore.js
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.js
index 275d143f80..7dfee4daa9 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.js
@@ -1,5 +1,5 @@
 import { API } from "api"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_APP_META_STATE = {
   appId: "",
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.js
index 398f3c1606..d002062da9 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore.js"
 import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
 
 export const INITIAL_BUILDER_STATE = {
diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js
new file mode 100644
index 0000000000..a8e09a2051
--- /dev/null
+++ b/packages/builder/src/stores/builder/componentTreeNodes.js
@@ -0,0 +1,67 @@
+import { get } from "svelte/store"
+import { createSessionStorageStore } from "@budibase/frontend-core"
+import { selectedScreen as selectedScreenStore } from "./screens"
+import { findComponentPath } from "helpers/components"
+
+const baseStore = createSessionStorageStore("openNodes", {})
+
+const toggleNode = componentId => {
+  baseStore.update(openNodes => {
+    openNodes[`nodeOpen-${componentId}`] = !openNodes[`nodeOpen-${componentId}`]
+
+    return openNodes
+  })
+}
+
+const expandNodes = componentIds => {
+  baseStore.update(openNodes => {
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, true])
+    )
+
+    return { ...openNodes, ...newNodes }
+  })
+}
+
+const collapseNodes = componentIds => {
+  baseStore.update(openNodes => {
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, false])
+    )
+
+    return { ...openNodes, ...newNodes }
+  })
+}
+
+// Will ensure all parents of a node are expanded so that it is visible in the tree
+const makeNodeVisible = componentId => {
+  const selectedScreen = get(selectedScreenStore)
+
+  const path = findComponentPath(selectedScreen.props, componentId)
+
+  const componentIds = path.map(component => component._id)
+
+  baseStore.update(openNodes => {
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, true])
+    )
+
+    return { ...openNodes, ...newNodes }
+  })
+}
+
+const isNodeExpanded = componentId => {
+  const openNodes = get(baseStore)
+  return !!openNodes[`nodeOpen-${componentId}`]
+}
+
+const store = {
+  subscribe: baseStore.subscribe,
+  toggleNode,
+  expandNodes,
+  makeNodeVisible,
+  collapseNodes,
+  isNodeExpanded,
+}
+
+export default store
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index d7572dca60..0d7da1ba58 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -19,6 +19,7 @@ import {
   appStore,
   previewStore,
   tables,
+  componentTreeNodesStore,
 } from "stores/builder/index"
 import { buildFormSchema, getSchemaForDatasource } from "dataBinding"
 import {
@@ -27,9 +28,8 @@ import {
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
 } from "constants/backend"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
-import componentTreeNodesStore from "stores/portal/componentTreeNodesStore"
 
 export const INITIAL_COMPONENTS_STATE = {
   components: {},
@@ -653,8 +653,11 @@ export class ComponentStore extends BudiStore {
     this.update(state => {
       state.selectedScreenId = targetScreenId
       state.selectedComponentId = newComponentId
+
       return state
     })
+
+    componentTreeNodesStore.makeNodeVisible(newComponentId)
   }
 
   getPrevious() {
@@ -663,7 +666,6 @@ export class ComponentStore extends BudiStore {
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(x => x._id === componentId)
-    const componentTreeNodes = get(componentTreeNodesStore)
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -680,16 +682,16 @@ export class ComponentStore extends BudiStore {
 
     // If we have siblings above us, choose the sibling or a descendant
     if (index > 0) {
-      // If sibling before us accepts children, select a descendant
+      // If sibling before us accepts children, and is not collapsed, select a descendant
       const previousSibling = parent._children[index - 1]
       if (
         previousSibling._children?.length &&
-        componentTreeNodes[`nodeOpen-${previousSibling._id}`]
+        componentTreeNodesStore.isNodeExpanded(previousSibling._id)
       ) {
         let target = previousSibling
         while (
           target._children?.length &&
-          componentTreeNodes[`nodeOpen-${target._id}`]
+          componentTreeNodesStore.isNodeExpanded(target._id)
         ) {
           target = target._children[target._children.length - 1]
         }
@@ -711,7 +713,6 @@ export class ComponentStore extends BudiStore {
     const screen = get(selectedScreen)
     const parent = findComponentParent(screen.props, componentId)
     const index = parent?._children.findIndex(x => x._id === componentId)
-    const componentTreeNodes = get(componentTreeNodesStore)
 
     // Check for screen and navigation component edge cases
     const screenComponentId = `${screen._id}-screen`
@@ -720,11 +721,11 @@ export class ComponentStore extends BudiStore {
       return navComponentId
     }
 
-    // If we have children, select first child
+    // If we have children, select first child, and the node is not collapsed
     if (
       component._children?.length &&
       (state.selectedComponentId === navComponentId ||
-        componentTreeNodes[`nodeOpen-${component._id}`])
+        componentTreeNodesStore.isNodeExpanded(component._id))
     ) {
       return component._children[0]._id
     } else if (!parent) {
@@ -803,7 +804,10 @@ export class ComponentStore extends BudiStore {
         // sibling
         const previousSibling = parent._children[index - 1]
         const definition = this.getDefinition(previousSibling._component)
-        if (definition.hasChildren) {
+        if (
+          definition.hasChildren &&
+          componentTreeNodesStore.isNodeExpanded(previousSibling._id)
+        ) {
           previousSibling._children.push(originalComponent)
         }
 
@@ -852,10 +856,13 @@ export class ComponentStore extends BudiStore {
 
       // Move below the next sibling if we are not the last sibling
       if (index < parent._children.length) {
-        // If the next sibling has children, become the first child
+        // If the next sibling has children, and is not collapsed, become the first child
         const nextSibling = parent._children[index]
         const definition = this.getDefinition(nextSibling._component)
-        if (definition.hasChildren) {
+        if (
+          definition.hasChildren &&
+          componentTreeNodesStore.isNodeExpanded(nextSibling._id)
+        ) {
           nextSibling._children.splice(0, 0, originalComponent)
         }
 
@@ -1151,13 +1158,3 @@ export const selectedComponent = derived(
     return clone
   }
 )
-
-export const selectedComponentPath = derived(
-  [componentStore, selectedScreen],
-  ([$store, $selectedScreen]) => {
-    return findComponentPath(
-      $selectedScreen?.props,
-      $store.selectedComponentId
-    ).map(component => component._id)
-  }
-)
diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js
index 064d5c15cf..f0444a7da5 100644
--- a/packages/builder/src/stores/builder/hover.js
+++ b/packages/builder/src/stores/builder/hover.js
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { previewStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_HOVER_STATE = {
   componentId: null,
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index bac9fb8826..5e94ce0552 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -1,10 +1,6 @@
 import { layoutStore } from "./layouts.js"
 import { appStore } from "./app.js"
-import {
-  componentStore,
-  selectedComponent,
-  selectedComponentPath,
-} from "./components"
+import { componentStore, selectedComponent } from "./components"
 import { navigationStore } from "./navigation.js"
 import { themeStore } from "./theme.js"
 import { screenStore, selectedScreen, sortedScreens } from "./screens.js"
@@ -18,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"
@@ -30,8 +27,10 @@ import { integrations } from "./integrations"
 import { sortedIntegrations } from "./sortedIntegrations"
 import { queries } from "./queries"
 import { flags } from "./flags"
+import componentTreeNodesStore from "./componentTreeNodes"
 
 export {
+  componentTreeNodesStore,
   layoutStore,
   appStore,
   componentStore,
@@ -50,7 +49,6 @@ export {
   isOnlyUser,
   deploymentStore,
   selectedComponent,
-  selectedComponentPath,
   tables,
   views,
   viewsV2,
@@ -62,6 +60,7 @@ export {
   queries,
   flags,
   hoverStore,
+  snippets,
 }
 
 export const reset = () => {
@@ -101,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/layouts.js b/packages/builder/src/stores/builder/layouts.js
index e9a84a1d4a..30d6935b19 100644
--- a/packages/builder/src/stores/builder/layouts.js
+++ b/packages/builder/src/stores/builder/layouts.js
@@ -1,6 +1,6 @@
 import { derived, get } from "svelte/store"
 import { componentStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 import { API } from "api"
 
 export const INITIAL_LAYOUT_STATE = {
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index 6d53a41019..0cc4923c56 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { API } from "api"
 import { appStore } from "stores/builder"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",
@@ -11,6 +11,7 @@ export const INITIAL_NAVIGATION_STATE = {
   hideLogo: null,
   logoUrl: null,
   hideTitle: null,
+  textAlign: "Left",
   navBackground: null,
   navWidth: null,
   navTextColor: null,
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/screens.js b/packages/builder/src/stores/builder/screens.js
index a646dee2f8..7339593960 100644
--- a/packages/builder/src/stores/builder/screens.js
+++ b/packages/builder/src/stores/builder/screens.js
@@ -12,7 +12,7 @@ import {
 } from "stores/builder"
 import { createHistoryStore } from "stores/builder/history"
 import { API } from "api"
-import BudiStore from "./BudiStore"
+import BudiStore from "../BudiStore"
 
 export const INITIAL_SCREENS_STATE = {
   screens: [],
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..7df5ab9adb 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -6,11 +6,12 @@ import {
   themeStore,
   navigationStore,
   deploymentStore,
+  snippets,
   datasources,
   tables,
 } from "stores/builder"
 import { get } from "svelte/store"
-import { auth, apps } from "stores/portal"
+import { auth, appsStore } from "stores/portal"
 import { screenStore } from "./screens"
 import { SocketEvent, BuilderSocketEvent, helpers } from "@budibase/shared-core"
 import { notifications } from "@budibase/bbui"
@@ -64,11 +65,12 @@ export const createBuilderWebsocket = appId => {
     appStore.syncMetadata(metadata)
     themeStore.syncMetadata(metadata)
     navigationStore.syncMetadata(metadata)
+    snippets.syncMetadata(metadata)
   })
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,
     async ({ user, published }) => {
-      await apps.load()
+      await appsStore.load()
       if (published) {
         await deploymentStore.load()
       }
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/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js
index 5fcf567ef5..84c4348075 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@@ -1,39 +1,61 @@
-import { writable } from "svelte/store"
+import { derived } from "svelte/store"
 import { AppStatus } from "constants"
 import { API } from "api"
+import { auth } from "./auth"
+import BudiStore from "../BudiStore" // move this
 
 // properties that should always come from the dev app, not the deployed
 const DEV_PROPS = ["updatedBy", "updatedAt"]
 
-const extractAppId = id => {
-  const split = id?.split("_") || []
-  return split.length ? split[split.length - 1] : null
+export const INITIAL_APPS_STATE = {
+  apps: [],
+  sortBy: "name",
 }
 
-const getProdAppID = appId => {
-  if (!appId) {
-    return appId
-  }
-  let rest,
-    separator = ""
-  if (appId.startsWith("app_dev")) {
-    // split to take off the app_dev element, then join it together incase any other app_ exist
-    const split = appId.split("app_dev")
-    split.shift()
-    rest = split.join("app_dev")
-  } else if (!appId.startsWith("app")) {
-    rest = appId
-    separator = "_"
-  } else {
-    return appId
-  }
-  return `app${separator}${rest}`
-}
+export class AppsStore extends BudiStore {
+  constructor() {
+    super({ ...INITIAL_APPS_STATE })
 
-export function createAppStore() {
-  const store = writable([])
+    this.extractAppId = this.extractAppId.bind(this)
+    this.getProdAppID = this.getProdAppID.bind(this)
+    this.updateSort = this.updateSort.bind(this)
+    this.load = this.load.bind(this)
+    this.save = this.save.bind(this)
+  }
 
-  async function load() {
+  extractAppId(id) {
+    const split = id?.split("_") || []
+    return split.length ? split[split.length - 1] : null
+  }
+
+  getProdAppID(appId) {
+    if (!appId) {
+      return appId
+    }
+    let rest,
+      separator = ""
+    if (appId.startsWith("app_dev")) {
+      // split to take off the app_dev element, then join it together incase any other app_ exist
+      const split = appId.split("app_dev")
+      split.shift()
+      rest = split.join("app_dev")
+    } else if (!appId.startsWith("app")) {
+      rest = appId
+      separator = "_"
+    } else {
+      return appId
+    }
+    return `app${separator}${rest}`
+  }
+
+  updateSort(sortBy) {
+    this.update(state => ({
+      ...state,
+      sortBy,
+    }))
+  }
+
+  async load() {
     const json = await API.getApps()
     if (Array.isArray(json)) {
       // Merge apps into one sensible list
@@ -43,7 +65,7 @@ export function createAppStore() {
 
       // First append all dev app version
       devApps.forEach(app => {
-        const id = extractAppId(app.appId)
+        const id = this.extractAppId(app.appId)
         appMap[id] = {
           ...app,
           devId: app.appId,
@@ -53,7 +75,7 @@ export function createAppStore() {
 
       // Then merge with all prod app versions
       deployedApps.forEach(app => {
-        const id = extractAppId(app.appId)
+        const id = this.extractAppId(app.appId)
 
         // Skip any deployed apps which don't have a dev counterpart
         if (!appMap[id]) {
@@ -81,39 +103,80 @@ export function createAppStore() {
       // Transform into an array and clean up
       const apps = Object.values(appMap)
       apps.forEach(app => {
-        app.appId = extractAppId(app.devId)
+        app.appId = this.extractAppId(app.devId)
         delete app._id
         delete app._rev
       })
-      store.set(apps)
+      this.update(state => ({
+        ...state,
+        apps,
+      }))
     } else {
-      store.set([])
+      this.update(state => ({
+        ...state,
+        apps: [],
+      }))
     }
   }
 
-  async function update(appId, value) {
+  async save(appId, value) {
     await API.saveAppMetadata({
       appId,
       metadata: value,
     })
-    store.update(state => {
-      const updatedAppIndex = state.findIndex(app => app.instance._id === appId)
+    this.update(state => {
+      const updatedAppIndex = state.apps.findIndex(
+        app => app.instance._id === appId
+      )
       if (updatedAppIndex !== -1) {
-        let updatedApp = state[updatedAppIndex]
+        let updatedApp = state.apps[updatedAppIndex]
         updatedApp = { ...updatedApp, ...value }
-        state.apps = state.splice(updatedAppIndex, 1, updatedApp)
+        state.apps = state.apps.splice(updatedAppIndex, 1, updatedApp)
       }
       return state
     })
   }
-
-  return {
-    subscribe: store.subscribe,
-    load,
-    update,
-    extractAppId,
-    getProdAppID,
-  }
 }
 
-export const apps = createAppStore()
+export const appsStore = new AppsStore()
+
+// Centralise any logic that enriches the apps list
+export const enrichedApps = derived([appsStore, auth], ([$store, $auth]) => {
+  const enrichedApps = $store.apps
+    ? $store.apps.map(app => ({
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+        lockedYou: app.lockedBy && app.lockedBy.email === $auth.user?.email,
+        lockedOther: app.lockedBy && app.lockedBy.email !== $auth.user?.email,
+        favourite: $auth?.user.appFavourites?.includes(app.appId),
+      }))
+    : []
+
+  if ($store.sortBy === "status") {
+    return enrichedApps.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        if (a.status === b.status) {
+          return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
+        }
+        return a.status === AppStatus.DEPLOYED ? -1 : 1
+      }
+      return a.favourite ? -1 : 1
+    })
+  } else if ($store.sortBy === "updated") {
+    return enrichedApps?.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        const aUpdated = a.updatedAt || "9999"
+        const bUpdated = b.updatedAt || "9999"
+        return aUpdated < bUpdated ? 1 : -1
+      }
+      return a.favourite ? -1 : 1
+    })
+  } else {
+    return enrichedApps?.sort((a, b) => {
+      if (a.favourite === b.favourite) {
+        return a.name?.toLowerCase() < b.name?.toLowerCase() ? -1 : 1
+      }
+      return a.favourite ? -1 : 1
+    })
+  }
+})
diff --git a/packages/builder/src/stores/portal/componentTreeNodesStore.js b/packages/builder/src/stores/portal/componentTreeNodesStore.js
deleted file mode 100644
index a6c07ae03b..0000000000
--- a/packages/builder/src/stores/portal/componentTreeNodesStore.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createSessionStorageStore } from "@budibase/frontend-core"
-
-const baseStore = createSessionStorageStore("openNodes", {})
-
-const toggleNode = componentId => {
-  baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = !openNodes[`nodeOpen-${componentId}`]
-
-    return openNodes
-  })
-}
-
-const expandNode = componentId => {
-  baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = true
-
-    return openNodes
-  })
-}
-
-const collapseNode = componentId => {
-  baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = false
-
-    return openNodes
-  })
-}
-
-const store = {
-  subscribe: baseStore.subscribe,
-  toggleNode,
-  expandNode,
-  collapseNode,
-}
-
-export default store
diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js
index ad2a59ddcd..ab3be2ce79 100644
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@@ -3,7 +3,7 @@ import { writable } from "svelte/store"
 export { organisation } from "./organisation"
 export { users } from "./users"
 export { admin } from "./admin"
-export { apps } from "./apps"
+export { appsStore, enrichedApps } from "./apps"
 export { email } from "./email"
 export { auth } from "./auth"
 export { oidc } from "./oidc"
diff --git a/packages/builder/tsconfig.json b/packages/builder/tsconfig.json
index b2084dba65..be79dfd85c 100644
--- a/packages/builder/tsconfig.json
+++ b/packages/builder/tsconfig.json
@@ -4,6 +4,16 @@
     "composite": true,
     "declaration": true,
     "sourceMap": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "assets/*": ["./assets/*"],
+      "@budibase/*": [
+        "../*/src/index.ts",
+        "../*/src/index.js",
+        "../*",
+        "../../node_modules/@budibase/*"
+      ],
+      "*": ["./src/*"]
+    }
   }
 }
diff --git a/packages/cli/tsconfig.build.json b/packages/cli/tsconfig.build.json
index 9fbccadd31..e52d886194 100644
--- a/packages/cli/tsconfig.build.json
+++ b/packages/cli/tsconfig.build.json
@@ -11,11 +11,13 @@
     "types": ["node", "jest"],
     "outDir": "dist",
     "skipLibCheck": true,
+    "baseUrl": ".",
     "paths": {
       "@budibase/types": ["../types/src"],
       "@budibase/backend-core": ["../backend-core/src"],
       "@budibase/backend-core/*": ["../backend-core/*"],
-      "@budibase/shared-core": ["../shared-core/src"]
+      "@budibase/shared-core": ["../shared-core/src"],
+      "@budibase/string-templates": ["../string-templates/src"]
     }
   },
   "include": ["src/**/*"],
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index 6ca641e214..bf51d7ed76 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -1,16 +1,8 @@
 {
   "extends": "./tsconfig.build.json",
-  "compilerOptions": {
-    "composite": true,
-    "declaration": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "resolveJsonModule": true
-  },
   "ts-node": {
     "require": ["tsconfig-paths/register"],
     "swc": true
   },
-  "include": ["src/**/*", "package.json"],
   "exclude": ["node_modules", "dist"]
 }
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/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index f1dcdf6b37..1b92c0fefc 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -36,6 +36,7 @@
   export let pageWidth
   export let logoLinkUrl
   export let openLogoLinkInNewTab
+  export let textAlign
 
   export let embedded = false
 
@@ -226,7 +227,7 @@
                   {/if}
                 {/if}
                 {#if !hideTitle && title}
-                  <Heading size="S">{title}</Heading>
+                  <Heading size="S" {textAlign}>{title}</Heading>
                 {/if}
               </div>
               {#if !embedded}
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/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
new file mode 100644
index 0000000000..ea1c3b0a37
--- /dev/null
+++ b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
@@ -0,0 +1,86 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import { FieldType } from "@budibase/types"
+
+  export let field
+  export let schema
+  export let order
+
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    bigint: "bigintfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+    bb_reference: "bbreferencefield",
+  }
+
+  const getFieldSchema = field => {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
+      return null
+    }
+    return schema[fieldSchemaName]
+  }
+
+  const getComponentForField = field => {
+    const fieldSchema = getFieldSchema(field)
+    if (!fieldSchema) {
+      return null
+    }
+    const { type } = fieldSchema
+    return FieldTypeToComponentMap[type]
+  }
+
+  const getPropsForField = field => {
+    let fieldProps = field._component
+      ? {
+          ...field,
+        }
+      : {
+          field: field.name,
+          label: field.name,
+          placeholder: field.name,
+          _instanceName: field.name,
+        }
+
+    fieldProps = {
+      ...getPropsByType(field),
+      ...fieldProps,
+    }
+    return fieldProps
+  }
+
+  function getPropsByType(field) {
+    const propsMapByType = {
+      [FieldType.ATTACHMENT]: (_field, schema) => {
+        return {
+          maximum: schema?.constraints?.length?.maximum,
+        }
+      },
+    }
+
+    const fieldSchema = getFieldSchema(field)
+    const mapper = propsMapByType[fieldSchema.type]
+    if (mapper) {
+      return mapper(field, fieldSchema)
+    }
+  }
+</script>
+
+{#if getComponentForField(field) && field.active}
+  <BlockComponent
+    type={getComponentForField(field)}
+    props={getPropsForField(field)}
+    {order}
+    interactive
+    name={field?.field}
+  />
+{/if}
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b24c2f418a..762afc1579 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -5,7 +5,8 @@
   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"
+  import FormBlockComponent from "./FormBlockComponent.svelte"
 
   export let actionType
   export let rowId
@@ -15,7 +16,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")
 
@@ -23,28 +24,22 @@
   const currentStep = writable(1)
   setContext("current-step", currentStep)
 
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-    bb_reference: "bbreferencefield",
-  }
-
   let schema
 
   $: fetchSchema(dataSource)
   $: 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 || {}
 
@@ -68,27 +63,6 @@
     currentStep.set(newStep + 1)
   }
 
-  const getPropsForField = field => {
-    if (field._component) {
-      return field
-    }
-    return {
-      field: field.name,
-      label: field.name,
-      placeholder: field.name,
-      _instanceName: field.name,
-    }
-  }
-
-  const getComponentForField = field => {
-    const fieldSchemaName = field.field || field.name
-    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
-      return null
-    }
-    const type = schema[fieldSchemaName].type
-    return FieldTypeToComponentMap[type]
-  }
-
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
@@ -101,6 +75,7 @@
       .filter(field => !field.autocolumn)
       .map(field => ({
         name: field.name,
+        active: true,
       }))
   }
 
@@ -195,15 +170,7 @@
               class:mobile={$context.device.mobile}
             >
               {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
-                {#if getComponentForField(field)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={getPropsForField(field)}
-                    order={fieldIdx}
-                    interactive
-                    name={field.field}
-                  />
-                {/if}
+                <FormBlockComponent {field} {schema} order={fieldIdx} />
               {/each}
             </div>
           </BlockComponent>
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/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 24d4cfa14c..b0733f3f4b 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -2,6 +2,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import Placeholder from "components/app/Placeholder.svelte"
   import { getContext } from "svelte"
+  import FormBlockComponent from "../FormBlockComponent.svelte"
 
   export let dataSource
   export let actionType
@@ -14,49 +15,11 @@
   export let buttonPosition = "bottom"
   export let schema
 
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-    bb_reference: "bbreferencefield",
-  }
   const context = getContext("context")
 
   let formId
 
   $: renderHeader = buttons || title
-
-  const getComponentForField = field => {
-    const fieldSchemaName = field.field || field.name
-    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
-      return null
-    }
-    const type = schema[fieldSchemaName].type
-    return FieldTypeToComponentMap[type]
-  }
-
-  const getPropsForField = field => {
-    let fieldProps = field._component
-      ? {
-          ...field,
-        }
-      : {
-          field: field.name,
-          label: field.name,
-          placeholder: field.name,
-          _instanceName: field.name,
-        }
-    return fieldProps
-  }
 </script>
 
 {#if fields?.length}
@@ -132,15 +95,7 @@
         <BlockComponent type="container">
           <div class="form-block fields" class:mobile={$context.device.mobile}>
             {#each fields as field, idx}
-              {#if getComponentForField(field) && field.active}
-                <BlockComponent
-                  type={getComponentForField(field)}
-                  props={getPropsForField(field)}
-                  order={idx}
-                  interactive
-                  name={field?.field}
-                />
-              {/if}
+              <FormBlockComponent {field} {schema} order={idx} />
             {/each}
           </div>
         </BlockComponent>
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/api/app.js b/packages/frontend-core/src/api/app.js
index 49137cbecd..fff2e99fe5 100644
--- a/packages/frontend-core/src/api/app.js
+++ b/packages/frontend-core/src/api/app.js
@@ -83,6 +83,18 @@ export const buildAppEndpoints = API => ({
     })
   },
 
+  /**
+   * Duplicate an existing app
+   * @param app the app to dupe
+   */
+  duplicateApp: async (app, appId) => {
+    return await API.post({
+      url: `/api/applications/${appId}/duplicate`,
+      body: app,
+      json: false,
+    })
+  },
+
   /**
    * Update an application using an export - the body
    * should be of type FormData, with a "file" and a "password" if encrypted.
diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index e6c9e53c75..a1f5c4f2aa 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -9,6 +9,7 @@
   export let api
   export let invertX = false
   export let invertY = false
+  export let schema
 
   const { API, notifications } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
@@ -97,6 +98,7 @@
       {value}
       compact
       on:change={e => onChange(e.detail)}
+      maximum={schema.constraints?.length?.maximum}
       {processFiles}
       {deleteAttachments}
       {handleFileTooLarge}
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/pro b/packages/pro
index c4c98ae70f..8baf8586ec 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit c4c98ae70f2e936009250893898ecf11f4ddf2c3
+Subproject commit 8baf8586ec078951230c8466d5f13f9b6d5ed055
diff --git a/packages/server/Dockerfile b/packages/server/Dockerfile
index 3aae395bc5..7c0e6e59bc 100644
--- a/packages/server/Dockerfile
+++ b/packages/server/Dockerfile
@@ -41,17 +41,9 @@ COPY scripts/removeWorkspaceDependencies.sh scripts/removeWorkspaceDependencies.
 RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
 
 
-WORKDIR /string-templates
-COPY packages/string-templates/package.json package.json
-RUN ../scripts/removeWorkspaceDependencies.sh package.json
-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
-COPY packages/string-templates .
-
-
 WORKDIR /app
 COPY packages/server/package.json .
 COPY packages/server/dist/yarn.lock .
-RUN cd ../string-templates && yarn link && cd - && yarn link @budibase/string-templates
 
 COPY scripts/removeWorkspaceDependencies.sh scripts/removeWorkspaceDependencies.sh
 RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
diff --git a/packages/server/__mocks__/airtable.ts b/packages/server/__mocks__/airtable.ts
index ee4b38ffcd..fed30ca069 100644
--- a/packages/server/__mocks__/airtable.ts
+++ b/packages/server/__mocks__/airtable.ts
@@ -1,8 +1,5 @@
-module AirtableMock {
-  function Airtable() {
-    // @ts-ignore
-    this.base = jest.fn()
-  }
-
-  module.exports = Airtable
+class Airtable {
+  base = jest.fn()
 }
+
+module.exports = Airtable
diff --git a/packages/server/__mocks__/aws-sdk.ts b/packages/server/__mocks__/aws-sdk.ts
index 3cf4bba007..d6d33f6c46 100644
--- a/packages/server/__mocks__/aws-sdk.ts
+++ b/packages/server/__mocks__/aws-sdk.ts
@@ -1,102 +1,81 @@
 import fs from "fs"
 import { join } from "path"
 
-module AwsMock {
-  const aws: any = {}
+const response = (body: any, extra?: any) => () => ({
+  promise: () => body,
+  ...extra,
+})
 
-  const response = (body: any, extra?: any) => () => ({
-    promise: () => body,
-    ...extra,
-  })
-
-  function DocumentClient() {
-    // @ts-ignore
-    this.put = jest.fn(response({}))
-    // @ts-ignore
-    this.query = jest.fn(
-      response({
-        Items: [],
-      })
-    )
-    // @ts-ignore
-    this.scan = jest.fn(
-      response({
-        Items: [
-          {
-            Name: "test",
-          },
-        ],
-      })
-    )
-    // @ts-ignore
-    this.get = jest.fn(response({}))
-    // @ts-ignore
-    this.update = jest.fn(response({}))
-    // @ts-ignore
-    this.delete = jest.fn(response({}))
-  }
-
-  function S3() {
-    // @ts-ignore
-    this.listObjects = jest.fn(
-      response({
-        Contents: [],
-      })
-    )
-
-    // @ts-ignore
-    this.createBucket = jest.fn(
-      response({
-        Contents: {},
-      })
-    )
-
-    // @ts-ignore
-    this.deleteObjects = jest.fn(
-      response({
-        Contents: {},
-      })
-    )
-
-    // @ts-ignore
-    this.getSignedUrl = (operation, params) => {
-      return `http://example.com/${params.Bucket}/${params.Key}`
-    }
-
-    // @ts-ignore
-    this.headBucket = jest.fn(
-      response({
-        Contents: {},
-      })
-    )
-
-    // @ts-ignore
-    this.upload = jest.fn(
-      response({
-        Contents: {},
-      })
-    )
-
-    // @ts-ignore
-    this.getObject = jest.fn(
-      response(
+class DocumentClient {
+  put = jest.fn(response({}))
+  query = jest.fn(
+    response({
+      Items: [],
+    })
+  )
+  scan = jest.fn(
+    response({
+      Items: [
         {
-          Body: "",
+          Name: "test",
         },
-        {
-          createReadStream: jest
-            .fn()
-            .mockReturnValue(
-              fs.createReadStream(join(__dirname, "aws-sdk.ts"))
-            ),
-        }
-      )
-    )
-  }
-
-  aws.DynamoDB = { DocumentClient }
-  aws.S3 = S3
-  aws.config = { update: jest.fn() }
-
-  module.exports = aws
+      ],
+    })
+  )
+  get = jest.fn(response({}))
+  update = jest.fn(response({}))
+  delete = jest.fn(response({}))
+}
+
+class S3 {
+  listObjects = jest.fn(
+    response({
+      Contents: [],
+    })
+  )
+  createBucket = jest.fn(
+    response({
+      Contents: {},
+    })
+  )
+  deleteObjects = jest.fn(
+    response({
+      Contents: {},
+    })
+  )
+  getSignedUrl = jest.fn((operation, params) => {
+    return `http://example.com/${params.Bucket}/${params.Key}`
+  })
+  headBucket = jest.fn(
+    response({
+      Contents: {},
+    })
+  )
+  upload = jest.fn(
+    response({
+      Contents: {},
+    })
+  )
+  getObject = jest.fn(
+    response(
+      {
+        Body: "",
+      },
+      {
+        createReadStream: jest
+          .fn()
+          .mockReturnValue(fs.createReadStream(join(__dirname, "aws-sdk.ts"))),
+      }
+    )
+  )
+}
+
+module.exports = {
+  DynamoDB: {
+    DocumentClient,
+  },
+  S3,
+  config: {
+    update: jest.fn(),
+  },
 }
diff --git a/packages/server/__mocks__/mssql.ts b/packages/server/__mocks__/mssql.ts
index cdfb7d520e..6a34e1e9d7 100644
--- a/packages/server/__mocks__/mssql.ts
+++ b/packages/server/__mocks__/mssql.ts
@@ -1,24 +1,17 @@
-module MsSqlMock {
-  const mssql: any = {}
-
-  mssql.query = jest.fn(() => ({
+module.exports = {
+  ConnectionPool: jest.fn(() => ({
+    connect: jest.fn(() => ({
+      request: jest.fn(() => ({
+        query: jest.fn(sql => ({ recordset: [sql] })),
+      })),
+    })),
+  })),
+  query: jest.fn(() => ({
     recordset: [
       {
         a: "string",
         b: 1,
       },
     ],
-  }))
-
-  // mssql.connect = jest.fn(() => ({ recordset: [] }))
-
-  mssql.ConnectionPool = jest.fn(() => ({
-    connect: jest.fn(() => ({
-      request: jest.fn(() => ({
-        query: jest.fn(sql => ({ recordset: [sql] })),
-      })),
-    })),
-  }))
-
-  module.exports = mssql
+  })),
 }
diff --git a/packages/server/__mocks__/mysql2.ts b/packages/server/__mocks__/mysql2.ts
index 9d42a35dd8..67ff897811 100644
--- a/packages/server/__mocks__/mysql2.ts
+++ b/packages/server/__mocks__/mysql2.ts
@@ -1,14 +1,11 @@
-module MySQLMock {
-  const mysql: any = {}
-
-  const client = {
-    connect: jest.fn(),
-    query: jest.fn((query, bindings, fn) => {
-      fn(null, [])
-    }),
-  }
-
-  mysql.createConnection = jest.fn(() => client)
-
-  module.exports = mysql
+const client = {
+  connect: jest.fn(),
+  query: jest.fn((query, bindings, fn) => {
+    fn(null, [])
+  }),
+}
+
+module.exports = {
+  createConnection: jest.fn(() => client),
+  client,
 }
diff --git a/packages/server/__mocks__/oracledb.ts b/packages/server/__mocks__/oracledb.ts
index fd19845eee..0172ace0e6 100644
--- a/packages/server/__mocks__/oracledb.ts
+++ b/packages/server/__mocks__/oracledb.ts
@@ -1,31 +1,21 @@
-module OracleDbMock {
-  // mock execute
-  const execute = jest.fn(() => ({
-    rows: [
-      {
-        a: "string",
-        b: 1,
-      },
-    ],
-  }))
+const executeMock = jest.fn(() => ({
+  rows: [
+    {
+      a: "string",
+      b: 1,
+    },
+  ],
+}))
 
-  const close = jest.fn()
+const closeMock = jest.fn()
 
-  // mock connection
-  function Connection() {}
-  Connection.prototype.execute = execute
-  Connection.prototype.close = close
-
-  // mock oracledb
-  const oracleDb: any = {}
-  oracleDb.getConnection = jest.fn(() => {
-    // @ts-ignore
-    return new Connection()
-  })
-
-  // expose mocks
-  oracleDb.executeMock = execute
-  oracleDb.closeMock = close
-
-  module.exports = oracleDb
+class Connection {
+  execute = executeMock
+  close = closeMock
+}
+
+module.exports = {
+  getConnection: jest.fn(() => new Connection()),
+  executeMock,
+  closeMock,
 }
diff --git a/packages/server/__mocks__/pg.ts b/packages/server/__mocks__/pg.ts
index 110933ad52..50a7c7349e 100644
--- a/packages/server/__mocks__/pg.ts
+++ b/packages/server/__mocks__/pg.ts
@@ -1,30 +1,25 @@
-module PgMock {
-  const pg: any = {}
+const query = jest.fn(() => ({
+  rows: [
+    {
+      a: "string",
+      b: 1,
+    },
+  ],
+}))
 
-  const query = jest.fn(() => ({
-    rows: [
-      {
-        a: "string",
-        b: 1,
-      },
-    ],
-  }))
-
-  // constructor
-  function Client() {}
-
-  Client.prototype.query = query
-  Client.prototype.end = jest.fn(cb => {
+class Client {
+  query = query
+  end = jest.fn(cb => {
     if (cb) cb()
   })
-  Client.prototype.connect = jest.fn()
-  Client.prototype.release = jest.fn()
-
-  const on = jest.fn()
-
-  pg.Client = Client
-  pg.queryMock = query
-  pg.on = on
-
-  module.exports = pg
+  connect = jest.fn()
+  release = jest.fn()
+}
+
+const on = jest.fn()
+
+module.exports = {
+  Client,
+  queryMock: query,
+  on,
 }
diff --git a/packages/server/jest.config.ts b/packages/server/jest.config.ts
index 80b187966c..6c6d6a20d3 100644
--- a/packages/server/jest.config.ts
+++ b/packages/server/jest.config.ts
@@ -30,6 +30,8 @@ const baseConfig: Config.InitialProjectOptions = {
     "@budibase/backend-core": "<rootDir>/../backend-core/src",
     "@budibase/shared-core": "<rootDir>/../shared-core/src",
     "@budibase/types": "<rootDir>/../types/src",
+    "@budibase/string-templates/(.*)": ["<rootDir>/../string-templates/$1"],
+    "@budibase/string-templates": ["<rootDir>/../string-templates/src"],
   },
 }
 
diff --git a/packages/server/package.json b/packages/server/package.json
index 97de17eb58..8e66f3d7e0 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",
@@ -174,6 +175,10 @@
         ]
       },
       "build": {
+        "inputs": [
+          "{projectRoot}/builder",
+          "{projectRoot}/client"
+        ],
         "outputs": [
           "{projectRoot}/builder",
           "{projectRoot}/client",
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 0bc93888ae..8e62954d88 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -26,6 +26,7 @@ import {
   env as envCore,
   ErrorCode,
   events,
+  HTTPError,
   migrations,
   objectStore,
   roles,
@@ -50,6 +51,8 @@ import {
   CreateAppRequest,
   FetchAppDefinitionResponse,
   FetchAppPackageResponse,
+  DuplicateAppRequest,
+  DuplicateAppResponse,
 } from "@budibase/types"
 import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import sdk from "../../sdk"
@@ -122,7 +125,7 @@ interface AppTemplate {
   templateString?: string
   useTemplate?: string
   file?: {
-    type: string
+    type?: string
     path: string
     password?: string
   }
@@ -263,6 +266,10 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
       ...(ctx.request.files.templateFile as any),
       password: encryptionPassword,
     }
+  } else if (typeof ctx.request.body.file?.path === "string") {
+    instanceConfig.file = {
+      path: ctx.request.body.file?.path,
+    }
   }
   const tenantId = tenancy.isMultiTenant() ? tenancy.getTenantId() : null
   const appId = generateDevAppID(generateAppID(tenantId))
@@ -372,12 +379,20 @@ async function creationEvents(request: any, app: App) {
     else if (request.files?.templateFile) {
       creationFns.push(a => events.app.fileImported(a))
     }
+    // from server file path
+    else if (request.body.file) {
+      // explicitly pass in the newly created app id
+      creationFns.push(a => events.app.duplicated(a, app.appId))
+    }
     // unknown
     else {
       console.error("Could not determine template creation event")
     }
   }
-  creationFns.push(a => events.app.created(a))
+
+  if (!request.duplicate) {
+    creationFns.push(a => events.app.created(a))
+  }
 
   for (let fn of creationFns) {
     await fn(app)
@@ -391,8 +406,10 @@ async function appPostCreate(ctx: UserCtx, app: App) {
     tenantId,
     appId: app.appId,
   })
+
   await creationEvents(ctx.request, app)
-  // app import & template creation
+
+  // app import, template creation and duplication
   if (ctx.request.body.useTemplate === "true") {
     const { rows } = await getUniqueRows([app.appId])
     const rowCount = rows ? rows.length : 0
@@ -421,7 +438,7 @@ async function appPostCreate(ctx: UserCtx, app: App) {
   }
 }
 
-export async function create(ctx: UserCtx) {
+export async function create(ctx: UserCtx<CreateAppRequest, App>) {
   const newApplication = await quotas.addApp(() => performAppCreate(ctx))
   await appPostCreate(ctx, newApplication)
   await cache.bustCache(cache.CacheKey.CHECKLIST)
@@ -626,6 +643,69 @@ export async function importToApp(ctx: UserCtx) {
   ctx.body = { message: "app updated" }
 }
 
+/**
+ * Create a copy of the latest dev application.
+ * Performs an export of the app, then imports from the export dir path
+ */
+export async function duplicateApp(
+  ctx: UserCtx<DuplicateAppRequest, DuplicateAppResponse>
+) {
+  const { name: appName, url: possibleUrl } = ctx.request.body
+  const { appId: sourceAppId } = ctx.params
+  const [app] = await dbCore.getAppsByIDs([sourceAppId])
+
+  if (!app) {
+    ctx.throw(404, "Source app not found")
+  }
+
+  const apps = (await dbCore.getAllApps({ dev: true })) as App[]
+
+  checkAppName(ctx, apps, appName)
+  const url = sdk.applications.getAppUrl({ name: appName, url: possibleUrl })
+  checkAppUrl(ctx, apps, url)
+
+  const tmpPath = await sdk.backups.exportApp(sourceAppId, {
+    excludeRows: false,
+    tar: false,
+  })
+
+  const createRequestBody: CreateAppRequest = {
+    name: appName,
+    url: possibleUrl,
+    useTemplate: "true",
+    // The app export path
+    file: {
+      path: tmpPath,
+    },
+  }
+
+  // Build a new request
+  const createRequest = {
+    roleId: ctx.roleId,
+    user: {
+      ...ctx.user,
+      _id: dbCore.getGlobalIDFromUserMetadataID(ctx.user._id || ""),
+    },
+    request: {
+      body: createRequestBody,
+    },
+  } as UserCtx<CreateAppRequest, App>
+
+  // Build the new application
+  await create(createRequest)
+  const { body: newApplication } = createRequest
+
+  if (!newApplication) {
+    ctx.throw(500, "There was a problem duplicating the application")
+  }
+
+  ctx.body = {
+    duplicateAppId: newApplication?.appId,
+    sourceAppId,
+  }
+  ctx.status = 200
+}
+
 export async function updateAppPackage(
   appPackage: Partial<App>,
   appId: string
diff --git a/packages/server/src/api/controllers/plugin/index.ts b/packages/server/src/api/controllers/plugin/index.ts
index a8a451c98c..c7d4912db3 100644
--- a/packages/server/src/api/controllers/plugin/index.ts
+++ b/packages/server/src/api/controllers/plugin/index.ts
@@ -39,25 +39,28 @@ export async function create(ctx: any) {
     let name = "PLUGIN_" + Math.floor(100000 + Math.random() * 900000)
 
     switch (source) {
-      case PluginSource.NPM:
+      case PluginSource.NPM: {
         const { metadata: metadataNpm, directory: directoryNpm } =
           await npmUpload(url, name)
         metadata = metadataNpm
         directory = directoryNpm
         break
-      case PluginSource.GITHUB:
+      }
+      case PluginSource.GITHUB: {
         const { metadata: metadataGithub, directory: directoryGithub } =
           await githubUpload(url, name, githubToken)
         metadata = metadataGithub
         directory = directoryGithub
         break
-      case PluginSource.URL:
+      }
+      case PluginSource.URL: {
         const headersObj = headers || {}
         const { metadata: metadataUrl, directory: directoryUrl } =
           await urlUpload(url, name, headersObj)
         metadata = metadataUrl
         directory = directoryUrl
         break
+      }
     }
 
     pluginCore.validate(metadata?.schema)
diff --git a/packages/server/src/api/controllers/query/import/sources/openapi2.ts b/packages/server/src/api/controllers/query/import/sources/openapi2.ts
index 230647475e..6eb4766c70 100644
--- a/packages/server/src/api/controllers/query/import/sources/openapi2.ts
+++ b/packages/server/src/api/controllers/query/import/sources/openapi2.ts
@@ -109,13 +109,14 @@ export class OpenAPI2 extends OpenAPISource {
         for (let param of allParams) {
           if (parameterNotRef(param)) {
             switch (param.in) {
-              case "query":
+              case "query": {
                 let prefix = ""
                 if (queryString) {
                   prefix = "&"
                 }
                 queryString = `${queryString}${prefix}${param.name}={{${param.name}}}`
                 break
+              }
               case "header":
                 headers[param.name] = `{{${param.name}}}`
                 break
@@ -125,7 +126,7 @@ export class OpenAPI2 extends OpenAPISource {
               case "formData":
                 // future enhancement
                 break
-              case "body":
+              case "body": {
                 // set the request body to the example provided
                 // future enhancement: generate an example from the schema
                 let bodyParam: OpenAPIV2.InBodyParameterObject =
@@ -135,6 +136,7 @@ export class OpenAPI2 extends OpenAPISource {
                   requestBody = schema.example
                 }
                 break
+              }
             }
 
             // add the parameter if it can be bound in our config
diff --git a/packages/server/src/api/controllers/query/import/sources/openapi3.ts b/packages/server/src/api/controllers/query/import/sources/openapi3.ts
index f86f684c32..f6755c69ad 100644
--- a/packages/server/src/api/controllers/query/import/sources/openapi3.ts
+++ b/packages/server/src/api/controllers/query/import/sources/openapi3.ts
@@ -161,13 +161,14 @@ export class OpenAPI3 extends OpenAPISource {
         for (let param of allParams) {
           if (parameterNotRef(param)) {
             switch (param.in) {
-              case "query":
+              case "query": {
                 let prefix = ""
                 if (queryString) {
                   prefix = "&"
                 }
                 queryString = `${queryString}${prefix}${param.name}={{${param.name}}}`
                 break
+              }
               case "header":
                 headers[param.name] = `{{${param.name}}}`
                 break
diff --git a/packages/server/src/api/controllers/query/index.ts b/packages/server/src/api/controllers/query/index.ts
index 3c21537484..0dba20dacd 100644
--- a/packages/server/src/api/controllers/query/index.ts
+++ b/packages/server/src/api/controllers/query/index.ts
@@ -14,22 +14,35 @@ import {
   SessionCookie,
   JsonFieldSubType,
   QueryResponse,
-  QueryPreview,
   QuerySchema,
   FieldType,
   ExecuteQueryRequest,
   ExecuteQueryResponse,
-  Row,
   QueryParameter,
   PreviewQueryRequest,
   PreviewQueryResponse,
 } from "@budibase/types"
 import { ValidQueryNameRegex, utils as JsonUtils } from "@budibase/shared-core"
+import { findHBSBlocks } from "@budibase/string-templates"
 
 const Runner = new Thread(ThreadType.QUERY, {
   timeoutMs: env.QUERY_THREAD_TIMEOUT,
 })
 
+function validateQueryInputs(parameters: Record<string, string>) {
+  for (let entry of Object.entries(parameters)) {
+    const [key, value] = entry
+    if (typeof value !== "string") {
+      continue
+    }
+    if (findHBSBlocks(value).length !== 0) {
+      throw new Error(
+        `Parameter '${key}' input contains a handlebars binding - this is not allowed.`
+      )
+    }
+  }
+}
+
 export async function fetch(ctx: UserCtx) {
   ctx.body = await sdk.queries.fetch()
 }
@@ -123,10 +136,10 @@ function getAuthConfig(ctx: UserCtx) {
 
 function enrichParameters(
   queryParameters: QueryParameter[],
-  requestParameters: { [key: string]: string } = {}
-): {
-  [key: string]: string
-} {
+  requestParameters: Record<string, string> = {}
+): Record<string, string> {
+  // first check parameters are all valid
+  validateQueryInputs(requestParameters)
   // make sure parameters are fully enriched with defaults
   for (let parameter of queryParameters) {
     if (!requestParameters[parameter.name]) {
diff --git a/packages/server/src/api/controllers/row/ExternalRequest.ts b/packages/server/src/api/controllers/row/ExternalRequest.ts
index 685af4e98e..d25ae952e3 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)
@@ -714,7 +717,7 @@ export class ExternalRequest<T extends Operation> {
 
       const rows = related[key]?.rows || []
 
-      function relationshipMatchPredicate({
+      const relationshipMatchPredicate = ({
         row,
         linkPrimary,
         linkSecondary,
@@ -722,7 +725,7 @@ export class ExternalRequest<T extends Operation> {
         row: Row
         linkPrimary: string
         linkSecondary?: string
-      }) {
+      }) => {
         const matchesPrimaryLink =
           row[linkPrimary] === relationship.id ||
           row[linkPrimary] === body?.[linkPrimary]
@@ -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/alias.ts b/packages/server/src/api/controllers/row/alias.ts
index 1d586c54fd..60c207c8ce 100644
--- a/packages/server/src/api/controllers/row/alias.ts
+++ b/packages/server/src/api/controllers/row/alias.ts
@@ -23,6 +23,12 @@ const DISABLED_WRITE_CLIENTS: SqlClient[] = [
   SqlClient.ORACLE,
 ]
 
+const DISABLED_OPERATIONS: Operation[] = [
+  Operation.CREATE_TABLE,
+  Operation.UPDATE_TABLE,
+  Operation.DELETE_TABLE,
+]
+
 class CharSequence {
   static alphabet = "abcdefghijklmnopqrstuvwxyz"
   counters: number[]
@@ -59,13 +65,18 @@ export default class AliasTables {
   }
 
   isAliasingEnabled(json: QueryJson, datasource: Datasource) {
+    const operation = json.endpoint.operation
     const fieldLength = json.resource?.fields?.length
-    if (!fieldLength || fieldLength <= 0) {
+    if (
+      !fieldLength ||
+      fieldLength <= 0 ||
+      DISABLED_OPERATIONS.includes(operation)
+    ) {
       return false
     }
     try {
       const sqlClient = getSQLClient(datasource)
-      const isWrite = WRITE_OPERATIONS.includes(json.endpoint.operation)
+      const isWrite = WRITE_OPERATIONS.includes(operation)
       const isDisabledClient = DISABLED_WRITE_CLIENTS.includes(sqlClient)
       if (isWrite && isDisabledClient) {
         return false
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/index.ts b/packages/server/src/api/index.ts
index ad3d8307da..92cee95ea6 100644
--- a/packages/server/src/api/index.ts
+++ b/packages/server/src/api/index.ts
@@ -1,6 +1,7 @@
 import Router from "@koa/router"
 import { auth, middleware, env as envCore } from "@budibase/backend-core"
 import currentApp from "../middleware/currentapp"
+import cleanup from "../middleware/cleanup"
 import zlib from "zlib"
 import { mainRoutes, staticRoutes, publicRoutes } from "./routes"
 import { middleware as pro } from "@budibase/pro"
@@ -62,6 +63,8 @@ if (apiEnabled()) {
     .use(auth.auditLog)
     // @ts-ignore
     .use(migrations)
+    // @ts-ignore
+    .use(cleanup)
 
   // authenticated routes
   for (let route of mainRoutes) {
diff --git a/packages/server/src/api/routes/application.ts b/packages/server/src/api/routes/application.ts
index 7e01a3c2ef..07db85451a 100644
--- a/packages/server/src/api/routes/application.ts
+++ b/packages/server/src/api/routes/application.ts
@@ -55,9 +55,14 @@ router
   )
   .delete(
     "/api/applications/:appId",
-    authorized(permissions.GLOBAL_BUILDER),
+    authorized(permissions.BUILDER),
     controller.destroy
   )
+  .post(
+    "/api/applications/:appId/duplicate",
+    authorized(permissions.BUILDER),
+    controller.duplicateApp
+  )
   .post(
     "/api/applications/:appId/import",
     authorized(permissions.BUILDER),
diff --git a/packages/server/src/api/routes/tests/__snapshots__/datasource.spec.ts.snap b/packages/server/src/api/routes/tests/__snapshots__/datasource.spec.ts.snap
index 8dc472173c..57d79db24b 100644
--- a/packages/server/src/api/routes/tests/__snapshots__/datasource.spec.ts.snap
+++ b/packages/server/src/api/routes/tests/__snapshots__/datasource.spec.ts.snap
@@ -81,6 +81,7 @@ exports[`/datasources fetch returns all the datasources from the server 1`] = `
   {
     "config": {},
     "createdAt": "2020-01-01T00:00:00.000Z",
+    "isSQL": true,
     "name": "Test",
     "source": "POSTGRES",
     "type": "datasource",
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/appImport.spec.ts b/packages/server/src/api/routes/tests/appImport.spec.ts
index 51331323de..b2ef39838d 100644
--- a/packages/server/src/api/routes/tests/appImport.spec.ts
+++ b/packages/server/src/api/routes/tests/appImport.spec.ts
@@ -25,8 +25,8 @@ describe("/applications/:appId/import", () => {
       .expect(200)
     const appPackage = await config.api.application.get(appId!)
     expect(appPackage.navigation?.links?.length).toBe(2)
-    expect(expect(appPackage.navigation?.links?.[0].url).toBe("/blank"))
-    expect(expect(appPackage.navigation?.links?.[1].url).toBe("/derp"))
+    expect(appPackage.navigation?.links?.[0].url).toBe("/blank")
+    expect(appPackage.navigation?.links?.[1].url).toBe("/derp")
     const screens = await config.api.screen.list()
     expect(screens.length).toBe(2)
     expect(screens[0].routing.route).toBe("/derp")
diff --git a/packages/server/src/api/routes/tests/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index 63c9fe44b8..700bd38c1f 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -19,6 +19,7 @@ import env from "../../../environment"
 import { type App } from "@budibase/types"
 import tk from "timekeeper"
 import * as uuid from "uuid"
+import { structures } from "@budibase/backend-core/tests"
 
 describe("/applications", () => {
   let config = setup.getConfig()
@@ -30,226 +31,13 @@ describe("/applications", () => {
   beforeEach(async () => {
     app = await config.api.application.create({ name: utils.newid() })
     const deployment = await config.api.application.publish(app.appId)
-    expect(deployment.status).toBe("SUCCESS")
+    if (deployment.status !== "SUCCESS") {
+      throw new Error("Failed to publish app")
+    }
     jest.clearAllMocks()
   })
 
-  describe("create", () => {
-    it("creates empty app", async () => {
-      const app = await config.api.application.create({ name: utils.newid() })
-      expect(app._id).toBeDefined()
-      expect(events.app.created).toBeCalledTimes(1)
-    })
-
-    it("creates app from template", async () => {
-      const app = await config.api.application.create({
-        name: utils.newid(),
-        useTemplate: "true",
-        templateKey: "test",
-        templateString: "{}",
-      })
-      expect(app._id).toBeDefined()
-      expect(events.app.created).toBeCalledTimes(1)
-      expect(events.app.templateImported).toBeCalledTimes(1)
-    })
-
-    it("creates app from file", async () => {
-      const app = await config.api.application.create({
-        name: utils.newid(),
-        useTemplate: "true",
-        templateFile: "src/api/routes/tests/data/export.txt",
-      })
-      expect(app._id).toBeDefined()
-      expect(events.app.created).toBeCalledTimes(1)
-      expect(events.app.fileImported).toBeCalledTimes(1)
-    })
-
-    it("should apply authorization to endpoint", async () => {
-      await checkBuilderEndpoint({
-        config,
-        method: "POST",
-        url: `/api/applications`,
-        body: { name: "My App" },
-      })
-    })
-
-    it("migrates navigation settings from old apps", async () => {
-      const app = await config.api.application.create({
-        name: utils.newid(),
-        useTemplate: "true",
-        templateFile: "src/api/routes/tests/data/old-app.txt",
-      })
-      expect(app._id).toBeDefined()
-      expect(app.navigation).toBeDefined()
-      expect(app.navigation!.hideLogo).toBe(true)
-      expect(app.navigation!.title).toBe("Custom Title")
-      expect(app.navigation!.hideLogo).toBe(true)
-      expect(app.navigation!.navigation).toBe("Left")
-      expect(app.navigation!.navBackground).toBe(
-        "var(--spectrum-global-color-blue-600)"
-      )
-      expect(app.navigation!.navTextColor).toBe(
-        "var(--spectrum-global-color-gray-50)"
-      )
-      expect(events.app.created).toBeCalledTimes(1)
-      expect(events.app.fileImported).toBeCalledTimes(1)
-    })
-  })
-
-  describe("fetch", () => {
-    it("lists all applications", async () => {
-      const apps = await config.api.application.fetch({ status: AppStatus.DEV })
-      expect(apps.length).toBeGreaterThan(0)
-    })
-  })
-
-  describe("fetchAppDefinition", () => {
-    it("should be able to get an apps definition", async () => {
-      const res = await config.api.application.getDefinition(app.appId)
-      expect(res.libraries.length).toEqual(1)
-    })
-  })
-
-  describe("fetchAppPackage", () => {
-    it("should be able to fetch the app package", async () => {
-      const res = await config.api.application.getAppPackage(app.appId)
-      expect(res.application).toBeDefined()
-      expect(res.application.appId).toEqual(config.getAppId())
-    })
-  })
-
-  describe("update", () => {
-    it("should be able to update the app package", async () => {
-      const updatedApp = await config.api.application.update(app.appId, {
-        name: "TEST_APP",
-      })
-      expect(updatedApp._rev).toBeDefined()
-      expect(events.app.updated).toBeCalledTimes(1)
-    })
-  })
-
-  describe("publish", () => {
-    it("should publish app with dev app ID", async () => {
-      await config.api.application.publish(app.appId)
-      expect(events.app.published).toBeCalledTimes(1)
-    })
-
-    it("should publish app with prod app ID", async () => {
-      await config.api.application.publish(app.appId.replace("_dev", ""))
-      expect(events.app.published).toBeCalledTimes(1)
-    })
-  })
-
-  describe("manage client library version", () => {
-    it("should be able to update the app client library version", async () => {
-      await config.api.application.updateClient(app.appId)
-      expect(events.app.versionUpdated).toBeCalledTimes(1)
-    })
-
-    it("should be able to revert the app client library version", async () => {
-      await config.api.application.updateClient(app.appId)
-      await config.api.application.revertClient(app.appId)
-      expect(events.app.versionReverted).toBeCalledTimes(1)
-    })
-  })
-
-  describe("edited at", () => {
-    it("middleware should set updatedAt", async () => {
-      const app = await tk.withFreeze(
-        "2021-01-01",
-        async () => await config.api.application.create({ name: utils.newid() })
-      )
-      expect(app.updatedAt).toEqual("2021-01-01T00:00:00.000Z")
-
-      const updatedApp = await tk.withFreeze(
-        "2021-02-01",
-        async () =>
-          await config.api.application.update(app.appId, {
-            name: "UPDATED_NAME",
-          })
-      )
-      expect(updatedApp._rev).toBeDefined()
-      expect(updatedApp.updatedAt).toEqual("2021-02-01T00:00:00.000Z")
-
-      const fetchedApp = await config.api.application.get(app.appId)
-      expect(fetchedApp.updatedAt).toEqual("2021-02-01T00:00:00.000Z")
-    })
-  })
-
-  describe("sync", () => {
-    it("app should sync correctly", async () => {
-      const { message } = await config.api.application.sync(app.appId)
-      expect(message).toEqual("App sync completed successfully.")
-    })
-
-    it("app should not sync if production", async () => {
-      const { message } = await config.api.application.sync(
-        app.appId.replace("_dev", ""),
-        { status: 400 }
-      )
-
-      expect(message).toEqual(
-        "This action cannot be performed for production apps"
-      )
-    })
-
-    it("app should not sync if sync is disabled", async () => {
-      env._set("DISABLE_AUTO_PROD_APP_SYNC", true)
-      const { message } = await config.api.application.sync(app.appId)
-      expect(message).toEqual(
-        "App sync disabled. You can reenable with the DISABLE_AUTO_PROD_APP_SYNC environment variable."
-      )
-      env._set("DISABLE_AUTO_PROD_APP_SYNC", false)
-    })
-  })
-
-  describe("unpublish", () => {
-    it("should unpublish app with dev app ID", async () => {
-      await config.api.application.unpublish(app.appId)
-      expect(events.app.unpublished).toBeCalledTimes(1)
-    })
-
-    it("should unpublish app with prod app ID", async () => {
-      await config.api.application.unpublish(app.appId.replace("_dev", ""))
-      expect(events.app.unpublished).toBeCalledTimes(1)
-    })
-  })
-
-  describe("delete", () => {
-    it("should delete published app and dev apps with dev app ID", async () => {
-      await config.api.application.delete(app.appId)
-      expect(events.app.deleted).toBeCalledTimes(1)
-      expect(events.app.unpublished).toBeCalledTimes(1)
-    })
-
-    it("should delete published app and dev app with prod app ID", async () => {
-      await config.api.application.delete(app.appId.replace("_dev", ""))
-      expect(events.app.deleted).toBeCalledTimes(1)
-      expect(events.app.unpublished).toBeCalledTimes(1)
-    })
-  })
-
-  describe("POST /api/applications/:appId/sync", () => {
-    it("should not sync automation logs", async () => {
-      const automation = await config.createAutomation()
-      await context.doInAppContext(app.appId, () =>
-        config.createAutomationLog(automation)
-      )
-
-      await config.api.application.sync(app.appId)
-
-      // does exist in prod
-      const prodLogs = await config.getAutomationLogs()
-      expect(prodLogs.data.length).toBe(1)
-
-      await config.api.application.unpublish(app.appId)
-
-      // doesn't exist in dev
-      const devLogs = await config.getAutomationLogs()
-      expect(devLogs.data.length).toBe(0)
-    })
-  })
-
+  // These need to go first for the app totals to make sense
   describe("permissions", () => {
     it("should only return apps a user has access to", async () => {
       let user = await config.createUser({
@@ -306,7 +94,7 @@ describe("/applications", () => {
       })
     })
 
-    it.only("should only return apps a user has access to through a custom role on a group", async () => {
+    it("should only return apps a user has access to through a custom role on a group", async () => {
       let user = await config.createUser({
         builder: { global: false },
         admin: { global: false },
@@ -338,4 +126,291 @@ describe("/applications", () => {
       })
     })
   })
+
+  describe("create", () => {
+    it("creates empty app", async () => {
+      const app = await config.api.application.create({ name: utils.newid() })
+      expect(app._id).toBeDefined()
+      expect(events.app.created).toHaveBeenCalledTimes(1)
+    })
+
+    it("creates app from template", async () => {
+      const app = await config.api.application.create({
+        name: utils.newid(),
+        useTemplate: "true",
+        templateKey: "test",
+        templateString: "{}",
+      })
+      expect(app._id).toBeDefined()
+      expect(events.app.created).toHaveBeenCalledTimes(1)
+      expect(events.app.templateImported).toHaveBeenCalledTimes(1)
+    })
+
+    it("creates app from file", async () => {
+      const app = await config.api.application.create({
+        name: utils.newid(),
+        useTemplate: "true",
+        templateFile: "src/api/routes/tests/data/export.txt",
+      })
+      expect(app._id).toBeDefined()
+      expect(events.app.created).toHaveBeenCalledTimes(1)
+      expect(events.app.fileImported).toHaveBeenCalledTimes(1)
+    })
+
+    it("should apply authorization to endpoint", async () => {
+      await checkBuilderEndpoint({
+        config,
+        method: "POST",
+        url: `/api/applications`,
+        body: { name: "My App" },
+      })
+    })
+
+    it("migrates navigation settings from old apps", async () => {
+      const app = await config.api.application.create({
+        name: utils.newid(),
+        useTemplate: "true",
+        templateFile: "src/api/routes/tests/data/old-app.txt",
+      })
+      expect(app._id).toBeDefined()
+      expect(app.navigation).toBeDefined()
+      expect(app.navigation!.hideLogo).toBe(true)
+      expect(app.navigation!.title).toBe("Custom Title")
+      expect(app.navigation!.hideLogo).toBe(true)
+      expect(app.navigation!.navigation).toBe("Left")
+      expect(app.navigation!.navBackground).toBe(
+        "var(--spectrum-global-color-blue-600)"
+      )
+      expect(app.navigation!.navTextColor).toBe(
+        "var(--spectrum-global-color-gray-50)"
+      )
+      expect(events.app.created).toHaveBeenCalledTimes(1)
+      expect(events.app.fileImported).toHaveBeenCalledTimes(1)
+    })
+
+    it("should reject with a known name", async () => {
+      await config.api.application.create(
+        { name: app.name },
+        { body: { message: "App name is already in use." }, status: 400 }
+      )
+    })
+
+    it("should reject with a known url", async () => {
+      await config.api.application.create(
+        { name: "made up", url: app?.url! },
+        { body: { message: "App URL is already in use." }, status: 400 }
+      )
+    })
+  })
+
+  describe("fetch", () => {
+    it("lists all applications", async () => {
+      const apps = await config.api.application.fetch({ status: AppStatus.DEV })
+      expect(apps.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("fetchAppDefinition", () => {
+    it("should be able to get an apps definition", async () => {
+      const res = await config.api.application.getDefinition(app.appId)
+      expect(res.libraries.length).toEqual(1)
+    })
+  })
+
+  describe("fetchAppPackage", () => {
+    it("should be able to fetch the app package", async () => {
+      const res = await config.api.application.getAppPackage(app.appId)
+      expect(res.application).toBeDefined()
+      expect(res.application.appId).toEqual(config.getAppId())
+    })
+  })
+
+  describe("update", () => {
+    it("should be able to update the app package", async () => {
+      const updatedApp = await config.api.application.update(app.appId, {
+        name: "TEST_APP",
+      })
+      expect(updatedApp._rev).toBeDefined()
+      expect(events.app.updated).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("publish", () => {
+    it("should publish app with dev app ID", async () => {
+      await config.api.application.publish(app.appId)
+      expect(events.app.published).toHaveBeenCalledTimes(1)
+    })
+
+    it("should publish app with prod app ID", async () => {
+      await config.api.application.publish(app.appId.replace("_dev", ""))
+      expect(events.app.published).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("manage client library version", () => {
+    it("should be able to update the app client library version", async () => {
+      await config.api.application.updateClient(app.appId)
+      expect(events.app.versionUpdated).toHaveBeenCalledTimes(1)
+    })
+
+    it("should be able to revert the app client library version", async () => {
+      await config.api.application.updateClient(app.appId)
+      await config.api.application.revertClient(app.appId)
+      expect(events.app.versionReverted).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("edited at", () => {
+    it("middleware should set updatedAt", async () => {
+      const app = await tk.withFreeze(
+        "2021-01-01",
+        async () => await config.api.application.create({ name: utils.newid() })
+      )
+      expect(app.updatedAt).toEqual("2021-01-01T00:00:00.000Z")
+
+      const updatedApp = await tk.withFreeze(
+        "2021-02-01",
+        async () =>
+          await config.api.application.update(app.appId, {
+            name: "UPDATED_NAME",
+          })
+      )
+      expect(updatedApp._rev).toBeDefined()
+      expect(updatedApp.updatedAt).toEqual("2021-02-01T00:00:00.000Z")
+
+      const fetchedApp = await config.api.application.get(app.appId)
+      expect(fetchedApp.updatedAt).toEqual("2021-02-01T00:00:00.000Z")
+    })
+  })
+
+  describe("sync", () => {
+    it("app should sync correctly", async () => {
+      const { message } = await config.api.application.sync(app.appId)
+      expect(message).toEqual("App sync completed successfully.")
+    })
+
+    it("app should not sync if production", async () => {
+      const { message } = await config.api.application.sync(
+        app.appId.replace("_dev", ""),
+        { status: 400 }
+      )
+
+      expect(message).toEqual(
+        "This action cannot be performed for production apps"
+      )
+    })
+
+    it("app should not sync if sync is disabled", async () => {
+      env._set("DISABLE_AUTO_PROD_APP_SYNC", true)
+      const { message } = await config.api.application.sync(app.appId)
+      expect(message).toEqual(
+        "App sync disabled. You can reenable with the DISABLE_AUTO_PROD_APP_SYNC environment variable."
+      )
+      env._set("DISABLE_AUTO_PROD_APP_SYNC", false)
+    })
+  })
+
+  describe("unpublish", () => {
+    it("should unpublish app with dev app ID", async () => {
+      await config.api.application.unpublish(app.appId)
+      expect(events.app.unpublished).toHaveBeenCalledTimes(1)
+    })
+
+    it("should unpublish app with prod app ID", async () => {
+      await config.api.application.unpublish(app.appId.replace("_dev", ""))
+      expect(events.app.unpublished).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("delete", () => {
+    it("should delete published app and dev apps with dev app ID", async () => {
+      await config.api.application.delete(app.appId)
+      expect(events.app.deleted).toHaveBeenCalledTimes(1)
+      expect(events.app.unpublished).toHaveBeenCalledTimes(1)
+    })
+
+    it("should delete published app and dev app with prod app ID", async () => {
+      await config.api.application.delete(app.appId.replace("_dev", ""))
+      expect(events.app.deleted).toHaveBeenCalledTimes(1)
+      expect(events.app.unpublished).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("POST /api/applications/:appId/duplicate", () => {
+    it("should duplicate an existing app", async () => {
+      const resp = await config.api.application.duplicateApp(
+        app.appId,
+        {
+          name: "to-dupe copy",
+          url: "/to-dupe-copy",
+        },
+        {
+          status: 200,
+        }
+      )
+
+      expect(events.app.duplicated).toHaveBeenCalled()
+      expect(resp.duplicateAppId).toBeDefined()
+      expect(resp.sourceAppId).toEqual(app.appId)
+      expect(resp.duplicateAppId).not.toEqual(app.appId)
+    })
+
+    it("should reject an unknown app id with a 404", async () => {
+      await config.api.application.duplicateApp(
+        structures.db.id(),
+        {
+          name: "to-dupe 123",
+          url: "/to-dupe-123",
+        },
+        {
+          status: 404,
+        }
+      )
+    })
+
+    it("should reject with a known name", async () => {
+      const resp = await config.api.application.duplicateApp(
+        app.appId,
+        {
+          name: app.name,
+          url: "/known-name",
+        },
+        { body: { message: "App name is already in use." }, status: 400 }
+      )
+      expect(events.app.duplicated).not.toHaveBeenCalled()
+    })
+
+    it("should reject with a known url", async () => {
+      const resp = await config.api.application.duplicateApp(
+        app.appId,
+        {
+          name: "this is fine",
+          url: app.url,
+        },
+        { body: { message: "App URL is already in use." }, status: 400 }
+      )
+      expect(events.app.duplicated).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("POST /api/applications/:appId/sync", () => {
+    it("should not sync automation logs", async () => {
+      const automation = await config.createAutomation()
+      await context.doInAppContext(app.appId, () =>
+        config.createAutomationLog(automation)
+      )
+
+      await config.api.application.sync(app.appId)
+
+      // does exist in prod
+      const prodLogs = await config.getAutomationLogs()
+      expect(prodLogs.data.length).toBe(1)
+
+      await config.api.application.unpublish(app.appId)
+
+      // doesn't exist in dev
+      const devLogs = await config.getAutomationLogs()
+      expect(devLogs.data.length).toBe(0)
+    })
+  })
 })
diff --git a/packages/server/src/api/routes/tests/automation.spec.ts b/packages/server/src/api/routes/tests/automation.spec.ts
index ee8fc7d544..322694df75 100644
--- a/packages/server/src/api/routes/tests/automation.spec.ts
+++ b/packages/server/src/api/routes/tests/automation.spec.ts
@@ -95,8 +95,8 @@ describe("/automations", () => {
       expect(res.body.message).toEqual("Automation created successfully")
       expect(res.body.automation.name).toEqual("My Automation")
       expect(res.body.automation._id).not.toEqual(null)
-      expect(events.automation.created).toBeCalledTimes(1)
-      expect(events.automation.stepCreated).not.toBeCalled()
+      expect(events.automation.created).toHaveBeenCalledTimes(1)
+      expect(events.automation.stepCreated).not.toHaveBeenCalled()
     })
 
     it("creates an automation with steps", async () => {
@@ -114,8 +114,8 @@ describe("/automations", () => {
       expect(res.body.message).toEqual("Automation created successfully")
       expect(res.body.automation.name).toEqual("My Automation")
       expect(res.body.automation._id).not.toEqual(null)
-      expect(events.automation.created).toBeCalledTimes(1)
-      expect(events.automation.stepCreated).toBeCalledTimes(2)
+      expect(events.automation.created).toHaveBeenCalledTimes(1)
+      expect(events.automation.stepCreated).toHaveBeenCalledTimes(2)
     })
 
     it("should apply authorization to endpoint", async () => {
@@ -158,7 +158,7 @@ describe("/automations", () => {
       automation = await config.createAutomation(automation)
       await setup.delay(500)
       const res = await testAutomation(config, automation)
-      expect(events.automation.tested).toBeCalledTimes(1)
+      expect(events.automation.tested).toHaveBeenCalledTimes(1)
       // this looks a bit mad but we don't actually have a way to wait for a response from the automation to
       // know that it has finished all of its actions - this is currently the best way
       // also when this runs in CI it is very temper-mental so for now trying to make run stable by repeating until it works
@@ -265,10 +265,10 @@ describe("/automations", () => {
         `Automation ${automation._id} updated successfully.`
       )
       // events
-      expect(events.automation.created).not.toBeCalled()
-      expect(events.automation.stepCreated).not.toBeCalled()
-      expect(events.automation.stepDeleted).not.toBeCalled()
-      expect(events.automation.triggerUpdated).not.toBeCalled()
+      expect(events.automation.created).not.toHaveBeenCalled()
+      expect(events.automation.stepCreated).not.toHaveBeenCalled()
+      expect(events.automation.stepDeleted).not.toHaveBeenCalled()
+      expect(events.automation.triggerUpdated).not.toHaveBeenCalled()
     })
 
     it("updates a automations name using POST request", async () => {
@@ -293,10 +293,10 @@ describe("/automations", () => {
         `Automation ${automation._id} updated successfully.`
       )
       // events
-      expect(events.automation.created).not.toBeCalled()
-      expect(events.automation.stepCreated).not.toBeCalled()
-      expect(events.automation.stepDeleted).not.toBeCalled()
-      expect(events.automation.triggerUpdated).not.toBeCalled()
+      expect(events.automation.created).not.toHaveBeenCalled()
+      expect(events.automation.stepCreated).not.toHaveBeenCalled()
+      expect(events.automation.stepDeleted).not.toHaveBeenCalled()
+      expect(events.automation.triggerUpdated).not.toHaveBeenCalled()
     })
 
     it("updates an automation trigger", async () => {
@@ -310,10 +310,10 @@ describe("/automations", () => {
       await update(automation)
 
       // events
-      expect(events.automation.created).not.toBeCalled()
-      expect(events.automation.stepCreated).not.toBeCalled()
-      expect(events.automation.stepDeleted).not.toBeCalled()
-      expect(events.automation.triggerUpdated).toBeCalledTimes(1)
+      expect(events.automation.created).not.toHaveBeenCalled()
+      expect(events.automation.stepCreated).not.toHaveBeenCalled()
+      expect(events.automation.stepDeleted).not.toHaveBeenCalled()
+      expect(events.automation.triggerUpdated).toHaveBeenCalledTimes(1)
     })
 
     it("adds automation steps", async () => {
@@ -327,10 +327,10 @@ describe("/automations", () => {
       await update(automation)
 
       // events
-      expect(events.automation.stepCreated).toBeCalledTimes(2)
-      expect(events.automation.created).not.toBeCalled()
-      expect(events.automation.stepDeleted).not.toBeCalled()
-      expect(events.automation.triggerUpdated).not.toBeCalled()
+      expect(events.automation.stepCreated).toHaveBeenCalledTimes(2)
+      expect(events.automation.created).not.toHaveBeenCalled()
+      expect(events.automation.stepDeleted).not.toHaveBeenCalled()
+      expect(events.automation.triggerUpdated).not.toHaveBeenCalled()
     })
 
     it("removes automation steps", async () => {
@@ -344,10 +344,10 @@ describe("/automations", () => {
       await update(automation)
 
       // events
-      expect(events.automation.stepDeleted).toBeCalledTimes(2)
-      expect(events.automation.stepCreated).not.toBeCalled()
-      expect(events.automation.created).not.toBeCalled()
-      expect(events.automation.triggerUpdated).not.toBeCalled()
+      expect(events.automation.stepDeleted).toHaveBeenCalledTimes(2)
+      expect(events.automation.stepCreated).not.toHaveBeenCalled()
+      expect(events.automation.created).not.toHaveBeenCalled()
+      expect(events.automation.triggerUpdated).not.toHaveBeenCalled()
     })
 
     it("adds and removes automation steps", async () => {
@@ -360,10 +360,10 @@ describe("/automations", () => {
       await update(automation)
 
       // events
-      expect(events.automation.stepCreated).toBeCalledTimes(2)
-      expect(events.automation.stepDeleted).toBeCalledTimes(1)
-      expect(events.automation.created).not.toBeCalled()
-      expect(events.automation.triggerUpdated).not.toBeCalled()
+      expect(events.automation.stepCreated).toHaveBeenCalledTimes(2)
+      expect(events.automation.stepDeleted).toHaveBeenCalledTimes(1)
+      expect(events.automation.created).not.toHaveBeenCalled()
+      expect(events.automation.triggerUpdated).not.toHaveBeenCalled()
     })
   })
 
@@ -400,7 +400,7 @@ describe("/automations", () => {
         .expect(200)
 
       expect(res.body.id).toEqual(automation._id)
-      expect(events.automation.deleted).toBeCalledTimes(1)
+      expect(events.automation.deleted).toHaveBeenCalledTimes(1)
     })
 
     it("should apply authorization to endpoint", async () => {
diff --git a/packages/server/src/api/routes/tests/backup.spec.ts b/packages/server/src/api/routes/tests/backup.spec.ts
index c862106d58..7b56145f8e 100644
--- a/packages/server/src/api/routes/tests/backup.spec.ts
+++ b/packages/server/src/api/routes/tests/backup.spec.ts
@@ -21,7 +21,7 @@ describe("/backups", () => {
     it("should be able to export app", async () => {
       const body = await config.api.backup.exportBasicBackup(config.getAppId()!)
       expect(body instanceof Buffer).toBe(true)
-      expect(events.app.exported).toBeCalledTimes(1)
+      expect(events.app.exported).toHaveBeenCalledTimes(1)
     })
 
     it("should apply authorization to endpoint", async () => {
diff --git a/packages/server/src/api/routes/tests/datasource.spec.ts b/packages/server/src/api/routes/tests/datasource.spec.ts
index 032da71b80..cbd830aee5 100644
--- a/packages/server/src/api/routes/tests/datasource.spec.ts
+++ b/packages/server/src/api/routes/tests/datasource.spec.ts
@@ -40,7 +40,7 @@ describe("/datasources", () => {
 
       expect(res.body.datasource.name).toEqual("Test")
       expect(res.body.errors).toEqual({})
-      expect(events.datasource.created).toBeCalledTimes(1)
+      expect(events.datasource.created).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -56,7 +56,7 @@ describe("/datasources", () => {
 
       expect(res.body.datasource.name).toEqual("Updated Test")
       expect(res.body.errors).toBeUndefined()
-      expect(events.datasource.updated).toBeCalledTimes(1)
+      expect(events.datasource.updated).toHaveBeenCalledTimes(1)
     })
 
     describe("dynamic variables", () => {
@@ -196,7 +196,7 @@ describe("/datasources", () => {
         .expect(200)
 
       expect(res.body.length).toEqual(1)
-      expect(events.datasource.deleted).toBeCalledTimes(1)
+      expect(events.datasource.deleted).toHaveBeenCalledTimes(1)
     })
 
     it("should apply authorization to endpoint", async () => {
diff --git a/packages/server/src/api/routes/tests/environmentVariables.spec.ts b/packages/server/src/api/routes/tests/environmentVariables.spec.ts
index 22114a1da3..9104dedf4f 100644
--- a/packages/server/src/api/routes/tests/environmentVariables.spec.ts
+++ b/packages/server/src/api/routes/tests/environmentVariables.spec.ts
@@ -138,10 +138,10 @@ describe("/api/env/variables", () => {
       .expect("Content-Type", /json/)
       .expect(200)
     expect(res.body.rows.length).toEqual(0)
-    expect(events.query.previewed).toBeCalledTimes(1)
+    expect(events.query.previewed).toHaveBeenCalledTimes(1)
     // API doesn't include config in response
     delete response.body.datasource.config
-    expect(events.query.previewed).toBeCalledWith(
+    expect(events.query.previewed).toHaveBeenCalledWith(
       response.body.datasource,
       queryPreview
     )
diff --git a/packages/server/src/api/routes/tests/permissions.spec.ts b/packages/server/src/api/routes/tests/permissions.spec.ts
index 1eabf6edbb..af7a2a578e 100644
--- a/packages/server/src/api/routes/tests/permissions.spec.ts
+++ b/packages/server/src/api/routes/tests/permissions.spec.ts
@@ -16,7 +16,7 @@ import {
   ViewV2,
 } from "@budibase/types"
 import * as setup from "./utilities"
-import { mocks } from "@budibase/backend-core/tests"
+import { generator, mocks } from "@budibase/backend-core/tests"
 
 const { basicRow } = setup.structures
 const { BUILTIN_ROLE_IDS } = roles
@@ -44,7 +44,10 @@ describe("/permission", () => {
 
     table = (await config.createTable()) as typeof table
     row = await config.createRow()
-    view = await config.api.viewV2.create({ tableId: table._id })
+    view = await config.api.viewV2.create({
+      tableId: table._id!,
+      name: generator.guid(),
+    })
     perms = await config.api.permission.add({
       roleId: STD_ROLE_ID,
       resourceId: table._id,
diff --git a/packages/server/src/api/routes/tests/queries/query.seq.spec.ts b/packages/server/src/api/routes/tests/queries/query.seq.spec.ts
index 4347ed9044..10b90eafb1 100644
--- a/packages/server/src/api/routes/tests/queries/query.seq.spec.ts
+++ b/packages/server/src/api/routes/tests/queries/query.seq.spec.ts
@@ -81,8 +81,8 @@ describe("/queries", () => {
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
       })
-      expect(events.query.created).toBeCalledTimes(1)
-      expect(events.query.updated).not.toBeCalled()
+      expect(events.query.created).toHaveBeenCalledTimes(1)
+      expect(events.query.updated).not.toHaveBeenCalled()
     })
   })
 
@@ -106,8 +106,8 @@ describe("/queries", () => {
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
       })
-      expect(events.query.created).not.toBeCalled()
-      expect(events.query.updated).toBeCalledTimes(1)
+      expect(events.query.created).not.toHaveBeenCalled()
+      expect(events.query.updated).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -210,8 +210,8 @@ describe("/queries", () => {
         .expect(200)
 
       expect(res.body).toEqual([])
-      expect(events.query.deleted).toBeCalledTimes(1)
-      expect(events.query.deleted).toBeCalledWith(datasource, query)
+      expect(events.query.deleted).toHaveBeenCalledTimes(1)
+      expect(events.query.deleted).toHaveBeenCalledWith(datasource, query)
     })
 
     it("should apply authorization to endpoint", async () => {
@@ -243,9 +243,12 @@ describe("/queries", () => {
         b: { type: "number", name: "b" },
       })
       expect(responseBody.rows.length).toEqual(1)
-      expect(events.query.previewed).toBeCalledTimes(1)
+      expect(events.query.previewed).toHaveBeenCalledTimes(1)
       delete datasource.config
-      expect(events.query.previewed).toBeCalledWith(datasource, queryPreview)
+      expect(events.query.previewed).toHaveBeenCalledWith(
+        datasource,
+        queryPreview
+      )
     })
 
     it("should apply authorization to endpoint", async () => {
@@ -327,6 +330,7 @@ describe("/queries", () => {
           ],
         },
       ]
+
       pg.queryMock.mockImplementation(() => ({
         rows,
       }))
@@ -408,6 +412,21 @@ describe("/queries", () => {
         },
       })
     })
+
+    it("shouldn't allow handlebars to be passed as parameters", async () => {
+      const res = await request
+        .post(`/api/queries/${query._id}`)
+        .send({
+          parameters: {
+            a: "{{ 'test' }}",
+          },
+        })
+        .set(config.defaultHeaders())
+        .expect(400)
+      expect(res.body.message).toEqual(
+        "Parameter 'a' input contains a handlebars binding - this is not allowed."
+      )
+    })
   })
 
   describe("variables", () => {
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index a032f4324c..854410dcf6 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,32 +25,46 @@ 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()
 tk.freeze(timestamp)
 
-const { basicRow } = setup.structures
+jest.unmock("mysql2")
+jest.unmock("mysql2/promise")
+jest.unmock("mssql")
+jest.unmock("pg")
 
 describe.each([
   ["internal", undefined],
   ["postgres", databaseTestProviders.postgres],
+  ["mysql", databaseTestProviders.mysql],
+  ["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) {
@@ -58,24 +73,17 @@ describe.each([
     setup.afterAll()
   })
 
-  beforeAll(async () => {
-    await config.init()
-
-    if (dsProvider) {
-      await config.createDatasource({
-        datasource: await dsProvider.datasource(),
-      })
-    }
-  })
-
-  const generateTableConfig: () => SaveTableRequest = () => {
-    return {
-      name: uuid.v4(),
+  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,
@@ -85,22 +93,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 () => {
@@ -127,53 +149,65 @@ 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 () => {
+  describe("create", () => {
+    it("creates a new row successfully", 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 () => {
+    it("fails to create a row for a table that does not exist", async () => {
+      const rowUsage = await getRowUsage()
+      await config.api.row.save("1234567", {}, { status: 404 })
+      await assertRowUsage(rowUsage)
+    })
+
+    it("fails to create a row if required fields are missing", async () => {
+      const rowUsage = await getRowUsage()
+      const table = await config.api.table.save(
+        saveTableRequest({
+          schema: {
+            required: {
+              type: FieldType.STRING,
+              name: "required",
+              constraints: {
+                type: "string",
+                presence: true,
+              },
+            },
+          },
+        })
+      )
+      await config.api.row.save(
+        table._id!,
+        {},
+        {
+          status: 500,
+          body: {
+            validationErrors: {
+              required: ["can't be blank"],
+            },
+          },
+        }
+      )
+      await assertRowUsage(rowUsage)
+    })
+
+    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,
@@ -190,81 +224,16 @@ 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)
-    })
-
-    it("updates a row successfully", async () => {
-      const existing = await config.createRow()
-      const rowUsage = await getRowUsage()
-
-      const res = await config.api.row.save(tableId, {
-        _id: existing._id,
-        _rev: existing._rev,
-        tableId,
-        name: "Updated Name",
-      })
-
-      expect(res.name).toEqual("Updated Name")
-      await assertRowUsage(rowUsage)
-    })
-
-    it("should load a row", async () => {
-      const existing = await config.createRow()
-
-      const res = await config.api.row.get(tableId, existing._id!)
-
-      expect(res).toEqual({
-        ...existing,
-        ...defaultRowFields,
-      })
-    })
-
-    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 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()
-    })
-
-    it("load should return 404 when row does not exist", async () => {
-      await config.createRow()
-
-      await config.api.row.get(tableId, "1234567", {
-        status: 404,
-      })
+      await assertRowUsage(rowUsage + 10)
     })
 
     isInternal &&
@@ -317,45 +286,47 @@ 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({
+            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,
@@ -368,8 +339,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,
@@ -388,127 +359,120 @@ 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",
-          },
-          OrderID: {
-            type: FieldType.NUMBER,
-            name: "OrderID",
-          },
-          Story: {
-            type: FieldType.STRING,
-            name: "Story",
-          },
-        },
-      })
+  describe("get", () => {
+    it("reads an existing row successfully", async () => {
+      const existing = await config.api.row.save(table._id!, {})
 
-      const createViewResponse = await config.createView({
-        name: uuid.v4(),
-        schema: {
-          Country: {
-            visible: true,
-          },
-          OrderID: {
-            visible: true,
-          },
-        },
-      })
+      const res = await config.api.row.get(table._id!, existing._id!)
 
-      const createRowResponse = await config.api.row.save(
-        createViewResponse.id,
-        {
-          OrderID: "1111",
-          Country: "Aussy",
-          Story: "aaaaa",
-        }
-      )
-
-      const row = await config.api.row.get(table._id!, createRowResponse._id!)
-      expect(row.Story).toBeUndefined()
-      expect(row).toEqual({
+      expect(res).toEqual({
+        ...existing,
         ...defaultRowFields,
-        OrderID: 1111,
-        Country: "Aussy",
-        _id: createRowResponse._id,
-        _rev: createRowResponse._rev,
-        tableId: table._id,
       })
     })
+
+    it("returns 404 when row does not exist", async () => {
+      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,
+      })
+    })
+  })
+
+  describe("fetch", () => {
+    it("fetches all rows for given tableId", async () => {
+      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(table._id!)
+      expect(res.map(r => r._id)).toEqual(
+        expect.arrayContaining(rows.map(r => r._id))
+      )
+    })
+
+    it("returns 404 when table does not exist", async () => {
+      await config.api.row.fetch("1234567", { status: 404 })
+    })
+  })
+
+  describe("update", () => {
+    it("updates an existing row successfully", async () => {
+      const existing = await config.api.row.save(table._id!, {})
+      const rowUsage = await getRowUsage()
+
+      const res = await config.api.row.save(table._id!, {
+        _id: existing._id,
+        _rev: existing._rev,
+        name: "Updated Name",
+      })
+
+      expect(res.name).toEqual("Updated Name")
+      await assertRowUsage(rowUsage)
+    })
   })
 
   describe("patch", () => {
     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()
 
@@ -530,7 +494,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(
@@ -622,12 +586,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!, {
@@ -638,10 +601,10 @@ 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: "2" }],
+        rows: [createdRow, { _id: "9999999" }],
       })
 
       expect(res[0]._id).toEqual(createdRow._id)
@@ -651,8 +614,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 () => {
@@ -684,13 +646,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!, {
@@ -704,9 +665,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()
 
@@ -720,7 +681,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)
@@ -758,91 +719,36 @@ describe.each([
     })
   })
 
-  // Legacy views are not available for external
-  isInternal &&
-    describe("fetchView", () => {
-      beforeEach(async () => {
-        const tableConfig = generateTableConfig()
-        table = await createTable(tableConfig)
-      })
-
-      it("should be able to fetch tables contents via 'view'", async () => {
-        const row = await config.createRow()
-        const rowUsage = await getRowUsage()
-
-        const rows = await config.api.legacyView.get(table._id!)
-        expect(rows.length).toEqual(1)
-        expect(rows[0]._id).toEqual(row._id)
-        await assertRowUsage(rowUsage)
-      })
-
-      it("should throw an error if view doesn't exist", async () => {
-        const rowUsage = await getRowUsage()
-
-        await config.api.legacyView.get("derp", { status: 404 })
-
-        await assertRowUsage(rowUsage)
-      })
-
-      it("should be able to run on a view", async () => {
-        const view = await config.createLegacyView({
-          tableId: table._id!,
-          name: "ViewTest",
-          filters: [],
-          schema: {},
-        })
-        const row = await config.createRow()
-        const rowUsage = await getRowUsage()
-
-        const rows = await config.api.legacyView.get(view.name)
-        expect(rows.length).toEqual(1)
-        expect(rows[0]._id).toEqual(row._id)
-
-        await assertRowUsage(rowUsage)
-      })
-    })
-
-  describe("fetchEnrichedRows", () => {
+  describe("enrich", () => {
     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 }
         }
@@ -875,15 +781,20 @@ describe.each([
 
   isInternal &&
     describe("attachments", () => {
-      beforeAll(async () => {
-        const tableConfig = generateTableConfig()
-        table = await createTable(tableConfig)
-      })
-
       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: [
@@ -904,14 +815,13 @@ describe.each([
       })
     })
 
-  describe("exportData", () => {
+  describe("exportRows", () => {
     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!],
       })
@@ -929,7 +839,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"],
@@ -942,25 +852,50 @@ describe.each([
       expect(Object.keys(row).length).toEqual(1)
       expect(row._id).toEqual(existing._id)
     })
+
+    it("should handle single quotes in row filtering", async () => {
+      const existing = await config.api.row.save(table._id!, {})
+      const res = await config.api.row.exportRows(table._id!, {
+        rows: [`['${existing._id!}']`],
+      })
+      const results = JSON.parse(res)
+      expect(results.length).toEqual(1)
+      const row = results[0]
+      expect(row._id).toEqual(existing._id)
+    })
+
+    it("should return an error on composite keys", async () => {
+      const existing = await config.api.row.save(table._id!, {})
+      await config.api.row.exportRows(
+        table._id!,
+        {
+          rows: [`['${existing._id!}']`, "['d001', '10111']"],
+        },
+        {
+          status: 400,
+          body: {
+            message: "Export data does not support composite keys.",
+          },
+        }
+      )
+    })
+
+    it("should return an error if no table is found", async () => {
+      const existing = await config.api.row.save(table._id!, {})
+      await config.api.row.exportRows(
+        "1234567",
+        { rows: [existing._id!] },
+        { status: 404 }
+      )
+    })
   })
 
   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",
@@ -982,7 +917,7 @@ describe.each([
             name: "jobTitle",
           },
         },
-      }
+      })
     }
 
     const randomRowData = () => ({
@@ -995,8 +930,10 @@ 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!,
+          name: generator.guid(),
           schema: {
             name: { visible: true },
             surname: { visible: true },
@@ -1030,9 +967,11 @@ 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,
+          name: generator.guid(),
           schema: {
             name: { visible: true },
             address: { visible: true },
@@ -1071,16 +1010,18 @@ 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,
+          name: generator.guid(),
           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] })
@@ -1093,9 +1034,11 @@ 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,
+          name: generator.guid(),
           schema: {
             name: { visible: true },
             address: { visible: true },
@@ -1103,9 +1046,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()
 
@@ -1124,46 +1067,40 @@ 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!,
+          name: generator.guid(),
+        })
         const response = await config.api.viewV2.search(createViewResponse.id)
 
         expect(response.rows).toHaveLength(10)
@@ -1187,8 +1124,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!, {
@@ -1209,7 +1144,9 @@ describe.each([
           )
         )
 
-        const createViewResponse = await config.createView({
+        const createViewResponse = await config.api.viewV2.create({
+          tableId: table._id!,
+          name: generator.guid(),
           query: [
             { operator: SearchQueryOperators.EQUAL, field: "age", value: 40 },
           ],
@@ -1310,8 +1247,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 },
@@ -1331,7 +1269,9 @@ 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!,
+              name: generator.guid(),
               sort: sortParams,
               schema: viewSchema,
             })
@@ -1350,7 +1290,9 @@ 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!,
+              name: generator.guid(),
               sort: {
                 field: "name",
                 order: SortOrder.ASCENDING,
@@ -1378,7 +1320,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!, {
@@ -1389,7 +1331,9 @@ describe.each([
           )
         )
 
-        const view = await config.createView({
+        const view = await config.api.viewV2.create({
+          tableId: table._id!,
+          name: generator.guid(),
           schema: { name: { visible: true } },
         })
         const response = await config.api.viewV2.search(view.id)
@@ -1409,21 +1353,27 @@ 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!,
+          name: generator.guid(),
+        })
         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!,
+          name: generator.guid(),
+        })
         const response = await config.api.viewV2.search(createViewResponse.id, {
           limit,
           query: {},
@@ -1433,56 +1383,50 @@ 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!,
+          name: generator.guid(),
+        })
+        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(),
@@ -1507,19 +1451,21 @@ 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!,
+            name: generator.guid(),
+          })
         })
 
         beforeEach(() => {
@@ -1528,7 +1474,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,
           })
         })
@@ -1537,11 +1483,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)
         })
@@ -1550,11 +1496,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)
         })
@@ -1563,16 +1509,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,
           })
         })
@@ -1583,18 +1529,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([
@@ -1656,21 +1592,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 = [
@@ -1689,37 +1613,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),
@@ -1732,17 +1652,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),
@@ -1753,17 +1671,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,
@@ -1778,19 +1694,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))),
@@ -1806,13 +1720,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,
@@ -1820,8 +1732,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(
@@ -1837,14 +1749,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,
@@ -1852,8 +1761,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),
@@ -1866,28 +1775,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],
@@ -1925,28 +1825,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],
@@ -1988,20 +1879,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,
@@ -2009,25 +1903,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]
@@ -2048,22 +1940,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!)
@@ -2091,22 +1983,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" })
@@ -2144,22 +2037,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/table.spec.ts b/packages/server/src/api/routes/tests/table.spec.ts
index 77704a0408..1038808fe1 100644
--- a/packages/server/src/api/routes/tests/table.spec.ts
+++ b/packages/server/src/api/routes/tests/table.spec.ts
@@ -20,7 +20,7 @@ import sdk from "../../../sdk"
 import * as uuid from "uuid"
 
 import tk from "timekeeper"
-import { mocks } from "@budibase/backend-core/tests"
+import { generator, mocks } from "@budibase/backend-core/tests"
 import { TableToBuild } from "../../../tests/utilities/TestConfiguration"
 
 tk.freeze(mocks.date.MOCK_DATE)
@@ -64,8 +64,8 @@ describe("/tables", () => {
         "Table TestTable saved successfully."
       )
       expect(res.body.name).toEqual("TestTable")
-      expect(events.table.created).toBeCalledTimes(1)
-      expect(events.table.created).toBeCalledWith(res.body)
+      expect(events.table.created).toHaveBeenCalledTimes(1)
+      expect(events.table.created).toHaveBeenCalledWith(res.body)
     })
 
     it("creates all the passed fields", async () => {
@@ -135,12 +135,12 @@ describe("/tables", () => {
 
       const res = await createTable(table)
 
-      expect(events.table.created).toBeCalledTimes(1)
-      expect(events.table.created).toBeCalledWith(res.body)
-      expect(events.table.imported).toBeCalledTimes(1)
-      expect(events.table.imported).toBeCalledWith(res.body)
-      expect(events.rows.imported).toBeCalledTimes(1)
-      expect(events.rows.imported).toBeCalledWith(res.body, 1)
+      expect(events.table.created).toHaveBeenCalledTimes(1)
+      expect(events.table.created).toHaveBeenCalledWith(res.body)
+      expect(events.table.imported).toHaveBeenCalledTimes(1)
+      expect(events.table.imported).toHaveBeenCalledWith(res.body)
+      expect(events.rows.imported).toHaveBeenCalledTimes(1)
+      expect(events.rows.imported).toHaveBeenCalledWith(res.body, 1)
     })
 
     it("should apply authorization to endpoint", async () => {
@@ -164,8 +164,8 @@ describe("/tables", () => {
         .expect("Content-Type", /json/)
         .expect(200)
 
-      expect(events.table.updated).toBeCalledTimes(1)
-      expect(events.table.updated).toBeCalledWith(res.body)
+      expect(events.table.updated).toHaveBeenCalledTimes(1)
+      expect(events.table.updated).toHaveBeenCalledWith(res.body)
     })
 
     it("updates all the row fields for a table when a schema key is renamed", async () => {
@@ -335,8 +335,8 @@ describe("/tables", () => {
         .expect(200)
 
       expect(events.table.created).not.toHaveBeenCalled()
-      expect(events.rows.imported).toBeCalledTimes(1)
-      expect(events.rows.imported).toBeCalledWith(
+      expect(events.rows.imported).toHaveBeenCalledTimes(1)
+      expect(events.rows.imported).toHaveBeenCalledWith(
         expect.objectContaining({
           name: "TestTable",
           _id: table._id,
@@ -417,8 +417,8 @@ describe("/tables", () => {
     it("should fetch views", async () => {
       const tableId = config.table!._id!
       const views = [
-        await config.api.viewV2.create({ tableId }),
-        await config.api.viewV2.create({ tableId }),
+        await config.api.viewV2.create({ tableId, name: generator.guid() }),
+        await config.api.viewV2.create({ tableId, name: generator.guid() }),
       ]
 
       const res = await request
@@ -455,7 +455,7 @@ describe("/tables", () => {
         },
       }))
 
-      await config.api.viewV2.create({ tableId })
+      await config.api.viewV2.create({ tableId, name: generator.guid() })
       await config.createLegacyView()
 
       const res = await config.api.table.fetch()
@@ -527,8 +527,8 @@ describe("/tables", () => {
         .expect("Content-Type", /json/)
         .expect(200)
       expect(res.body.message).toEqual(`Table ${testTable._id} deleted.`)
-      expect(events.table.deleted).toBeCalledTimes(1)
-      expect(events.table.deleted).toBeCalledWith({
+      expect(events.table.deleted).toHaveBeenCalledTimes(1)
+      expect(events.table.deleted).toHaveBeenCalledWith({
         ...testTable,
         tableId: testTable._id,
       })
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
deleted file mode 100644
index 92ff097899..0000000000
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ /dev/null
@@ -1,432 +0,0 @@
-const setup = require("./utilities")
-const { events } = require("@budibase/backend-core")
-
-function priceTable() {
-  return {
-    name: "table",
-    type: "table",
-    key: "name",
-    schema: {
-      Price: {
-        type: "number",
-        constraints: {},
-      },
-      Category: {
-        type: "string",
-        constraints: {
-          type: "string",
-        },
-      },
-    },
-  }
-}
-
-describe("/views", () => {
-  let request = setup.getRequest()
-  let config = setup.getConfig()
-  let table
-
-  afterAll(setup.afterAll)
-
-  beforeAll(async () => {
-    await config.init()
-  })
-
-  beforeEach(async () => {
-    table = await config.createTable(priceTable())
-  })
-
-  const saveView = async view => {
-    const viewToSave = {
-      name: "TestView",
-      field: "Price",
-      calculation: "stats",
-      tableId: table._id,
-      ...view,
-    }
-    return request
-      .post(`/api/views`)
-      .send(viewToSave)
-      .set(config.defaultHeaders())
-      .expect("Content-Type", /json/)
-      .expect(200)
-  }
-
-  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" })
-
-      expect(res.body.tableId).toBe(table._id)
-      expect(events.view.created).toBeCalledTimes(1)
-      expect(events.view.updated).not.toBeCalled()
-      expect(events.view.calculationCreated).toBeCalledTimes(1)
-      expect(events.view.calculationUpdated).not.toBeCalled()
-      expect(events.view.calculationDeleted).not.toBeCalled()
-      expect(events.view.filterCreated).not.toBeCalled()
-      expect(events.view.filterUpdated).not.toBeCalled()
-      expect(events.view.filterDeleted).not.toBeCalled()
-    })
-
-    it("creates a view with a filter", async () => {
-      jest.clearAllMocks()
-
-      const res = await saveView({
-        calculation: null,
-        filters: [
-          {
-            value: "1",
-            condition: "EQUALS",
-            key: "price",
-          },
-        ],
-      })
-
-      expect(res.body.tableId).toBe(table._id)
-      expect(events.view.created).toBeCalledTimes(1)
-      expect(events.view.updated).not.toBeCalled()
-      expect(events.view.calculationCreated).not.toBeCalled()
-      expect(events.view.calculationUpdated).not.toBeCalled()
-      expect(events.view.calculationDeleted).not.toBeCalled()
-      expect(events.view.filterCreated).toBeCalledTimes(1)
-      expect(events.view.filterUpdated).not.toBeCalled()
-      expect(events.view.filterDeleted).not.toBeCalled()
-    })
-
-    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,
-        })
-        .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)
-    })
-  })
-
-  describe("update", () => {
-    it("updates a view with no calculation or filter changed", async () => {
-      await saveView()
-      jest.clearAllMocks()
-
-      await saveView()
-
-      expect(events.view.created).not.toBeCalled()
-      expect(events.view.updated).toBeCalledTimes(1)
-      expect(events.view.calculationCreated).not.toBeCalled()
-      expect(events.view.calculationUpdated).not.toBeCalled()
-      expect(events.view.calculationDeleted).not.toBeCalled()
-      expect(events.view.filterCreated).not.toBeCalled()
-      expect(events.view.filterUpdated).not.toBeCalled()
-      expect(events.view.filterDeleted).not.toBeCalled()
-    })
-
-    it("updates a view calculation", async () => {
-      await saveView({ calculation: "sum" })
-      jest.clearAllMocks()
-
-      await saveView({ calculation: "count" })
-
-      expect(events.view.created).not.toBeCalled()
-      expect(events.view.updated).toBeCalledTimes(1)
-      expect(events.view.calculationCreated).not.toBeCalled()
-      expect(events.view.calculationUpdated).toBeCalledTimes(1)
-      expect(events.view.calculationDeleted).not.toBeCalled()
-      expect(events.view.filterCreated).not.toBeCalled()
-      expect(events.view.filterUpdated).not.toBeCalled()
-      expect(events.view.filterDeleted).not.toBeCalled()
-    })
-
-    it("deletes a view calculation", async () => {
-      await saveView({ calculation: "sum" })
-      jest.clearAllMocks()
-
-      await saveView({ calculation: null })
-
-      expect(events.view.created).not.toBeCalled()
-      expect(events.view.updated).toBeCalledTimes(1)
-      expect(events.view.calculationCreated).not.toBeCalled()
-      expect(events.view.calculationUpdated).not.toBeCalled()
-      expect(events.view.calculationDeleted).toBeCalledTimes(1)
-      expect(events.view.filterCreated).not.toBeCalled()
-      expect(events.view.filterUpdated).not.toBeCalled()
-      expect(events.view.filterDeleted).not.toBeCalled()
-    })
-
-    it("updates a view filter", async () => {
-      await saveView({
-        filters: [
-          {
-            value: "1",
-            condition: "EQUALS",
-            key: "price",
-          },
-        ],
-      })
-      jest.clearAllMocks()
-
-      await saveView({
-        filters: [
-          {
-            value: "2",
-            condition: "EQUALS",
-            key: "price",
-          },
-        ],
-      })
-
-      expect(events.view.created).not.toBeCalled()
-      expect(events.view.updated).toBeCalledTimes(1)
-      expect(events.view.calculationCreated).not.toBeCalled()
-      expect(events.view.calculationUpdated).not.toBeCalled()
-      expect(events.view.calculationDeleted).not.toBeCalled()
-      expect(events.view.filterCreated).not.toBeCalled()
-      expect(events.view.filterUpdated).toBeCalledTimes(1)
-      expect(events.view.filterDeleted).not.toBeCalled()
-    })
-
-    it("deletes a view filter", async () => {
-      await saveView({
-        filters: [
-          {
-            value: "1",
-            condition: "EQUALS",
-            key: "price",
-          },
-        ],
-      })
-      jest.clearAllMocks()
-
-      await saveView({ filters: [] })
-
-      expect(events.view.created).not.toBeCalled()
-      expect(events.view.updated).toBeCalledTimes(1)
-      expect(events.view.calculationCreated).not.toBeCalled()
-      expect(events.view.calculationUpdated).not.toBeCalled()
-      expect(events.view.calculationDeleted).not.toBeCalled()
-      expect(events.view.filterCreated).not.toBeCalled()
-      expect(events.view.filterUpdated).not.toBeCalled()
-      expect(events.view.filterDeleted).toBeCalledTimes(1)
-    })
-  })
-
-  describe("fetch", () => {
-    beforeEach(async () => {
-      table = await config.createTable(priceTable())
-    })
-
-    it("returns only custom views", async () => {
-      await config.createLegacyView({
-        name: "TestView",
-        field: "Price",
-        calculation: "stats",
-        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()
-    })
-  })
-
-  describe("query", () => {
-    it("returns data for the created view", async () => {
-      await config.createLegacyView({
-        name: "TestView",
-        field: "Price",
-        calculation: "stats",
-        tableId: table._id,
-      })
-      await config.createRow({
-        tableId: table._id,
-        Price: 1000,
-      })
-      await config.createRow({
-        tableId: table._id,
-        Price: 2000,
-      })
-      await config.createRow({
-        tableId: 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()
-    })
-
-    it("returns data for the created view using a group by", async () => {
-      await config.createLegacyView({
-        calculation: "stats",
-        name: "TestView",
-        field: "Price",
-        groupBy: "Category",
-        tableId: table._id,
-      })
-      await config.createRow({
-        tableId: table._id,
-        Price: 1000,
-        Category: "One",
-      })
-      await config.createRow({
-        tableId: table._id,
-        Price: 2000,
-        Category: "One",
-      })
-      await config.createRow({
-        tableId: 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()
-    })
-  })
-
-  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)
-      expect(events.view.deleted).toBeCalledTimes(1)
-    })
-  })
-
-  describe("exportView", () => {
-    beforeEach(() => {
-      jest.clearAllMocks()
-    })
-
-    const setupExport = async () => {
-      const table = await config.createTable()
-      await config.createRow({ 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)
-      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","ùúûü"`)
-    }
-
-    it("should be able to export a table as JSON", async () => {
-      const table = await setupExport()
-
-      const res = await exportView(table._id, "json")
-
-      assertJsonExport(res)
-      expect(events.table.exported).toBeCalledTimes(1)
-      expect(events.table.exported).toBeCalledWith(table, "json")
-    })
-
-    it("should be able to export a table as CSV", async () => {
-      const table = await setupExport()
-
-      const res = await exportView(table._id, "csv")
-
-      assertCSVExport(res)
-      expect(events.table.exported).toBeCalledTimes(1)
-      expect(events.table.exported).toBeCalledWith(table, "csv")
-    })
-
-    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)
-
-      let res = await exportView(view.name, "json")
-
-      assertJsonExport(res)
-      expect(events.view.exported).toBeCalledTimes(1)
-      expect(events.view.exported).toBeCalledWith(table, "json")
-    })
-
-    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)
-
-      let res = await exportView(view.name, "csv")
-
-      assertCSVExport(res)
-      expect(events.view.exported).toBeCalledTimes(1)
-      expect(events.view.exported).toBeCalledWith(table, "csv")
-    })
-  })
-})
diff --git a/packages/server/src/api/routes/tests/view.spec.ts b/packages/server/src/api/routes/tests/view.spec.ts
new file mode 100644
index 0000000000..d5a4dd6aeb
--- /dev/null
+++ b/packages/server/src/api/routes/tests/view.spec.ts
@@ -0,0 +1,494 @@
+import { events } from "@budibase/backend-core"
+import * as setup from "./utilities"
+import {
+  FieldType,
+  INTERNAL_TABLE_SOURCE_ID,
+  QuotaUsageType,
+  SaveTableRequest,
+  StaticQuotaName,
+  Table,
+  TableSourceType,
+  View,
+  ViewCalculation,
+} from "@budibase/types"
+import { quotas } from "@budibase/pro"
+
+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",
+      },
+    },
+  },
+}
+
+describe("/views", () => {
+  let config = setup.getConfig()
+  let table: Table
+
+  afterAll(setup.afterAll)
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  beforeEach(async () => {
+    table = await config.api.table.save(priceTable)
+  })
+
+  const saveView = async (view?: Partial<View>) => {
+    const viewToSave: View = {
+      name: "TestView",
+      field: "Price",
+      calculation: ViewCalculation.STATISTICS,
+      tableId: table._id!,
+      filters: [],
+      schema: {},
+      ...view,
+    }
+    return config.api.legacyView.save(viewToSave)
+  }
+
+  const getRowUsage = async () => {
+    const { total } = await config.doInContext(undefined, () =>
+      quotas.getCurrentUsageValues(QuotaUsageType.STATIC, StaticQuotaName.ROWS)
+    )
+    return total
+  }
+
+  const assertRowUsage = async (expected: number) => {
+    const usage = await getRowUsage()
+    expect(usage).toBe(expected)
+  }
+
+  describe("create", () => {
+    it("returns a success message when the view is successfully created", async () => {
+      const res = await saveView()
+      expect(events.view.created).toHaveBeenCalledTimes(1)
+    })
+
+    it("creates a view with a calculation", async () => {
+      jest.clearAllMocks()
+
+      const view = await saveView({ calculation: ViewCalculation.COUNT })
+
+      expect(view.tableId).toBe(table._id)
+      expect(events.view.created).toHaveBeenCalledTimes(1)
+      expect(events.view.updated).not.toHaveBeenCalled()
+      expect(events.view.calculationCreated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationUpdated).not.toHaveBeenCalled()
+      expect(events.view.calculationDeleted).not.toHaveBeenCalled()
+      expect(events.view.filterCreated).not.toHaveBeenCalled()
+      expect(events.view.filterUpdated).not.toHaveBeenCalled()
+      expect(events.view.filterDeleted).not.toHaveBeenCalled()
+    })
+
+    it("creates a view with a filter", async () => {
+      jest.clearAllMocks()
+
+      const view = await saveView({
+        calculation: undefined,
+        filters: [
+          {
+            value: "1",
+            condition: "EQUALS",
+            key: "price",
+          },
+        ],
+      })
+
+      expect(view.tableId).toBe(table._id)
+      expect(events.view.created).toHaveBeenCalledTimes(1)
+      expect(events.view.updated).not.toHaveBeenCalled()
+      expect(events.view.calculationCreated).not.toHaveBeenCalled()
+      expect(events.view.calculationUpdated).not.toHaveBeenCalled()
+      expect(events.view.calculationDeleted).not.toHaveBeenCalled()
+      expect(events.view.filterCreated).toHaveBeenCalledTimes(1)
+      expect(events.view.filterUpdated).not.toHaveBeenCalled()
+      expect(events.view.filterDeleted).not.toHaveBeenCalled()
+    })
+
+    it("updates the table row with the new view metadata", async () => {
+      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",
+              },
+            },
+          }),
+        })
+      )
+    })
+  })
+
+  describe("update", () => {
+    it("updates a view with no calculation or filter changed", async () => {
+      await saveView()
+      jest.clearAllMocks()
+
+      await saveView()
+
+      expect(events.view.created).not.toHaveBeenCalled()
+      expect(events.view.updated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationCreated).not.toHaveBeenCalled()
+      expect(events.view.calculationUpdated).not.toHaveBeenCalled()
+      expect(events.view.calculationDeleted).not.toHaveBeenCalled()
+      expect(events.view.filterCreated).not.toHaveBeenCalled()
+      expect(events.view.filterUpdated).not.toHaveBeenCalled()
+      expect(events.view.filterDeleted).not.toHaveBeenCalled()
+    })
+
+    it("updates a view calculation", async () => {
+      await saveView({ calculation: ViewCalculation.SUM })
+      jest.clearAllMocks()
+
+      await saveView({ calculation: ViewCalculation.COUNT })
+
+      expect(events.view.created).not.toHaveBeenCalled()
+      expect(events.view.updated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationCreated).not.toHaveBeenCalled()
+      expect(events.view.calculationUpdated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationDeleted).not.toHaveBeenCalled()
+      expect(events.view.filterCreated).not.toHaveBeenCalled()
+      expect(events.view.filterUpdated).not.toHaveBeenCalled()
+      expect(events.view.filterDeleted).not.toHaveBeenCalled()
+    })
+
+    it("deletes a view calculation", async () => {
+      await saveView({ calculation: ViewCalculation.SUM })
+      jest.clearAllMocks()
+
+      await saveView({ calculation: undefined })
+
+      expect(events.view.created).not.toHaveBeenCalled()
+      expect(events.view.updated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationCreated).not.toHaveBeenCalled()
+      expect(events.view.calculationUpdated).not.toHaveBeenCalled()
+      expect(events.view.calculationDeleted).toHaveBeenCalledTimes(1)
+      expect(events.view.filterCreated).not.toHaveBeenCalled()
+      expect(events.view.filterUpdated).not.toHaveBeenCalled()
+      expect(events.view.filterDeleted).not.toHaveBeenCalled()
+    })
+
+    it("updates a view filter", async () => {
+      await saveView({
+        filters: [
+          {
+            value: "1",
+            condition: "EQUALS",
+            key: "price",
+          },
+        ],
+      })
+      jest.clearAllMocks()
+
+      await saveView({
+        filters: [
+          {
+            value: "2",
+            condition: "EQUALS",
+            key: "price",
+          },
+        ],
+      })
+
+      expect(events.view.created).not.toHaveBeenCalled()
+      expect(events.view.updated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationCreated).not.toHaveBeenCalled()
+      expect(events.view.calculationUpdated).not.toHaveBeenCalled()
+      expect(events.view.calculationDeleted).not.toHaveBeenCalled()
+      expect(events.view.filterCreated).not.toHaveBeenCalled()
+      expect(events.view.filterUpdated).toHaveBeenCalledTimes(1)
+      expect(events.view.filterDeleted).not.toHaveBeenCalled()
+    })
+
+    it("deletes a view filter", async () => {
+      await saveView({
+        filters: [
+          {
+            value: "1",
+            condition: "EQUALS",
+            key: "price",
+          },
+        ],
+      })
+      jest.clearAllMocks()
+
+      await saveView({ filters: [] })
+
+      expect(events.view.created).not.toHaveBeenCalled()
+      expect(events.view.updated).toHaveBeenCalledTimes(1)
+      expect(events.view.calculationCreated).not.toHaveBeenCalled()
+      expect(events.view.calculationUpdated).not.toHaveBeenCalled()
+      expect(events.view.calculationDeleted).not.toHaveBeenCalled()
+      expect(events.view.filterCreated).not.toHaveBeenCalled()
+      expect(events.view.filterUpdated).not.toHaveBeenCalled()
+      expect(events.view.filterDeleted).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("fetch", () => {
+    beforeEach(async () => {
+      table = await config.api.table.save(priceTable)
+    })
+
+    it("returns only custom views", async () => {
+      await saveView({
+        name: "TestView",
+        field: "Price",
+        calculation: ViewCalculation.STATISTICS,
+        tableId: table._id,
+      })
+      const views = await config.api.legacyView.fetch()
+      expect(views.length).toBe(1)
+      expect(views.find(({ name }) => name === "TestView")).toBeDefined()
+    })
+
+    it("should be able to fetch tables contents via 'view'", async () => {
+      const row = await config.api.row.save(table._id!, {})
+      const rowUsage = await getRowUsage()
+
+      const rows = await config.api.legacyView.get(table._id!)
+      expect(rows.length).toEqual(1)
+      expect(rows[0]._id).toEqual(row._id)
+      await assertRowUsage(rowUsage)
+    })
+
+    it("should throw an error if view doesn't exist", async () => {
+      const rowUsage = await getRowUsage()
+
+      await config.api.legacyView.get("derp", undefined, { status: 404 })
+
+      await assertRowUsage(rowUsage)
+    })
+
+    it("should be able to run on a view", async () => {
+      const view = await config.api.legacyView.save({
+        tableId: table._id!,
+        name: "ViewTest",
+        filters: [],
+        schema: {},
+      })
+      const row = await config.api.row.save(table._id!, {})
+      const rowUsage = await getRowUsage()
+
+      const rows = await config.api.legacyView.get(view.name!)
+      expect(rows.length).toEqual(1)
+      expect(rows[0]._id).toEqual(row._id)
+
+      await assertRowUsage(rowUsage)
+    })
+  })
+
+  describe("query", () => {
+    it("returns data for the created view", async () => {
+      await saveView({
+        name: "TestView",
+        field: "Price",
+        calculation: ViewCalculation.STATISTICS,
+        tableId: table._id!,
+      })
+      await config.api.row.save(table._id!, {
+        Price: 1000,
+      })
+      await config.api.row.save(table._id!, {
+        Price: 2000,
+      })
+      await config.api.row.save(table._id!, {
+        Price: 4000,
+      })
+      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 saveView({
+        calculation: ViewCalculation.STATISTICS,
+        name: "TestView",
+        field: "Price",
+        groupBy: "Category",
+        tableId: table._id,
+      })
+      await config.api.row.save(table._id!, {
+        Price: 1000,
+        Category: "One",
+      })
+      await config.api.row.save(table._id!, {
+        Price: 2000,
+        Category: "One",
+      })
+      await config.api.row.save(table._id!, {
+        Price: 4000,
+        Category: "Two",
+      })
+      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.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).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("exportView", () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+    })
+
+    const setupExport = async () => {
+      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 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: 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 config.api.legacyView.export(table._id!, "json")
+
+      assertJsonExport(res)
+      expect(events.table.exported).toHaveBeenCalledTimes(1)
+      expect(events.table.exported).toHaveBeenCalledWith(table, "json")
+    })
+
+    it("should be able to export a table as CSV", async () => {
+      const table = await setupExport()
+
+      const res = await config.api.legacyView.export(table._id!, "csv")
+
+      assertCSVExport(res)
+      expect(events.table.exported).toHaveBeenCalledTimes(1)
+      expect(events.table.exported).toHaveBeenCalledWith(table, "csv")
+    })
+
+    it("should be able to export a view as JSON", async () => {
+      let table = await setupExport()
+      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 config.api.legacyView.export(view.name!, "json")
+
+      assertJsonExport(res)
+      expect(events.view.exported).toHaveBeenCalledTimes(1)
+      expect(events.view.exported).toHaveBeenCalledWith(table, "json")
+    })
+
+    it("should be able to export a view as CSV", async () => {
+      let table = await setupExport()
+      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 config.api.legacyView.export(view.name!, "csv")
+
+      assertCSVExport(res)
+      expect(events.view.exported).toHaveBeenCalledTimes(1)
+      expect(events.view.exported).toHaveBeenCalledWith(table, "csv")
+    })
+  })
+})
diff --git a/packages/server/src/api/routes/tests/viewV2.spec.ts b/packages/server/src/api/routes/tests/viewV2.spec.ts
index 5198e63338..ded5e08d29 100644
--- a/packages/server/src/api/routes/tests/viewV2.spec.ts
+++ b/packages/server/src/api/routes/tests/viewV2.spec.ts
@@ -1,9 +1,11 @@
 import * as setup from "./utilities"
 import {
   CreateViewRequest,
+  Datasource,
   FieldSchema,
   FieldType,
   INTERNAL_TABLE_SOURCE_ID,
+  SaveTableRequest,
   SearchQueryOperators,
   SortOrder,
   SortType,
@@ -14,65 +16,88 @@ import {
   ViewV2,
 } from "@budibase/types"
 import { generator } from "@budibase/backend-core/tests"
-import { generateDatasourceID } from "../../../db/utils"
+import * as uuid from "uuid"
+import { databaseTestProviders } from "../../../integrations/tests/utils"
+import merge from "lodash/merge"
 
-function priceTable(): Table {
-  return {
-    name: "table",
-    type: "table",
-    sourceId: INTERNAL_TABLE_SOURCE_ID,
-    sourceType: TableSourceType.INTERNAL,
-    schema: {
-      Price: {
-        type: FieldType.NUMBER,
-        name: "Price",
-        constraints: {},
-      },
-      Category: {
-        type: FieldType.STRING,
-        name: "Category",
-        constraints: {
-          type: "string",
-        },
-      },
-    },
-  }
-}
-
-const config = setup.getConfig()
-
-beforeAll(async () => {
-  await config.init()
-})
+jest.unmock("mysql2")
+jest.unmock("mysql2/promise")
+jest.unmock("mssql")
+jest.unmock("pg")
 
 describe.each([
-  ["internal ds", () => config.createTable(priceTable())],
-  [
-    "external ds",
-    async () => {
-      const datasource = await config.createDatasource({
-        datasource: {
-          ...setup.structures.basicDatasource().datasource,
-          plus: true,
-          _id: generateDatasourceID({ plus: true }),
-        },
-      })
+  ["internal", undefined],
+  ["postgres", databaseTestProviders.postgres],
+  ["mysql", databaseTestProviders.mysql],
+  ["mssql", databaseTestProviders.mssql],
+  ["mariadb", databaseTestProviders.mariadb],
+])("/v2/views (%s)", (_, dsProvider) => {
+  const config = setup.getConfig()
 
-      return config.createExternalTable({
-        ...priceTable(),
-        sourceId: datasource._id,
-        sourceType: TableSourceType.EXTERNAL,
-      })
-    },
-  ],
-])("/v2/views (%s)", (_, tableBuilder) => {
   let table: Table
+  let datasource: Datasource
+
+  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"],
+      schema: {
+        id: {
+          type: FieldType.AUTO,
+          name: "id",
+          autocolumn: true,
+          constraints: {
+            presence: true,
+          },
+        },
+      },
+    }
+    return merge(req, ...overrides)
+  }
+
+  function priceTable(): SaveTableRequest {
+    return saveTableRequest({
+      schema: {
+        Price: {
+          type: FieldType.NUMBER,
+          name: "Price",
+          constraints: {},
+        },
+        Category: {
+          type: FieldType.STRING,
+          name: "Category",
+          constraints: {
+            type: "string",
+          },
+        },
+      },
+    })
+  }
 
   beforeAll(async () => {
-    table = await tableBuilder()
+    await config.init()
+
+    if (dsProvider) {
+      datasource = await config.createDatasource({
+        datasource: await dsProvider.datasource(),
+      })
+    }
+    table = await config.api.table.save(priceTable())
   })
 
-  afterAll(setup.afterAll)
+  afterAll(async () => {
+    if (dsProvider) {
+      await dsProvider.stop()
+    }
+    setup.afterAll()
+  })
 
   describe("create", () => {
     it("persist the view when the view is successfully created", async () => {
@@ -186,9 +211,12 @@ describe.each([
     let view: ViewV2
 
     beforeEach(async () => {
-      table = await tableBuilder()
+      table = await config.api.table.save(priceTable())
 
-      view = await config.api.viewV2.create({ name: "View A" })
+      view = await config.api.viewV2.create({
+        tableId: table._id!,
+        name: "View A",
+      })
     })
 
     it("can update an existing view data", async () => {
@@ -247,6 +275,9 @@ describe.each([
           ...updatedData,
           schema: {
             ...table.schema,
+            id: expect.objectContaining({
+              visible: false,
+            }),
             Category: expect.objectContaining({
               visible: false,
             }),
@@ -320,23 +351,27 @@ describe.each([
     })
 
     it("cannot update views v1", async () => {
-      const viewV1 = await config.createLegacyView()
-      await config.api.viewV2.update(
-        {
-          ...viewV1,
-        },
-        {
+      const viewV1 = await config.api.legacyView.save({
+        tableId: table._id!,
+        name: generator.guid(),
+        filters: [],
+        schema: {},
+      })
+
+      await config.api.viewV2.update(viewV1 as unknown as ViewV2, {
+        status: 400,
+        body: {
+          message: "Only views V2 can be updated",
           status: 400,
-          body: {
-            message: "Only views V2 can be updated",
-            status: 400,
-          },
-        }
-      )
+        },
+      })
     })
 
     it("cannot update the a view with unmatching ids between url and body", async () => {
-      const anotherView = await config.api.viewV2.create()
+      const anotherView = await config.api.viewV2.create({
+        tableId: table._id!,
+        name: generator.guid(),
+      })
       const result = await config
         .request!.put(`/api/v2/views/${anotherView.id}`)
         .send(view)
@@ -411,7 +446,10 @@ describe.each([
     let view: ViewV2
 
     beforeAll(async () => {
-      view = await config.api.viewV2.create()
+      view = await config.api.viewV2.create({
+        tableId: table._id!,
+        name: generator.guid(),
+      })
     })
 
     it("can delete an existing view", async () => {
@@ -448,4 +486,43 @@ describe.each([
       expect(viewSchema.Price?.visible).toEqual(false)
     })
   })
+
+  describe("read", () => {
+    it("views have extra data trimmed", async () => {
+      const table = await config.api.table.save(
+        saveTableRequest({
+          name: "orders",
+          schema: {
+            Country: {
+              type: FieldType.STRING,
+              name: "Country",
+            },
+            Story: {
+              type: FieldType.STRING,
+              name: "Story",
+            },
+          },
+        })
+      )
+
+      const view = await config.api.viewV2.create({
+        tableId: table._id!,
+        name: uuid.v4(),
+        schema: {
+          Country: {
+            visible: true,
+          },
+        },
+      })
+
+      let row = await config.api.row.save(view.id, {
+        Country: "Aussy",
+        Story: "aaaaa",
+      })
+
+      row = await config.api.row.get(table._id!, row._id!)
+      expect(row.Story).toBeUndefined()
+      expect(row.Country).toEqual("Aussy")
+    })
+  })
 })
diff --git a/packages/server/src/api/routes/tests/webhook.spec.ts b/packages/server/src/api/routes/tests/webhook.spec.ts
index 48a6da38bf..b741ce0820 100644
--- a/packages/server/src/api/routes/tests/webhook.spec.ts
+++ b/packages/server/src/api/routes/tests/webhook.spec.ts
@@ -140,7 +140,7 @@ describe("/webhooks", () => {
     })
   })
 
-  it("should trigger a synchronous webhook call ", async () => {
+  it("should trigger a synchronous webhook call", async () => {
     mocks.licenses.useSyncAutomations()
     let automation = collectAutomation()
     let newAutomation = await config.createAutomation(automation)
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/appMigrations/tests/migrationsProcessor.spec.ts b/packages/server/src/appMigrations/tests/migrationsProcessor.spec.ts
index 3b8e90b526..a2d1dc05c3 100644
--- a/packages/server/src/appMigrations/tests/migrationsProcessor.spec.ts
+++ b/packages/server/src/appMigrations/tests/migrationsProcessor.spec.ts
@@ -45,7 +45,7 @@ describe("migrationsProcessor", () => {
 
     await expect(
       config.doInContext(appId, () => processMigrations(appId, testMigrations))
-    ).rejects.toThrowError(
+    ).rejects.toThrow(
       "The context cannot be changed, a migration is currently running"
     )
   })
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/db/views/staticViews.ts b/packages/server/src/db/views/staticViews.ts
index 5b1b66d8e3..700bd2568a 100644
--- a/packages/server/src/db/views/staticViews.ts
+++ b/packages/server/src/db/views/staticViews.ts
@@ -30,8 +30,8 @@ export async function createLinkView() {
       if (doc.type === "link") {
         let doc1 = doc.doc1
         let doc2 = doc.doc2
+        // @ts-expect-error emit is available in a CouchDB map function
         // eslint-disable-next-line no-undef
-        // @ts-ignore
         emit([doc1.tableId, doc1.rowId], {
           id: doc2.rowId,
           thisId: doc1.rowId,
@@ -39,8 +39,8 @@ export async function createLinkView() {
         })
         // if linking to same table can't emit twice
         if (doc1.tableId !== doc2.tableId) {
+          // @ts-expect-error emit is available in a CouchDB map function
           // eslint-disable-next-line no-undef
-          // @ts-ignore
           emit([doc2.tableId, doc2.rowId], {
             id: doc1.rowId,
             thisId: doc2.rowId,
@@ -101,8 +101,8 @@ export async function createAllSearchIndex() {
           if (Array.isArray(input[key])) {
             for (let val of input[key]) {
               if (typeof val !== "object") {
+                // @ts-expect-error index is available in a CouchDB map function
                 // eslint-disable-next-line no-undef
-                // @ts-ignore
                 index(idxKey, val, { store: true })
               }
             }
@@ -110,12 +110,12 @@ export async function createAllSearchIndex() {
             continue
           }
           if (typeof input[key] === "string") {
+            // @ts-expect-error index is available in a CouchDB map function
             // eslint-disable-next-line no-undef
-            // @ts-ignore
             index(idxKey, input[key].toLowerCase(), { store: true })
           } else if (typeof input[key] !== "object") {
+            // @ts-expect-error index is available in a CouchDB map function
             // eslint-disable-next-line no-undef
-            // @ts-ignore
             index(idxKey, input[key], { store: true })
           } else {
             idx(input[key], idxKey)
@@ -123,8 +123,8 @@ export async function createAllSearchIndex() {
         }
       }
       if (doc._id!.startsWith("ro_")) {
+        // @ts-expect-error index is available in a CouchDB map function
         // eslint-disable-next-line no-undef
-        // @ts-ignore
         index("default", doc._id)
         idx(doc)
       }
diff --git a/packages/server/src/integration-test/mysql.spec.ts b/packages/server/src/integration-test/mysql.spec.ts
index fac2bfcfeb..b8f1affd4a 100644
--- a/packages/server/src/integration-test/mysql.spec.ts
+++ b/packages/server/src/integration-test/mysql.spec.ts
@@ -106,6 +106,7 @@ describe("mysql integrations", () => {
       plus: true,
       source: "MYSQL",
       type: "datasource_plus",
+      isSQL: true,
       _id: expect.any(String),
       _rev: expect.any(String),
       createdAt: expect.any(String),
@@ -306,7 +307,7 @@ describe("mysql integrations", () => {
       }
       delete expectedTable._add
 
-      expect(emitDatasourceUpdateMock).toBeCalledTimes(1)
+      expect(emitDatasourceUpdateMock).toHaveBeenCalledTimes(1)
       const emittedDatasource: Datasource =
         emitDatasourceUpdateMock.mock.calls[0][1]
       expect(emittedDatasource.entities!["table"]).toEqual(expectedTable)
diff --git a/packages/server/src/integration-test/postgres.spec.ts b/packages/server/src/integration-test/postgres.spec.ts
index 7c14bc2b69..107c4ade1e 100644
--- a/packages/server/src/integration-test/postgres.spec.ts
+++ b/packages/server/src/integration-test/postgres.spec.ts
@@ -319,6 +319,7 @@ describe("postgres integrations", () => {
       },
       plus: true,
       source: "POSTGRES",
+      isSQL: true,
       type: "datasource_plus",
       _id: expect.any(String),
       _rev: expect.any(String),
diff --git a/packages/server/src/integrations/base/sql.ts b/packages/server/src/integrations/base/sql.ts
index be1883c8ec..2093d455b9 100644
--- a/packages/server/src/integrations/base/sql.ts
+++ b/packages/server/src/integrations/base/sql.ts
@@ -4,11 +4,17 @@ import { QueryOptions } from "../../definitions/datasource"
 import { isIsoDateString, SqlClient, isValidFilter } from "../utils"
 import SqlTableQueryBuilder from "./sqlTable"
 import {
+  BBReferenceFieldMetadata,
+  FieldSchema,
+  FieldSubtype,
+  FieldType,
+  JsonFieldMetadata,
   Operation,
   QueryJson,
   RelationshipsJson,
   SearchFilters,
   SortDirection,
+  Table,
 } from "@budibase/types"
 import environment from "../../environment"
 
@@ -691,6 +697,39 @@ class SqlQueryBuilder extends SqlTableQueryBuilder {
     return results.length ? results : [{ [operation.toLowerCase()]: true }]
   }
 
+  convertJsonStringColumns(
+    table: Table,
+    results: Record<string, any>[],
+    aliases?: Record<string, string>
+  ): Record<string, any>[] {
+    for (const [name, field] of Object.entries(table.schema)) {
+      if (!this._isJsonColumn(field)) {
+        continue
+      }
+      const tableName = aliases?.[table.name] || table.name
+      const fullName = `${tableName}.${name}`
+      for (let row of results) {
+        if (typeof row[fullName] === "string") {
+          row[fullName] = JSON.parse(row[fullName])
+        }
+        if (typeof row[name] === "string") {
+          row[name] = JSON.parse(row[name])
+        }
+      }
+    }
+    return results
+  }
+
+  _isJsonColumn(
+    field: FieldSchema
+  ): field is JsonFieldMetadata | BBReferenceFieldMetadata {
+    return (
+      field.type === FieldType.JSON ||
+      (field.type === FieldType.BB_REFERENCE &&
+        field.subtype === FieldSubtype.USERS)
+    )
+  }
+
   log(query: string, values?: any[]) {
     if (!environment.SQL_LOGGING_ENABLE) {
       return
diff --git a/packages/server/src/integrations/base/sqlTable.ts b/packages/server/src/integrations/base/sqlTable.ts
index f3560791e6..06c2184549 100644
--- a/packages/server/src/integrations/base/sqlTable.ts
+++ b/packages/server/src/integrations/base/sqlTable.ts
@@ -59,7 +59,7 @@ function generateSchema(
       case FieldType.BARCODEQR:
         schema.text(key)
         break
-      case FieldType.BB_REFERENCE:
+      case FieldType.BB_REFERENCE: {
         const subtype = column.subtype as FieldSubtype
         switch (subtype) {
           case FieldSubtype.USER:
@@ -72,6 +72,7 @@ function generateSchema(
             throw utils.unreachable(subtype)
         }
         break
+      }
       case FieldType.NUMBER:
         // if meta is specified then this is a junction table entry
         if (column.meta && column.meta.toKey && column.meta.toTable) {
diff --git a/packages/server/src/integrations/microsoftSqlServer.ts b/packages/server/src/integrations/microsoftSqlServer.ts
index f87e248ac0..728bafe57f 100644
--- a/packages/server/src/integrations/microsoftSqlServer.ts
+++ b/packages/server/src/integrations/microsoftSqlServer.ts
@@ -14,6 +14,8 @@ import {
   Schema,
   TableSourceType,
   DatasourcePlusQueryResponse,
+  FieldType,
+  FieldSubtype,
 } from "@budibase/types"
 import {
   getSqlQuery,
@@ -252,7 +254,7 @@ class SqlServerIntegration extends Sql implements DatasourcePlus {
       }
 
       switch (this.config.authType) {
-        case MSSQLConfigAuthType.AZURE_ACTIVE_DIRECTORY:
+        case MSSQLConfigAuthType.AZURE_ACTIVE_DIRECTORY: {
           const { clientId, tenantId, clientSecret } =
             this.config.adConfig || {}
           const clientApp = new ConfidentialClientApplication({
@@ -274,7 +276,8 @@ class SqlServerIntegration extends Sql implements DatasourcePlus {
             },
           }
           break
-        case MSSQLConfigAuthType.NTLM:
+        }
+        case MSSQLConfigAuthType.NTLM: {
           const { domain, trustServerCertificate } =
             this.config.ntlmConfig || {}
           clientCfg.authentication = {
@@ -286,6 +289,7 @@ class SqlServerIntegration extends Sql implements DatasourcePlus {
           clientCfg.options ??= {}
           clientCfg.options.trustServerCertificate = !!trustServerCertificate
           break
+        }
         case null:
         case undefined:
           break
@@ -502,8 +506,18 @@ class SqlServerIntegration extends Sql implements DatasourcePlus {
     }
     const operation = this._operation(json)
     const queryFn = (query: any, op: string) => this.internalQuery(query, op)
-    const processFn = (result: any) =>
-      result.recordset ? result.recordset : [{ [operation]: true }]
+    const processFn = (result: any) => {
+      if (json?.meta?.table && result.recordset) {
+        return this.convertJsonStringColumns(
+          json.meta.table,
+          result.recordset,
+          json.tableAliases
+        )
+      } else if (result.recordset) {
+        return result.recordset
+      }
+      return [{ [operation]: true }]
+    }
     return this.queryWithReturning(json, queryFn, processFn)
   }
 
diff --git a/packages/server/src/integrations/mysql.ts b/packages/server/src/integrations/mysql.ts
index f629381807..f88162cf37 100644
--- a/packages/server/src/integrations/mysql.ts
+++ b/packages/server/src/integrations/mysql.ts
@@ -13,6 +13,8 @@ import {
   Schema,
   TableSourceType,
   DatasourcePlusQueryResponse,
+  FieldType,
+  FieldSubtype,
 } from "@budibase/types"
 import {
   getSqlQuery,
@@ -386,7 +388,17 @@ class MySQLIntegration extends Sql implements DatasourcePlus {
     try {
       const queryFn = (query: any) =>
         this.internalQuery(query, { connect: false, disableCoercion: true })
-      return await this.queryWithReturning(json, queryFn)
+      const processFn = (result: any) => {
+        if (json?.meta?.table && Array.isArray(result)) {
+          return this.convertJsonStringColumns(
+            json.meta.table,
+            result,
+            json.tableAliases
+          )
+        }
+        return result
+      }
+      return await this.queryWithReturning(json, queryFn, processFn)
     } finally {
       await this.disconnect()
     }
diff --git a/packages/server/src/integrations/oracle.ts b/packages/server/src/integrations/oracle.ts
index 08f3058d63..83803906be 100644
--- a/packages/server/src/integrations/oracle.ts
+++ b/packages/server/src/integrations/oracle.ts
@@ -455,7 +455,7 @@ class OracleIntegration extends Sql implements DatasourcePlus {
           operation !== Operation.DELETE
         ) {
           const lastRow = await this.internalQuery({
-            sql: `SELECT * FROM \"${json.endpoint.entityId}\" WHERE ROWID = '${response.lastRowid}'`,
+            sql: `SELECT * FROM "${json.endpoint.entityId}" WHERE ROWID = '${response.lastRowid}'`,
           })
           return lastRow.rows as Row[]
         } else {
diff --git a/packages/server/src/integrations/rest.ts b/packages/server/src/integrations/rest.ts
index 44c62f60b7..5fa35cc667 100644
--- a/packages/server/src/integrations/rest.ts
+++ b/packages/server/src/integrations/rest.ts
@@ -283,7 +283,7 @@ class RestIntegration implements IntegrationBase {
         // content type defaults to plaintext
         input.body = string
         break
-      case BodyTypes.ENCODED:
+      case BodyTypes.ENCODED: {
         const params = new URLSearchParams()
         for (let [key, value] of Object.entries(object)) {
           params.append(key, value as string)
@@ -293,7 +293,8 @@ class RestIntegration implements IntegrationBase {
         })
         input.body = params
         break
-      case BodyTypes.FORM_DATA:
+      }
+      case BodyTypes.FORM_DATA: {
         const form = new FormData()
         for (let [key, value] of Object.entries(object)) {
           form.append(key, value)
@@ -303,6 +304,7 @@ class RestIntegration implements IntegrationBase {
         })
         input.body = form
         break
+      }
       case BodyTypes.XML:
         if (object != null && Object.keys(object).length) {
           string = new XmlBuilder().buildObject(object)
diff --git a/packages/server/src/integrations/tests/googlesheets.spec.ts b/packages/server/src/integrations/tests/googlesheets.spec.ts
index 7007693086..c6e073d602 100644
--- a/packages/server/src/integrations/tests/googlesheets.spec.ts
+++ b/packages/server/src/integrations/tests/googlesheets.spec.ts
@@ -109,9 +109,9 @@ describe("Google Sheets Integration", () => {
         sheetsByTitle[table.name] = sheet
         await integration.updateTable(table)
 
-        expect(sheet.loadHeaderRow).toBeCalledTimes(1)
-        expect(sheet.setHeaderRow).toBeCalledTimes(1)
-        expect(sheet.setHeaderRow).toBeCalledWith(tableColumns)
+        expect(sheet.loadHeaderRow).toHaveBeenCalledTimes(1)
+        expect(sheet.setHeaderRow).toHaveBeenCalledTimes(1)
+        expect(sheet.setHeaderRow).toHaveBeenCalledWith(tableColumns)
       })
     })
 
@@ -127,9 +127,9 @@ describe("Google Sheets Integration", () => {
         await integration.updateTable(table)
         return sheet
       })
-      expect(sheet.loadHeaderRow).toBeCalledTimes(1)
-      expect(sheet.setHeaderRow).toBeCalledTimes(1)
-      expect(sheet.setHeaderRow).toBeCalledWith(["name"])
+      expect(sheet.loadHeaderRow).toHaveBeenCalledTimes(1)
+      expect(sheet.setHeaderRow).toHaveBeenCalledTimes(1)
+      expect(sheet.setHeaderRow).toHaveBeenCalledWith(["name"])
 
       // No undefined are sent
       expect((sheet.setHeaderRow as any).mock.calls[0][0]).toHaveLength(1)
@@ -148,7 +148,7 @@ describe("Google Sheets Integration", () => {
 
         const res = await integration.getTableNames()
 
-        expect(mockGoogleIntegration.loadInfo).toBeCalledTimes(1)
+        expect(mockGoogleIntegration.loadInfo).toHaveBeenCalledTimes(1)
         expect(res).toEqual(sheetNames)
       })
     })
@@ -159,7 +159,7 @@ describe("Google Sheets Integration", () => {
       await config.doInContext(structures.uuid(), async () => {
         const res = await integration.testConnection()
 
-        expect(mockGoogleIntegration.loadInfo).toBeCalledTimes(1)
+        expect(mockGoogleIntegration.loadInfo).toHaveBeenCalledTimes(1)
         expect(res).toEqual({ connected: true })
       })
     })
diff --git a/packages/server/src/integrations/tests/mongo.spec.ts b/packages/server/src/integrations/tests/mongo.spec.ts
index 93e54c7bc7..74dd9d4ec0 100644
--- a/packages/server/src/integrations/tests/mongo.spec.ts
+++ b/packages/server/src/integrations/tests/mongo.spec.ts
@@ -12,15 +12,6 @@ class TestConfiguration {
   }
 }
 
-function disableConsole() {
-  jest.spyOn(console, "error")
-  // @ts-ignore
-  console.error.mockImplementation(() => {})
-
-  // @ts-ignore
-  return console.error.mockRestore
-}
-
 describe("MongoDB Integration", () => {
   let config: any
   let indexName = "Users"
@@ -96,8 +87,6 @@ describe("MongoDB Integration", () => {
   })
 
   it("throws an error when an invalid query.extra.actionType is passed for each method", async () => {
-    const restore = disableConsole()
-
     const query = {
       extra: { collection: "testCollection", actionType: "deleteOne" },
     }
@@ -109,7 +98,6 @@ describe("MongoDB Integration", () => {
       error = err
     }
     expect(error).toBeDefined()
-    restore()
   })
 
   it("creates ObjectIds if the field contains a match on ObjectId", async () => {
diff --git a/packages/server/src/integrations/tests/mysql.spec.ts b/packages/server/src/integrations/tests/mysql.spec.ts
index 7d45a06735..5180645885 100644
--- a/packages/server/src/integrations/tests/mysql.spec.ts
+++ b/packages/server/src/integrations/tests/mysql.spec.ts
@@ -76,7 +76,7 @@ describe("MySQL Integration", () => {
   })
 
   describe("binding type coerce", () => {
-    it("ignores non-string types ", async () => {
+    it("ignores non-string types", async () => {
       const sql = "select * from users;"
       const date = new Date()
       await config.integration.read({
@@ -103,7 +103,7 @@ describe("MySQL Integration", () => {
       )
     })
 
-    it.skip("parses strings matching a valid date format", async () => {
+    it("parses strings matching a valid date format", async () => {
       const sql = "select * from users;"
       await config.integration.read({
         sql,
diff --git a/packages/server/src/integrations/tests/oracle.spec.ts b/packages/server/src/integrations/tests/oracle.spec.ts
index 8c05a881d4..80ad969e3b 100644
--- a/packages/server/src/integrations/tests/oracle.spec.ts
+++ b/packages/server/src/integrations/tests/oracle.spec.ts
@@ -22,11 +22,6 @@ describe("Oracle Integration", () => {
     config = new TestConfiguration()
   })
 
-  afterEach(() => {
-    expect(oracledb.closeMock).toHaveBeenCalled()
-    expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
-  })
-
   it("calls the create method with the correct params", async () => {
     const sql = "insert into users (name, age) values ('Joe', 123);"
     await config.integration.create({
@@ -34,6 +29,7 @@ describe("Oracle Integration", () => {
     })
     expect(oracledb.executeMock).toHaveBeenCalledWith(sql, [], options)
     expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+    expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
   })
 
   it("calls the read method with the correct params", async () => {
@@ -43,6 +39,7 @@ describe("Oracle Integration", () => {
     })
     expect(oracledb.executeMock).toHaveBeenCalledWith(sql, [], options)
     expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+    expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
   })
 
   it("calls the update method with the correct params", async () => {
@@ -52,6 +49,7 @@ describe("Oracle Integration", () => {
     })
     expect(oracledb.executeMock).toHaveBeenCalledWith(sql, [], options)
     expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+    expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
   })
 
   it("calls the delete method with the correct params", async () => {
@@ -61,6 +59,7 @@ describe("Oracle Integration", () => {
     })
     expect(oracledb.executeMock).toHaveBeenCalledWith(sql, [], options)
     expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+    expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
   })
 
   describe("no rows returned", () => {
@@ -75,6 +74,7 @@ describe("Oracle Integration", () => {
       })
       expect(response).toEqual([{ created: true }])
       expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+      expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
     })
 
     it("returns the correct response when the update response has no rows", async () => {
@@ -84,6 +84,7 @@ describe("Oracle Integration", () => {
       })
       expect(response).toEqual([{ updated: true }])
       expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+      expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
     })
 
     it("returns the correct response when the delete response has no rows", async () => {
@@ -93,6 +94,7 @@ describe("Oracle Integration", () => {
       })
       expect(response).toEqual([{ deleted: true }])
       expect(oracledb.executeMock).toHaveBeenCalledTimes(1)
+      expect(oracledb.closeMock).toHaveBeenCalledTimes(1)
     })
   })
 })
diff --git a/packages/server/src/integrations/tests/rest.spec.ts b/packages/server/src/integrations/tests/rest.spec.ts
index bc0c0cac2f..182a6d3f13 100644
--- a/packages/server/src/integrations/tests/rest.spec.ts
+++ b/packages/server/src/integrations/tests/rest.spec.ts
@@ -418,9 +418,9 @@ describe("REST Integration", () => {
       })
       // @ts-ignore
       const sentData = fetch.mock.calls[0][1].body
-      expect(sentData.has(pageParam))
+      expect(sentData.has(pageParam)).toEqual(true)
       expect(sentData.get(pageParam)).toEqual(pageValue.toString())
-      expect(sentData.has(sizeParam))
+      expect(sentData.has(pageParam)).toEqual(true)
       expect(sentData.get(sizeParam)).toEqual(sizeValue.toString())
     })
   })
@@ -551,9 +551,9 @@ describe("REST Integration", () => {
       })
       // @ts-ignore
       const sentData = fetch.mock.calls[0][1].body
-      expect(sentData.has(pageParam))
+      expect(sentData.has(pageParam)).toEqual(true)
       expect(sentData.get(pageParam)).toEqual(pageValue.toString())
-      expect(sentData.has(sizeParam))
+      expect(sentData.has(pageParam)).toEqual(true)
       expect(sentData.get(sizeParam)).toEqual(sizeValue.toString())
       expect(res.pagination.cursor).toEqual(123)
     })
diff --git a/packages/server/src/integrations/tests/s3.spec.ts b/packages/server/src/integrations/tests/s3.spec.ts
index b4b2ad76e7..40f73928f2 100644
--- a/packages/server/src/integrations/tests/s3.spec.ts
+++ b/packages/server/src/integrations/tests/s3.spec.ts
@@ -79,7 +79,7 @@ describe("S3 Integration", () => {
     })
   })
 
-  it("calls the delete method with the correct params ", async () => {
+  it("calls the delete method with the correct params", async () => {
     await config.integration.delete({
       bucket: "test",
       delete: `{
diff --git a/packages/server/src/integrations/tests/sql.spec.ts b/packages/server/src/integrations/tests/sql.spec.ts
index f4eaf2859c..c0b92b3849 100644
--- a/packages/server/src/integrations/tests/sql.spec.ts
+++ b/packages/server/src/integrations/tests/sql.spec.ts
@@ -342,25 +342,6 @@ describe("SQL query builder", () => {
     })
   })
 
-  it("should use greater than when only low range specified", () => {
-    const date = new Date()
-    const query = sql._query(
-      generateReadJson({
-        filters: {
-          range: {
-            property: {
-              low: date,
-            },
-          },
-        },
-      })
-    )
-    expect(query).toEqual({
-      bindings: [date, limit],
-      sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."property" > $1 limit $2) as "${TABLE_NAME}"`,
-    })
-  })
-
   it("should use AND like expression for MS-SQL when filter is contains", () => {
     const query = new Sql(SqlClient.MS_SQL, 10)._query(
       generateReadJson({
@@ -408,7 +389,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: [10],
-      sql: `select * from (select * from \"${TABLE_NAME}\" where \"${TABLE_NAME}\".\"age\"::jsonb @> '[20]' and \"${TABLE_NAME}\".\"name\"::jsonb @> '["John"]' limit $1) as \"${TABLE_NAME}\"`,
+      sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."age"::jsonb @> '[20]' and "${TABLE_NAME}"."name"::jsonb @> '["John"]' limit $1) as "${TABLE_NAME}"`,
     })
   })
 
@@ -459,7 +440,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: [10],
-      sql: `select * from (select * from \"${TABLE_NAME}\" where NOT \"${TABLE_NAME}\".\"age\"::jsonb @> '[20]' and NOT \"${TABLE_NAME}\".\"name\"::jsonb @> '["John"]' limit $1) as \"${TABLE_NAME}\"`,
+      sql: `select * from (select * from "${TABLE_NAME}" where NOT "${TABLE_NAME}"."age"::jsonb @> '[20]' and NOT "${TABLE_NAME}"."name"::jsonb @> '["John"]' limit $1) as "${TABLE_NAME}"`,
     })
   })
 
@@ -510,7 +491,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: [10],
-      sql: `select * from (select * from \"${TABLE_NAME}\" where \"${TABLE_NAME}\".\"age\"::jsonb ?| array [20,25] and \"${TABLE_NAME}\".\"name\"::jsonb ?| array ['John','Mary'] limit $1) as \"${TABLE_NAME}\"`,
+      sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."age"::jsonb ?| array [20,25] and "${TABLE_NAME}"."name"::jsonb ?| array ['John','Mary'] limit $1) as "${TABLE_NAME}"`,
     })
   })
 
@@ -591,7 +572,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: ["2000-01-01 00:00:00", 500],
-      sql: `select * from (select * from \"${TABLE_NAME}\" where \"${TABLE_NAME}\".\"dob\" > $1 limit $2) as \"${TABLE_NAME}\"`,
+      sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."dob" > $1 limit $2) as "${TABLE_NAME}"`,
     })
   })
 
@@ -610,7 +591,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: ["2010-01-01 00:00:00", 500],
-      sql: `select * from (select * from \"${TABLE_NAME}\" where \"${TABLE_NAME}\".\"dob\" < $1 limit $2) as \"${TABLE_NAME}\"`,
+      sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."dob" < $1 limit $2) as "${TABLE_NAME}"`,
     })
   })
 
@@ -626,7 +607,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: ["john%", limit],
-      sql: `select * from (select * from (select * from \"test\" where LOWER(\"test\".\"name\") LIKE :1) where rownum <= :2) \"test\"`,
+      sql: `select * from (select * from (select * from "test" where LOWER("test"."name") LIKE :1) where rownum <= :2) "test"`,
     })
 
     query = new Sql(SqlClient.ORACLE, limit)._query(
@@ -641,7 +622,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: ["%20%", "%25%", `%"john"%`, `%"mary"%`, limit],
-      sql: `select * from (select * from (select * from \"test\" where (LOWER(\"test\".\"age\") LIKE :1 AND LOWER(\"test\".\"age\") LIKE :2) and (LOWER(\"test\".\"name\") LIKE :3 AND LOWER(\"test\".\"name\") LIKE :4)) where rownum <= :5) \"test\"`,
+      sql: `select * from (select * from (select * from "test" where (LOWER("test"."age") LIKE :1 AND LOWER("test"."age") LIKE :2) and (LOWER("test"."name") LIKE :3 AND LOWER("test"."name") LIKE :4)) where rownum <= :5) "test"`,
     })
 
     query = new Sql(SqlClient.ORACLE, limit)._query(
@@ -655,7 +636,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: [`%jo%`, limit],
-      sql: `select * from (select * from (select * from \"test\" where LOWER(\"test\".\"name\") LIKE :1) where rownum <= :2) \"test\"`,
+      sql: `select * from (select * from (select * from "test" where LOWER("test"."name") LIKE :1) where rownum <= :2) "test"`,
     })
   })
 
@@ -682,7 +663,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: ['{ "created_at":"2023-09-09T03:21:06.024Z" }'],
-      sql: `insert into \"test\" (\"name\") values ($1) returning *`,
+      sql: `insert into "test" ("name") values ($1) returning *`,
     })
   })
 
@@ -695,7 +676,7 @@ describe("SQL query builder", () => {
     )
     expect(query).toEqual({
       bindings: [dateObj],
-      sql: `insert into \"test\" (\"name\") values ($1) returning *`,
+      sql: `insert into "test" ("name") values ($1) returning *`,
     })
   })
 
diff --git a/packages/server/src/integrations/tests/sqlAlias.spec.ts b/packages/server/src/integrations/tests/sqlAlias.spec.ts
index dd82dadac0..ccb164bcfd 100644
--- a/packages/server/src/integrations/tests/sqlAlias.spec.ts
+++ b/packages/server/src/integrations/tests/sqlAlias.spec.ts
@@ -294,7 +294,7 @@ describe("Captures of real examples", () => {
           type: "datasource",
           isSQL: false,
         })
-      )
+      ).toEqual(false)
     })
 
     it("should disable when no fields", () => {
diff --git a/packages/server/src/integrations/tests/utils/index.ts b/packages/server/src/integrations/tests/utils/index.ts
index b6e4e43e7a..b2be3df4e0 100644
--- a/packages/server/src/integrations/tests/utils/index.ts
+++ b/packages/server/src/integrations/tests/utils/index.ts
@@ -4,6 +4,8 @@ import { Datasource } from "@budibase/types"
 import * as postgres from "./postgres"
 import * as mongodb from "./mongodb"
 import * as mysql from "./mysql"
+import * as mssql from "./mssql"
+import * as mariadb from "./mariadb"
 import { StartedTestContainer } from "testcontainers"
 
 jest.setTimeout(30000)
@@ -14,4 +16,10 @@ export interface DatabaseProvider {
   datasource(): Promise<Datasource>
 }
 
-export const databaseTestProviders = { postgres, mongodb, mysql }
+export const databaseTestProviders = {
+  postgres,
+  mongodb,
+  mysql,
+  mssql,
+  mariadb,
+}
diff --git a/packages/server/src/integrations/tests/utils/mariadb.ts b/packages/server/src/integrations/tests/utils/mariadb.ts
new file mode 100644
index 0000000000..a097e0aaa1
--- /dev/null
+++ b/packages/server/src/integrations/tests/utils/mariadb.ts
@@ -0,0 +1,58 @@
+import { Datasource, SourceName } from "@budibase/types"
+import { GenericContainer, Wait, StartedTestContainer } from "testcontainers"
+import { AbstractWaitStrategy } from "testcontainers/build/wait-strategies/wait-strategy"
+
+let container: StartedTestContainer | undefined
+
+class MariaDBWaitStrategy extends AbstractWaitStrategy {
+  async waitUntilReady(container: any, boundPorts: any, startTime?: Date) {
+    // Because MariaDB first starts itself up, runs an init script, then restarts,
+    // it's possible for the mysqladmin ping to succeed early and then tests to
+    // run against a MariaDB that's mid-restart and fail. To get around this, we
+    // wait for logs and then do a ping check.
+
+    const logs = Wait.forLogMessage("mariadbd: ready for connections", 2)
+    await logs.waitUntilReady(container, boundPorts, startTime)
+
+    const command = Wait.forSuccessfulCommand(
+      `mysqladmin ping -h localhost -P 3306 -u root -ppassword`
+    )
+    await command.waitUntilReady(container)
+  }
+}
+
+export async function start(): Promise<StartedTestContainer> {
+  return await new GenericContainer("mariadb:lts")
+    .withExposedPorts(3306)
+    .withEnvironment({ MARIADB_ROOT_PASSWORD: "password" })
+    .withWaitStrategy(new MariaDBWaitStrategy())
+    .start()
+}
+
+export async function datasource(): Promise<Datasource> {
+  if (!container) {
+    container = await start()
+  }
+  const host = container.getHost()
+  const port = container.getMappedPort(3306)
+
+  return {
+    type: "datasource_plus",
+    source: SourceName.MYSQL,
+    plus: true,
+    config: {
+      host,
+      port,
+      user: "root",
+      password: "password",
+      database: "mysql",
+    },
+  }
+}
+
+export async function stop() {
+  if (container) {
+    await container.stop()
+    container = undefined
+  }
+}
diff --git a/packages/server/src/integrations/tests/utils/mssql.ts b/packages/server/src/integrations/tests/utils/mssql.ts
new file mode 100644
index 0000000000..f548f0c42c
--- /dev/null
+++ b/packages/server/src/integrations/tests/utils/mssql.ts
@@ -0,0 +1,53 @@
+import { Datasource, SourceName } from "@budibase/types"
+import { GenericContainer, Wait, StartedTestContainer } from "testcontainers"
+
+let container: StartedTestContainer | undefined
+
+export async function start(): Promise<StartedTestContainer> {
+  return await new GenericContainer(
+    "mcr.microsoft.com/mssql/server:2022-latest"
+  )
+    .withExposedPorts(1433)
+    .withEnvironment({
+      ACCEPT_EULA: "Y",
+      MSSQL_SA_PASSWORD: "Password_123",
+      // This is important, as Microsoft allow us to use the "Developer" edition
+      // of SQL Server for development and testing purposes. We can't use other
+      // versions without a valid license, and we cannot use the Developer
+      // version in production.
+      MSSQL_PID: "Developer",
+    })
+    .withWaitStrategy(
+      Wait.forSuccessfulCommand(
+        "/opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P Password_123 -q 'SELECT 1'"
+      )
+    )
+    .start()
+}
+
+export async function datasource(): Promise<Datasource> {
+  if (!container) {
+    container = await start()
+  }
+  const host = container.getHost()
+  const port = container.getMappedPort(1433)
+
+  return {
+    type: "datasource_plus",
+    source: SourceName.SQL_SERVER,
+    plus: true,
+    config: {
+      server: host,
+      port,
+      user: "sa",
+      password: "Password_123",
+    },
+  }
+}
+
+export async function stop() {
+  if (container) {
+    await container.stop()
+    container = undefined
+  }
+}
diff --git a/packages/server/src/integrations/utils.ts b/packages/server/src/integrations/utils.ts
index 91966658a6..f73f522357 100644
--- a/packages/server/src/integrations/utils.ts
+++ b/packages/server/src/integrations/utils.ts
@@ -330,7 +330,7 @@ function copyExistingPropsOver(
 
     const existingTableSchema = entities[tableName].schema
     for (let key in existingTableSchema) {
-      if (!existingTableSchema.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(existingTableSchema, key)) {
         continue
       }
       const column = existingTableSchema[key]
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..8244b2eef8
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -0,0 +1,27 @@
+// @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-expect-error snippetDefinitions and snippetCache are injected to the global scope
+      // eslint-disable-next-line no-undef
+      if (!(name in snippetCache)) {
+        // @ts-expect-error snippetDefinitions and snippetCache are injected to the global scope
+        // eslint-disable-next-line no-undef
+        snippetCache[name] = [eval][0](iifeWrapper(snippetDefinitions[name]))
+      }
+      // @ts-expect-error snippetDefinitions and snippetCache are injected to the global scope
+      // eslint-disable-next-line no-undef
+      return snippetCache[name]
+    },
+  }
+)
diff --git a/packages/server/src/jsRunner/index.ts b/packages/server/src/jsRunner/index.ts
index 0c9f5d9f01..b5c8e036f6 100644
--- a/packages/server/src/jsRunner/index.ts
+++ b/packages/server/src/jsRunner/index.ts
@@ -8,26 +8,35 @@ import {
 import { context, logging } from "@budibase/backend-core"
 import tracer from "dd-trace"
 import { IsolatedVM } from "./vm"
+import type { VM } from "@budibase/types"
 
 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()
+            .withSnippets(bbCtx?.snippets)
 
-        const vm = bbCtx?.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()
-
-        if (bbCtx) {
-          // If we have a context, we want to persist it to reuse the isolate
+        // Persist isolate in context so we can reuse it
+        if (bbCtx && !bbCtx.vm) {
           bbCtx.vm = vm
+          bbCtx.cleanup = bbCtx.cleanup || []
+          bbCtx.cleanup.push(() => vm.close())
         }
-        const { helpers, ...rest } = ctx
+
+        // 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, 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/tests/jsRunner.spec.ts b/packages/server/src/jsRunner/tests/jsRunner.spec.ts
index 54983aa470..7448555aac 100644
--- a/packages/server/src/jsRunner/tests/jsRunner.spec.ts
+++ b/packages/server/src/jsRunner/tests/jsRunner.spec.ts
@@ -1,7 +1,7 @@
 import { validate as isValidUUID } from "uuid"
 import { processStringSync, encodeJSBinding } from "@budibase/string-templates"
 
-const { runJsHelpersTests } = require("@budibase/string-templates/test/utils")
+import { runJsHelpersTests } from "@budibase/string-templates/test/utils"
 
 import tk from "timekeeper"
 import { init } from ".."
@@ -30,12 +30,12 @@ describe("jsRunner (using isolated-vm)", () => {
     )
   }
 
-  it("it can run a basic javascript", async () => {
+  it("can run a basic javascript", async () => {
     const output = await processJS(`return 1 + 2`)
     expect(output).toBe(3)
   })
 
-  it("it can execute sloppy javascript", async () => {
+  it("can execute sloppy javascript", async () => {
     const output = await processJS(`a=2;b=3;return a + b`)
     expect(output).toBe(5)
   })
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 b0692f0fd1..833faa3ebd 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)
 
@@ -150,7 +170,8 @@ export class IsolatedVM implements VM {
       }
 
       decode(...input: any) {
-        // @ts-ignore
+        // @ts-expect-error - this is going to run in the isolate, where this function will be available
+        // eslint-disable-next-line no-undef
         return textDecoderCb({
           constructorArgs: this.constructorArgs,
           functionArgs: input,
@@ -195,6 +216,11 @@ export class IsolatedVM implements VM {
     return result[this.runResultKey]
   }
 
+  close(): void {
+    this.vm.release()
+    this.isolate.dispose()
+  }
+
   private registerCallbacks(functions: Record<string, any>) {
     const libId = crypto.randomUUID().replace(/-/g, "")
 
diff --git a/packages/server/src/middleware/authorized.ts b/packages/server/src/middleware/authorized.ts
index fe7f6bb6fe..ec8a3711cf 100644
--- a/packages/server/src/middleware/authorized.ts
+++ b/packages/server/src/middleware/authorized.ts
@@ -120,7 +120,7 @@ const authorized =
         !!subResourceId &&
         (await sdk.permissions.getResourcePerms(subResourceId))
 
-      function getPermLevel(permLevel: string) {
+      const getPermLevel = (permLevel: string) => {
         let result: string[] = []
         if (permissions[permLevel]) {
           result.push(permissions[permLevel].role)
diff --git a/packages/server/src/middleware/cleanup.ts b/packages/server/src/middleware/cleanup.ts
new file mode 100644
index 0000000000..43f945ab6b
--- /dev/null
+++ b/packages/server/src/middleware/cleanup.ts
@@ -0,0 +1,33 @@
+import { Ctx } from "@budibase/types"
+import { context } from "@budibase/backend-core"
+import { tracer } from "dd-trace"
+
+export default async (ctx: Ctx, next: any) => {
+  const resp = await next()
+
+  const current = context.getCurrentContext()
+  if (!current || !current.cleanup) {
+    return resp
+  }
+
+  let errors = []
+  for (let fn of current.cleanup) {
+    try {
+      await tracer.trace("cleanup", async span => {
+        await fn()
+      })
+    } catch (e) {
+      // We catch errors here to ensure we at least attempt to run all cleanup
+      // functions. We'll throw the first error we encounter after all cleanup
+      // functions have been run.
+      errors.push(e)
+    }
+  }
+  delete current.cleanup
+
+  if (errors.length > 0) {
+    throw errors[0]
+  }
+
+  return resp
+}
diff --git a/packages/server/src/middleware/tests/authorized.spec.ts b/packages/server/src/middleware/tests/authorized.spec.ts
index 0741f50e4d..72c286cb01 100644
--- a/packages/server/src/middleware/tests/authorized.spec.ts
+++ b/packages/server/src/middleware/tests/authorized.spec.ts
@@ -213,11 +213,11 @@ describe("Authorization middleware", () => {
       it("will fetch resource permissions when resource is set", async () => {
         await config.executeMiddleware()
 
-        expect(config.throw).not.toBeCalled()
+        expect(config.throw).not.toHaveBeenCalled()
         expect(config.next).toHaveBeenCalled()
 
-        expect(mockedGetResourcePerms).toBeCalledTimes(1)
-        expect(mockedGetResourcePerms).toBeCalledWith(resourceId)
+        expect(mockedGetResourcePerms).toHaveBeenCalledTimes(1)
+        expect(mockedGetResourcePerms).toHaveBeenCalledWith(resourceId)
       })
     })
   })
diff --git a/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts b/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts
index 40ff88c1e5..243f9a9329 100644
--- a/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts
+++ b/packages/server/src/middleware/tests/trimViewRowInfo.spec.ts
@@ -133,8 +133,8 @@ describe("trimViewRowInfo middleware", () => {
     })
     expect(config.params.sourceId).toEqual(table._id)
 
-    expect(config.next).toBeCalledTimes(1)
-    expect(config.throw).not.toBeCalled()
+    expect(config.next).toHaveBeenCalledTimes(1)
+    expect(config.throw).not.toHaveBeenCalled()
   })
 
   it("when columns are defined, trimmed data is returned", async () => {
@@ -162,7 +162,7 @@ describe("trimViewRowInfo middleware", () => {
     })
     expect(config.params.sourceId).toEqual(table._id)
 
-    expect(config.next).toBeCalledTimes(1)
-    expect(config.throw).not.toBeCalled()
+    expect(config.next).toHaveBeenCalledTimes(1)
+    expect(config.throw).not.toHaveBeenCalled()
   })
 })
diff --git a/packages/server/src/migrations/tests/index.spec.ts b/packages/server/src/migrations/tests/index.spec.ts
index 236776cd3f..8eb59b8a0e 100644
--- a/packages/server/src/migrations/tests/index.spec.ts
+++ b/packages/server/src/migrations/tests/index.spec.ts
@@ -66,28 +66,25 @@ describe("migrations", () => {
         )[0]
         await migrations.runMigration(migration)
 
-        expect(events.app.created).toBeCalledTimes(1)
-        expect(events.app.published).toBeCalledTimes(1)
-        expect(events.automation.created).toBeCalledTimes(2)
-        expect(events.automation.stepCreated).toBeCalledTimes(1)
-        expect(events.datasource.created).toBeCalledTimes(2)
-        expect(events.layout.created).toBeCalledTimes(1)
-        expect(events.query.created).toBeCalledTimes(2)
-        expect(events.role.created).toBeCalledTimes(2)
-        expect(events.table.created).toBeCalledTimes(3)
-        expect(events.view.created).toBeCalledTimes(2)
-        expect(events.view.calculationCreated).toBeCalledTimes(1)
-        expect(events.view.filterCreated).toBeCalledTimes(1)
-        expect(events.screen.created).toBeCalledTimes(2)
-        expect(events.backfill.appSucceeded).toBeCalledTimes(2)
-
-        const processor = events.processors.analyticsProcessor.processEvent
-        console.log(processor)
+        expect(events.app.created).toHaveBeenCalledTimes(1)
+        expect(events.app.published).toHaveBeenCalledTimes(1)
+        expect(events.automation.created).toHaveBeenCalledTimes(2)
+        expect(events.automation.stepCreated).toHaveBeenCalledTimes(1)
+        expect(events.datasource.created).toHaveBeenCalledTimes(2)
+        expect(events.layout.created).toHaveBeenCalledTimes(1)
+        expect(events.query.created).toHaveBeenCalledTimes(2)
+        expect(events.role.created).toHaveBeenCalledTimes(2)
+        expect(events.table.created).toHaveBeenCalledTimes(3)
+        expect(events.view.created).toHaveBeenCalledTimes(2)
+        expect(events.view.calculationCreated).toHaveBeenCalledTimes(1)
+        expect(events.view.filterCreated).toHaveBeenCalledTimes(1)
+        expect(events.screen.created).toHaveBeenCalledTimes(2)
+        expect(events.backfill.appSucceeded).toHaveBeenCalledTimes(2)
 
         // to make sure caching is working as expected
         expect(
           events.processors.analyticsProcessor.processEvent
-        ).toBeCalledTimes(23)
+        ).toHaveBeenCalledTimes(23)
       })
     })
   })
@@ -123,24 +120,24 @@ describe("migrations", () => {
       )[0]
       await migrations.runMigration(migration)
 
-      expect(events.user.created).toBeCalledTimes(3)
-      expect(events.role.assigned).toBeCalledTimes(2)
-      expect(events.user.permissionBuilderAssigned).toBeCalledTimes(1) // default test user
-      expect(events.user.permissionAdminAssigned).toBeCalledTimes(1) // admin from above
-      expect(events.rows.created).toBeCalledTimes(1)
-      expect(events.rows.created).toBeCalledWith(2, timestamp)
-      expect(events.email.SMTPCreated).toBeCalledTimes(1)
-      expect(events.auth.SSOCreated).toBeCalledTimes(2)
-      expect(events.auth.SSOActivated).toBeCalledTimes(2)
-      expect(events.org.logoUpdated).toBeCalledTimes(1)
-      expect(events.org.nameUpdated).toBeCalledTimes(1)
-      expect(events.org.platformURLUpdated).toBeCalledTimes(1)
-      expect(events.backfill.tenantSucceeded).toBeCalledTimes(1)
+      expect(events.user.created).toHaveBeenCalledTimes(3)
+      expect(events.role.assigned).toHaveBeenCalledTimes(2)
+      expect(events.user.permissionBuilderAssigned).toHaveBeenCalledTimes(1) // default test user
+      expect(events.user.permissionAdminAssigned).toHaveBeenCalledTimes(1) // admin from above
+      expect(events.rows.created).toHaveBeenCalledTimes(1)
+      expect(events.rows.created).toHaveBeenCalledWith(2, timestamp)
+      expect(events.email.SMTPCreated).toHaveBeenCalledTimes(1)
+      expect(events.auth.SSOCreated).toHaveBeenCalledTimes(2)
+      expect(events.auth.SSOActivated).toHaveBeenCalledTimes(2)
+      expect(events.org.logoUpdated).toHaveBeenCalledTimes(1)
+      expect(events.org.nameUpdated).toHaveBeenCalledTimes(1)
+      expect(events.org.platformURLUpdated).toHaveBeenCalledTimes(1)
+      expect(events.backfill.tenantSucceeded).toHaveBeenCalledTimes(1)
 
       // to make sure caching is working as expected
-      expect(events.processors.analyticsProcessor.processEvent).toBeCalledTimes(
-        19
-      )
+      expect(
+        events.processors.analyticsProcessor.processEvent
+      ).toHaveBeenCalledTimes(19)
     })
   })
 })
diff --git a/packages/server/src/sdk/app/backups/imports.ts b/packages/server/src/sdk/app/backups/imports.ts
index 75c17dfa95..977dea5b63 100644
--- a/packages/server/src/sdk/app/backups/imports.ts
+++ b/packages/server/src/sdk/app/backups/imports.ts
@@ -24,7 +24,7 @@ import tar from "tar"
 
 type TemplateType = {
   file?: {
-    type: string
+    type?: string
     path: string
     password?: string
   }
diff --git a/packages/server/src/sdk/app/datasources/datasources.ts b/packages/server/src/sdk/app/datasources/datasources.ts
index fd0d291d91..336a94636b 100644
--- a/packages/server/src/sdk/app/datasources/datasources.ts
+++ b/packages/server/src/sdk/app/datasources/datasources.ts
@@ -30,9 +30,15 @@ import {
 } from "../../../db/utils"
 import sdk from "../../index"
 import { setupCreationAuth as googleSetupCreationAuth } from "../../../integrations/googlesheets"
+import { helpers } from "@budibase/shared-core"
 
 const ENV_VAR_PREFIX = "env."
 
+function addDatasourceFlags(datasource: Datasource) {
+  datasource.isSQL = helpers.isSQL(datasource)
+  return datasource
+}
+
 export async function fetch(opts?: {
   enriched: boolean
 }): Promise<Datasource[]> {
@@ -56,7 +62,7 @@ export async function fetch(opts?: {
   } as Datasource
 
   // Get external datasources
-  const datasources = (
+  let datasources = (
     await db.allDocs<Datasource>(
       getDatasourceParams(null, {
         include_docs: true,
@@ -75,6 +81,7 @@ export async function fetch(opts?: {
     }
   }
 
+  datasources = datasources.map(datasource => addDatasourceFlags(datasource))
   if (opts?.enriched) {
     const envVars = await getEnvironmentVariables()
     const promises = datasources.map(datasource =>
@@ -150,6 +157,7 @@ async function enrichDatasourceWithValues(
 }
 
 export async function enrich(datasource: Datasource) {
+  datasource = addDatasourceFlags(datasource)
   const { datasource: response } = await enrichDatasourceWithValues(datasource)
   return response
 }
@@ -159,7 +167,8 @@ export async function get(
   opts?: { enriched: boolean }
 ): Promise<Datasource> {
   const appDb = context.getAppDB()
-  const datasource = await appDb.get<Datasource>(datasourceId)
+  let datasource = await appDb.get<Datasource>(datasourceId)
+  datasource = addDatasourceFlags(datasource)
   if (opts?.enriched) {
     return (await enrichDatasourceWithValues(datasource)).datasource
   } else {
@@ -271,13 +280,14 @@ export function mergeConfigs(update: Datasource, old: Datasource) {
 export async function getExternalDatasources(): Promise<Datasource[]> {
   const db = context.getAppDB()
 
-  const externalDatasources = await db.allDocs<Datasource>(
+  let dsResponse = await db.allDocs<Datasource>(
     getDatasourcePlusParams(undefined, {
       include_docs: true,
     })
   )
 
-  return externalDatasources.rows.map(r => r.doc!)
+  const externalDatasources = dsResponse.rows.map(r => r.doc!)
+  return externalDatasources.map(datasource => addDatasourceFlags(datasource))
 }
 
 export async function save(
@@ -290,11 +300,11 @@ export async function save(
   const fetchSchema = opts?.fetchSchema || false
   const tablesFilter = opts?.tablesFilter || []
 
-  datasource = {
+  datasource = addDatasourceFlags({
     _id: generateDatasourceID({ plus }),
     ...datasource,
     type: plus ? DocumentType.DATASOURCE_PLUS : DocumentType.DATASOURCE,
-  }
+  })
 
   let errors: Record<string, string> = {}
   if (fetchSchema) {
diff --git a/packages/server/src/sdk/app/rows/search.ts b/packages/server/src/sdk/app/rows/search.ts
index 8b24f9bc5f..63bbd699fa 100644
--- a/packages/server/src/sdk/app/rows/search.ts
+++ b/packages/server/src/sdk/app/rows/search.ts
@@ -1,10 +1,4 @@
-import {
-  Row,
-  SearchFilters,
-  SearchParams,
-  SortOrder,
-  SortType,
-} from "@budibase/types"
+import { Row, SearchFilters, SearchParams, SortOrder } from "@budibase/types"
 import { isExternalTableID } from "../../../integrations/utils"
 import * as internal from "./search/internal"
 import * as external from "./search/external"
diff --git a/packages/server/src/sdk/app/rows/search/internal.ts b/packages/server/src/sdk/app/rows/search/internal.ts
index 2d3c32e02e..8147ca46ad 100644
--- a/packages/server/src/sdk/app/rows/search/internal.ts
+++ b/packages/server/src/sdk/app/rows/search/internal.ts
@@ -1,6 +1,7 @@
 import {
   context,
   db,
+  HTTPError,
   SearchParams as InternalSearchParams,
 } from "@budibase/backend-core"
 import env from "../../../../environment"
@@ -31,6 +32,7 @@ import sdk from "../../../../sdk"
 import { ExportRowsParams, ExportRowsResult } from "../search"
 import { searchInputMapping } from "./utils"
 import pick from "lodash/pick"
+import { breakRowIdField } from "../../../../integrations/utils"
 
 export async function search(options: SearchParams) {
   const { tableId } = options
@@ -103,7 +105,16 @@ export async function exportRows(
     let response = (
       await db.allDocs({
         include_docs: true,
-        keys: rowIds,
+        keys: rowIds.map((row: string) => {
+          const ids = breakRowIdField(row)
+          if (ids.length > 1) {
+            throw new HTTPError(
+              "Export data does not support composite keys.",
+              400
+            )
+          }
+          return ids[0]
+        }),
       })
     ).rows.map(row => row.doc)
 
diff --git a/packages/server/src/sdk/app/rows/search/utils.ts b/packages/server/src/sdk/app/rows/search/utils.ts
index 5d93dcaca2..d300fdbef0 100644
--- a/packages/server/src/sdk/app/rows/search/utils.ts
+++ b/packages/server/src/sdk/app/rows/search/utils.ts
@@ -66,7 +66,7 @@ export function searchInputMapping(table: Table, options: SearchParams) {
   }
   for (let [key, column] of Object.entries(table.schema)) {
     switch (column.type) {
-      case FieldType.BB_REFERENCE:
+      case FieldType.BB_REFERENCE: {
         const subtype = column.subtype as FieldSubtype
         switch (subtype) {
           case FieldSubtype.USER:
@@ -77,6 +77,7 @@ export function searchInputMapping(table: Table, options: SearchParams) {
             utils.unreachable(subtype)
         }
         break
+      }
     }
   }
   return options
diff --git a/packages/server/src/sdk/app/rows/utils.ts b/packages/server/src/sdk/app/rows/utils.ts
index 6e3e25364e..8aa017d238 100644
--- a/packages/server/src/sdk/app/rows/utils.ts
+++ b/packages/server/src/sdk/app/rows/utils.ts
@@ -14,7 +14,7 @@ import { makeExternalQuery } from "../../../integrations/base/query"
 import { Format } from "../../../api/controllers/view/exporters"
 import sdk from "../.."
 import { isRelationshipColumn } from "../../../db/utils"
-import { SqlClient } from "../../../integrations/utils"
+import { SqlClient, isSQL } from "../../../integrations/utils"
 
 const SQL_CLIENT_SOURCE_MAP: Record<SourceName, SqlClient | undefined> = {
   [SourceName.POSTGRES]: SqlClient.POSTGRES,
@@ -37,7 +37,7 @@ const SQL_CLIENT_SOURCE_MAP: Record<SourceName, SqlClient | undefined> = {
 }
 
 export function getSQLClient(datasource: Datasource): SqlClient {
-  if (!datasource.isSQL) {
+  if (!isSQL(datasource)) {
     throw new Error("Cannot get SQL Client for non-SQL datasource")
   }
   const lookup = SQL_CLIENT_SOURCE_MAP[datasource.source]
diff --git a/packages/server/src/sdk/app/tables/tests/tables.spec.ts b/packages/server/src/sdk/app/tables/tests/tables.spec.ts
index 457988c476..6e2cf9efa8 100644
--- a/packages/server/src/sdk/app/tables/tests/tables.spec.ts
+++ b/packages/server/src/sdk/app/tables/tests/tables.spec.ts
@@ -84,7 +84,7 @@ describe("table sdk", () => {
         },
       })
 
-      expect(sdk.views.enrichSchema).toBeCalledTimes(3)
+      expect(sdk.views.enrichSchema).toHaveBeenCalledTimes(3)
 
       expect(res).toEqual({
         ...basicTable,
diff --git a/packages/server/src/sdk/tests/attachments.spec.ts b/packages/server/src/sdk/tests/attachments.spec.ts
index f1abb246f8..0fd43ac5a8 100644
--- a/packages/server/src/sdk/tests/attachments.spec.ts
+++ b/packages/server/src/sdk/tests/attachments.spec.ts
@@ -44,7 +44,7 @@ import { db as dbCore } from "@budibase/backend-core"
 import sdk from "../index"
 
 describe("should be able to re-write attachment URLs", () => {
-  it("it should update URLs on a number of rows over the limit", async () => {
+  it("should update URLs on a number of rows over the limit", async () => {
     const db = dbCore.getDB("app_aaa")
     await db.put(table)
     const limit = 30
diff --git a/packages/server/src/sdk/tests/rows/row.spec.ts b/packages/server/src/sdk/tests/rows/row.spec.ts
deleted file mode 100644
index 8b01356e35..0000000000
--- a/packages/server/src/sdk/tests/rows/row.spec.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { exportRows } from "../../app/rows/search/external"
-import sdk from "../.."
-import { ExternalRequest } from "../../../api/controllers/row/ExternalRequest"
-import { ExportRowsParams } from "../../app/rows/search"
-import { Format } from "../../../api/controllers/view/exporters"
-import { HTTPError } from "@budibase/backend-core"
-import { Operation } from "@budibase/types"
-
-const mockDatasourcesGet = jest.fn()
-const mockTableGet = jest.fn()
-sdk.datasources.get = mockDatasourcesGet
-sdk.tables.getTable = mockTableGet
-
-jest.mock("../../../api/controllers/row/ExternalRequest")
-jest.mock("../../../utilities/rowProcessor", () => ({
-  outputProcessing: jest.fn((_, rows) => rows),
-}))
-
-jest.mock("../../../api/controllers/view/exporters", () => ({
-  ...jest.requireActual("../../../api/controllers/view/exporters"),
-  Format: {
-    CSV: "csv",
-  },
-}))
-jest.mock("../../../utilities/fileSystem")
-
-describe("external row sdk", () => {
-  describe("exportRows", () => {
-    function getExportOptions(): ExportRowsParams {
-      return {
-        tableId: "datasource__tablename",
-        format: Format.CSV,
-        query: {},
-      }
-    }
-
-    const externalRequestCall = jest.fn()
-    beforeAll(() => {
-      jest
-        .spyOn(ExternalRequest.prototype, "run")
-        .mockImplementation(externalRequestCall.mockResolvedValue([]))
-    })
-
-    afterEach(() => {
-      jest.clearAllMocks()
-    })
-
-    it("should throw a 400 if no datasource entities are present", async () => {
-      const exportOptions = getExportOptions()
-      await expect(exportRows(exportOptions)).rejects.toThrowError(
-        new HTTPError("Datasource has not been configured for plus API.", 400)
-      )
-    })
-
-    it("should handle single quotes from a row ID", async () => {
-      mockDatasourcesGet.mockImplementation(async () => ({
-        entities: {
-          tablename: {
-            schema: {},
-          },
-        },
-      }))
-      const exportOptions = getExportOptions()
-      exportOptions.rowIds = ["['d001']"]
-
-      await exportRows(exportOptions)
-
-      expect(ExternalRequest).toBeCalledTimes(1)
-      expect(ExternalRequest).toBeCalledWith(
-        Operation.READ,
-        exportOptions.tableId,
-        undefined
-      )
-
-      expect(externalRequestCall).toBeCalledTimes(1)
-      expect(externalRequestCall).toBeCalledWith(
-        expect.objectContaining({
-          filters: {
-            oneOf: {
-              _id: ["d001"],
-            },
-          },
-        })
-      )
-    })
-
-    it("should throw a 400 if any composite keys are present", async () => {
-      const exportOptions = getExportOptions()
-      exportOptions.rowIds = ["[123]", "['d001'%2C'10111']"]
-      await expect(exportRows(exportOptions)).rejects.toThrowError(
-        new HTTPError("Export data does not support composite keys.", 400)
-      )
-    })
-
-    it("should throw a 400 if no table name was found", async () => {
-      const exportOptions = getExportOptions()
-      exportOptions.tableId = "datasource__"
-      exportOptions.rowIds = ["[123]"]
-
-      await expect(exportRows(exportOptions)).rejects.toThrowError(
-        new HTTPError("Could not find table name.", 400)
-      )
-    })
-
-    it("should only export specified columns", async () => {
-      mockDatasourcesGet.mockImplementation(async () => ({
-        entities: {
-          tablename: {
-            schema: {
-              name: {},
-              age: {},
-              dob: {},
-            },
-          },
-        },
-      }))
-      const headers = ["name", "dob"]
-
-      const result = await exportRows({
-        tableId: "datasource__tablename",
-        format: Format.CSV,
-        query: {},
-        columns: headers,
-      })
-
-      expect(result).toEqual({
-        fileName: "export.csv",
-        content: `"name","dob"`,
-      })
-    })
-  })
-})
diff --git a/packages/server/src/sdk/tests/rows/search.spec.ts b/packages/server/src/sdk/tests/rows/search.spec.ts
deleted file mode 100644
index feae5e7ee8..0000000000
--- a/packages/server/src/sdk/tests/rows/search.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as search from "../../app/rows/search"
-
-describe("removeEmptyFilters", () => {
-  it("0 should not be removed", () => {
-    const filters = search.removeEmptyFilters({
-      equal: {
-        column: 0,
-      },
-    })
-    expect((filters.equal as any).column).toBe(0)
-  })
-
-  it("empty string should be removed", () => {
-    const filters = search.removeEmptyFilters({
-      equal: {
-        column: "",
-      },
-    })
-    expect(Object.values(filters.equal as any).length).toBe(0)
-  })
-})
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index 316f266653..d17535a72f 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -580,7 +580,7 @@ export default class TestConfiguration {
   }
 
   // APP
-  async createApp(appName: string): Promise<App> {
+  async createApp(appName: string, url?: string): Promise<App> {
     // create dev app
     // clear any old app
     this.appId = undefined
@@ -589,6 +589,7 @@ export default class TestConfiguration {
       async () =>
         (await this._req(appController.create, {
           name: appName,
+          url,
         })) as App
     )
     this.appId = this.app.appId
diff --git a/packages/server/src/tests/utilities/api/application.ts b/packages/server/src/tests/utilities/api/application.ts
index da3d7cefd8..d28df223b5 100644
--- a/packages/server/src/tests/utilities/api/application.ts
+++ b/packages/server/src/tests/utilities/api/application.ts
@@ -4,6 +4,7 @@ import {
   type CreateAppRequest,
   type FetchAppDefinitionResponse,
   type FetchAppPackageResponse,
+  DuplicateAppResponse,
 } from "@budibase/types"
 import { Expectations, TestAPI } from "./base"
 import { AppStatus } from "../../../db/utils"
@@ -70,6 +71,22 @@ export class ApplicationAPI extends TestAPI {
     })
   }
 
+  duplicateApp = async (
+    appId: string,
+    fields: object,
+    expectations?: Expectations
+  ): Promise<DuplicateAppResponse> => {
+    let headers = {
+      ...this.config.defaultHeaders(),
+      [constants.Header.APP_ID]: appId,
+    }
+    return this._post(`/api/applications/${appId}/duplicate`, {
+      headers,
+      fields,
+      expectations,
+    })
+  }
+
   getDefinition = async (
     appId: string,
     expectations?: Expectations
diff --git a/packages/server/src/tests/utilities/api/base.ts b/packages/server/src/tests/utilities/api/base.ts
index 3f534fba86..4df58ff425 100644
--- a/packages/server/src/tests/utilities/api/base.ts
+++ b/packages/server/src/tests/utilities/api/base.ts
@@ -143,16 +143,12 @@ export abstract class TestAPI {
     return await request
   }
 
-  protected _request = async <T>(
-    method: Method,
-    url: string,
-    opts?: RequestOpts
-  ): Promise<T> => {
-    const { expectations } = opts || {}
+  protected _checkResponse = (
+    response: Response,
+    expectations?: Expectations
+  ) => {
     const { status = 200 } = expectations || {}
 
-    const response = await this._requestRaw(method, url, opts)
-
     if (response.status !== status) {
       let message = `Expected status ${status} but got ${response.status}`
 
@@ -191,6 +187,17 @@ export abstract class TestAPI {
       expect(response.body).toMatchObject(expectations.body)
     }
 
-    return response.body
+    return response
+  }
+
+  protected _request = async <T>(
+    method: Method,
+    url: string,
+    opts?: RequestOpts
+  ): Promise<T> => {
+    return this._checkResponse(
+      await this._requestRaw(method, url, opts),
+      opts?.expectations
+    ).body
   }
 }
diff --git a/packages/server/src/tests/utilities/api/legacyView.ts b/packages/server/src/tests/utilities/api/legacyView.ts
index 38ef70d62a..ae250a81e2 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 this._checkResponse(response, expectations).text
   }
 }
diff --git a/packages/server/src/tests/utilities/api/row.ts b/packages/server/src/tests/utilities/api/row.ts
index 86664574cb..052e66b86e 100644
--- a/packages/server/src/tests/utilities/api/row.ts
+++ b/packages/server/src/tests/utilities/api/row.ts
@@ -8,10 +8,8 @@ import {
   BulkImportResponse,
   SearchRowResponse,
   SearchParams,
-  DeleteRowRequest,
   DeleteRows,
   DeleteRow,
-  ExportRowsResponse,
 } from "@budibase/types"
 import { Expectations, TestAPI } from "./base"
 
@@ -117,6 +115,7 @@ export class RowAPI extends TestAPI {
         expectations,
       }
     )
+    this._checkResponse(response, expectations)
     return response.text
   }
 
diff --git a/packages/server/src/tests/utilities/api/viewV2.ts b/packages/server/src/tests/utilities/api/viewV2.ts
index d4539e00b1..bd6241b7cd 100644
--- a/packages/server/src/tests/utilities/api/viewV2.ts
+++ b/packages/server/src/tests/utilities/api/viewV2.ts
@@ -11,21 +11,9 @@ import sdk from "../../../sdk"
 
 export class ViewV2API extends TestAPI {
   create = async (
-    viewData?: Partial<CreateViewRequest>,
+    view: CreateViewRequest,
     expectations?: Expectations
   ): Promise<ViewV2> => {
-    let tableId = viewData?.tableId
-    if (!tableId && !this.config.table) {
-      throw "Test requires table to be configured."
-    }
-
-    tableId = tableId || this.config.table!._id!
-    const view = {
-      tableId,
-      name: generator.guid(),
-      ...viewData,
-    }
-
     const exp: Expectations = {
       status: 201,
       ...expectations,
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/attachments.ts b/packages/server/src/utilities/rowProcessor/attachments.ts
index c289680eb3..e1c83352d4 100644
--- a/packages/server/src/utilities/rowProcessor/attachments.ts
+++ b/packages/server/src/utilities/rowProcessor/attachments.ts
@@ -43,7 +43,7 @@ export class AttachmentCleanup {
         if ((columnRemoved && !renaming) || opts.deleting) {
           rows.forEach(row => {
             files = files.concat(
-              row[key].map((attachment: any) => attachment.key)
+              (row[key] || []).map((attachment: any) => attachment.key)
             )
           })
         }
diff --git a/packages/server/src/utilities/rowProcessor/bbReferenceProcessor.ts b/packages/server/src/utilities/rowProcessor/bbReferenceProcessor.ts
index c7b8998bad..31f1f5e575 100644
--- a/packages/server/src/utilities/rowProcessor/bbReferenceProcessor.ts
+++ b/packages/server/src/utilities/rowProcessor/bbReferenceProcessor.ts
@@ -41,7 +41,7 @@ export async function processInputBBReferences(
 
   switch (subtype) {
     case FieldSubtype.USER:
-    case FieldSubtype.USERS:
+    case FieldSubtype.USERS: {
       const { notFoundIds } = await cache.user.getUsers(referenceIds)
 
       if (notFoundIds?.length) {
@@ -53,7 +53,7 @@ export async function processInputBBReferences(
       }
 
       return referenceIds.join(",") || null
-
+    }
     default:
       throw utils.unreachable(subtype)
   }
@@ -73,7 +73,7 @@ export async function processOutputBBReferences(
 
   switch (subtype) {
     case FieldSubtype.USER:
-    case FieldSubtype.USERS:
+    case FieldSubtype.USERS: {
       const { users } = await cache.user.getUsers(ids)
       if (!users.length) {
         return undefined
@@ -86,7 +86,7 @@ export async function processOutputBBReferences(
         firstName: u.firstName,
         lastName: u.lastName,
       }))
-
+    }
     default:
       throw utils.unreachable(subtype)
   }
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/tests/attachments.spec.ts b/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
index 43af79d82c..cefea7e504 100644
--- a/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
+++ b/packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
@@ -64,12 +64,12 @@ describe("attachment cleanup", () => {
     await AttachmentCleanup.tableUpdate(originalTable, [row()], {
       oldTable: table(),
     })
-    expect(mockedDeleteFiles).toBeCalledWith(BUCKET, [FILE_NAME])
+    expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
   })
 
   it("should be able to cleanup a table deletion", async () => {
     await AttachmentCleanup.tableDelete(table(), [row()])
-    expect(mockedDeleteFiles).toBeCalledWith(BUCKET, [FILE_NAME])
+    expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
   })
 
   it("should handle table column renaming", async () => {
@@ -80,12 +80,12 @@ describe("attachment cleanup", () => {
       oldTable: table(),
       rename: { old: "attach", updated: "attach2" },
     })
-    expect(mockedDeleteFiles).not.toBeCalled()
+    expect(mockedDeleteFiles).not.toHaveBeenCalled()
   })
 
   it("shouldn't cleanup if no table changes", async () => {
     await AttachmentCleanup.tableUpdate(table(), [row()], { oldTable: table() })
-    expect(mockedDeleteFiles).not.toBeCalled()
+    expect(mockedDeleteFiles).not.toHaveBeenCalled()
   })
 
   it("should handle row updates", async () => {
@@ -95,12 +95,12 @@ describe("attachment cleanup", () => {
       row: updatedRow,
       oldRow: row(),
     })
-    expect(mockedDeleteFiles).toBeCalledWith(BUCKET, [FILE_NAME])
+    expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
   })
 
   it("should handle row deletion", async () => {
     await AttachmentCleanup.rowDelete(table(), [row()])
-    expect(mockedDeleteFiles).toBeCalledWith(BUCKET, [FILE_NAME])
+    expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
   })
 
   it("should handle row deletion and not throw when attachments are undefined", async () => {
@@ -113,6 +113,33 @@ describe("attachment cleanup", () => {
 
   it("shouldn't cleanup attachments if row not updated", async () => {
     await AttachmentCleanup.rowUpdate(table(), { row: row(), oldRow: row() })
-    expect(mockedDeleteFiles).not.toBeCalled()
+    expect(mockedDeleteFiles).not.toHaveBeenCalled()
+  })
+
+  it("should be able to cleanup a column and not throw when attachments are undefined", async () => {
+    const originalTable = table()
+    delete originalTable.schema["attach"]
+    await AttachmentCleanup.tableUpdate(
+      originalTable,
+      [row("file 1"), { attach: undefined }, row("file 2")],
+      {
+        oldTable: table(),
+      }
+    )
+    expect(mockedDeleteFiles).toHaveBeenCalledTimes(1)
+    expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, ["file 1", "file 2"])
+  })
+
+  it("should be able to cleanup a column and not throw when ALL attachments are undefined", async () => {
+    const originalTable = table()
+    delete originalTable.schema["attach"]
+    await AttachmentCleanup.tableUpdate(
+      originalTable,
+      [{}, { attach: undefined }],
+      {
+        oldTable: table(),
+      }
+    )
+    expect(mockedDeleteFiles).not.toHaveBeenCalled()
   })
 })
diff --git a/packages/server/src/utilities/rowProcessor/tests/bbReferenceProcessor.spec.ts b/packages/server/src/utilities/rowProcessor/tests/bbReferenceProcessor.spec.ts
index b6174861d4..e6ceaae323 100644
--- a/packages/server/src/utilities/rowProcessor/tests/bbReferenceProcessor.spec.ts
+++ b/packages/server/src/utilities/rowProcessor/tests/bbReferenceProcessor.spec.ts
@@ -67,8 +67,8 @@ describe("bbReferenceProcessor", () => {
         )
 
         expect(result).toEqual(userId)
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith([userId])
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith([userId])
       })
 
       it("throws an error given an invalid id", async () => {
@@ -78,9 +78,9 @@ describe("bbReferenceProcessor", () => {
           config.doInTenant(() =>
             processInputBBReferences(userId, FieldSubtype.USER)
           )
-        ).rejects.toThrowError(new InvalidBBRefError(userId, FieldSubtype.USER))
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith([userId])
+        ).rejects.toThrow(new InvalidBBRefError(userId, FieldSubtype.USER))
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith([userId])
       })
 
       it("validates valid user ids as csv", async () => {
@@ -92,8 +92,8 @@ describe("bbReferenceProcessor", () => {
         )
 
         expect(result).toEqual(userIds.join(","))
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith(userIds)
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith(userIds)
       })
 
       it("throws an error given an invalid id in a csv", async () => {
@@ -110,9 +110,7 @@ describe("bbReferenceProcessor", () => {
           config.doInTenant(() =>
             processInputBBReferences(userIdCsv, FieldSubtype.USER)
           )
-        ).rejects.toThrowError(
-          new InvalidBBRefError(wrongId, FieldSubtype.USER)
-        )
+        ).rejects.toThrow(new InvalidBBRefError(wrongId, FieldSubtype.USER))
       })
 
       it("validate valid user object", async () => {
@@ -123,8 +121,8 @@ describe("bbReferenceProcessor", () => {
         )
 
         expect(result).toEqual(userId)
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith([userId])
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith([userId])
       })
 
       it("validate valid user object array", async () => {
@@ -135,8 +133,8 @@ describe("bbReferenceProcessor", () => {
         )
 
         expect(result).toEqual(userIds.join(","))
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith(userIds)
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith(userIds)
       })
 
       it("empty strings will return null", async () => {
@@ -185,8 +183,8 @@ describe("bbReferenceProcessor", () => {
             lastName: user.lastName,
           },
         ])
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith([userId])
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith([userId])
       })
 
       it("fetches user given a valid string id csv", async () => {
@@ -213,8 +211,8 @@ describe("bbReferenceProcessor", () => {
             }))
           )
         )
-        expect(cacheGetUsersSpy).toBeCalledTimes(1)
-        expect(cacheGetUsersSpy).toBeCalledWith([userId1, userId2])
+        expect(cacheGetUsersSpy).toHaveBeenCalledTimes(1)
+        expect(cacheGetUsersSpy).toHaveBeenCalledWith([userId1, userId2])
       })
     })
   })
diff --git a/packages/server/src/utilities/rowProcessor/tests/inputProcessing.spec.ts b/packages/server/src/utilities/rowProcessor/tests/inputProcessing.spec.ts
index b6c1db9159..859a203133 100644
--- a/packages/server/src/utilities/rowProcessor/tests/inputProcessing.spec.ts
+++ b/packages/server/src/utilities/rowProcessor/tests/inputProcessing.spec.ts
@@ -62,8 +62,10 @@ describe("rowProcessor - inputProcessing", () => {
 
     const { row } = await inputProcessing(userId, table, newRow)
 
-    expect(bbReferenceProcessor.processInputBBReferences).toBeCalledTimes(1)
-    expect(bbReferenceProcessor.processInputBBReferences).toBeCalledWith(
+    expect(bbReferenceProcessor.processInputBBReferences).toHaveBeenCalledTimes(
+      1
+    )
+    expect(bbReferenceProcessor.processInputBBReferences).toHaveBeenCalledWith(
       "123",
       "user"
     )
@@ -71,7 +73,7 @@ describe("rowProcessor - inputProcessing", () => {
     expect(row).toEqual({ ...newRow, user })
   })
 
-  it("it does not process BB references if on the schema but it is not populated", async () => {
+  it("does not process BB references if on the schema but it is not populated", async () => {
     const userId = generator.guid()
 
     const table: Table = {
@@ -107,12 +109,12 @@ describe("rowProcessor - inputProcessing", () => {
 
     const { row } = await inputProcessing(userId, table, newRow)
 
-    expect(bbReferenceProcessor.processInputBBReferences).not.toBeCalled()
+    expect(bbReferenceProcessor.processInputBBReferences).not.toHaveBeenCalled()
     expect(row).toEqual({ ...newRow, user: undefined })
   })
 
   it.each([undefined, null, ""])(
-    "it does not process BB references the field is $%",
+    "does not process BB references the field is $%",
     async userValue => {
       const userId = generator.guid()
 
@@ -150,12 +152,14 @@ describe("rowProcessor - inputProcessing", () => {
 
       const { row } = await inputProcessing(userId, table, newRow)
 
-      expect(bbReferenceProcessor.processInputBBReferences).not.toBeCalled()
+      expect(
+        bbReferenceProcessor.processInputBBReferences
+      ).not.toHaveBeenCalled()
       expect(row).toEqual(newRow)
     }
   )
 
-  it("it does not process BB references if not in the schema", async () => {
+  it("does not process BB references if not in the schema", async () => {
     const userId = generator.guid()
 
     const table: Table = {
@@ -191,7 +195,7 @@ describe("rowProcessor - inputProcessing", () => {
 
     const { row } = await inputProcessing(userId, table, newRow)
 
-    expect(bbReferenceProcessor.processInputBBReferences).not.toBeCalled()
+    expect(bbReferenceProcessor.processInputBBReferences).not.toHaveBeenCalled()
     expect(row).toEqual({
       name: "Jack",
       user: 123,
diff --git a/packages/server/src/utilities/rowProcessor/tests/outputProcessing.spec.ts b/packages/server/src/utilities/rowProcessor/tests/outputProcessing.spec.ts
index 95ce340910..a17bd5f393 100644
--- a/packages/server/src/utilities/rowProcessor/tests/outputProcessing.spec.ts
+++ b/packages/server/src/utilities/rowProcessor/tests/outputProcessing.spec.ts
@@ -64,8 +64,10 @@ describe("rowProcessor - outputProcessing", () => {
 
     expect(result).toEqual({ name: "Jack", user })
 
-    expect(bbReferenceProcessor.processOutputBBReferences).toBeCalledTimes(1)
-    expect(bbReferenceProcessor.processOutputBBReferences).toBeCalledWith(
+    expect(
+      bbReferenceProcessor.processOutputBBReferences
+    ).toHaveBeenCalledTimes(1)
+    expect(bbReferenceProcessor.processOutputBBReferences).toHaveBeenCalledWith(
       "123",
       FieldSubtype.USER
     )
@@ -150,7 +152,9 @@ describe("rowProcessor - outputProcessing", () => {
 
     expect(result).toEqual({ name: "Jack" })
 
-    expect(bbReferenceProcessor.processOutputBBReferences).toBeCalledTimes(1)
+    expect(
+      bbReferenceProcessor.processOutputBBReferences
+    ).toHaveBeenCalledTimes(1)
   })
 
   it("does not fetch bb references when not in the schema", async () => {
@@ -189,6 +193,8 @@ describe("rowProcessor - outputProcessing", () => {
 
     expect(result).toEqual({ name: "Jack", user: "123" })
 
-    expect(bbReferenceProcessor.processOutputBBReferences).not.toBeCalled()
+    expect(
+      bbReferenceProcessor.processOutputBBReferences
+    ).not.toHaveBeenCalled()
   })
 })
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/server/src/utilities/schema.ts b/packages/server/src/utilities/schema.ts
index 500e922d65..7d9e41e5e9 100644
--- a/packages/server/src/utilities/schema.ts
+++ b/packages/server/src/utilities/schema.ts
@@ -191,7 +191,7 @@ function isValidBBReference(
 ): boolean {
   switch (columnSubtype) {
     case FieldSubtype.USER:
-    case FieldSubtype.USERS:
+    case FieldSubtype.USERS: {
       if (typeof columnData !== "string") {
         return false
       }
@@ -208,7 +208,7 @@ function isValidBBReference(
         user => !db.isGlobalUserID(user._id)
       )
       return !constainsWrongId
-
+    }
     default:
       throw utils.unreachable(columnSubtype)
   }
diff --git a/packages/shared-core/jest.config.ts b/packages/shared-core/jest.config.ts
new file mode 100644
index 0000000000..5c7c870b58
--- /dev/null
+++ b/packages/shared-core/jest.config.ts
@@ -0,0 +1,10 @@
+export default {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.ts?$": "@swc/jest",
+  },
+  moduleNameMapper: {
+    "@budibase/types": "<rootDir>/../types/src",
+  },
+}
diff --git a/packages/shared-core/package.json b/packages/shared-core/package.json
index 777896a7f7..c024d1b819 100644
--- a/packages/shared-core/package.json
+++ b/packages/shared-core/package.json
@@ -11,7 +11,9 @@
     "build": "node ../../scripts/build.js && tsc -p tsconfig.build.json --emitDeclarationOnly --paths null",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
-    "check:types": "tsc -p tsconfig.json --noEmit --paths null"
+    "check:types": "tsc -p tsconfig.json --noEmit --paths null",
+    "test": "jest",
+    "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
     "@budibase/types": "0.0.0",
@@ -20,29 +22,5 @@
   "devDependencies": {
     "rimraf": "3.0.2",
     "typescript": "5.2.2"
-  },
-  "nx": {
-    "targets": {
-      "build": {
-        "dependsOn": [
-          {
-            "projects": [
-              "@budibase/types"
-            ],
-            "target": "build"
-          }
-        ]
-      },
-      "dev": {
-        "dependsOn": [
-          {
-            "projects": [
-              "@budibase/types"
-            ],
-            "target": "build"
-          }
-        ]
-      }
-    }
   }
 }
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/shared-core/src/tests/cron.test.ts b/packages/shared-core/src/tests/cron.test.ts
index d56165b2b8..3945acb565 100644
--- a/packages/shared-core/src/tests/cron.test.ts
+++ b/packages/shared-core/src/tests/cron.test.ts
@@ -1,4 +1,3 @@
-import { expect, describe, it } from "vitest"
 import { cron } from "../helpers"
 
 describe("check valid and invalid crons", () => {
diff --git a/packages/shared-core/src/tests/filters.test.ts b/packages/shared-core/src/tests/filters.test.ts
index de969562af..e74e37d681 100644
--- a/packages/shared-core/src/tests/filters.test.ts
+++ b/packages/shared-core/src/tests/filters.test.ts
@@ -5,7 +5,6 @@ import {
   SearchFilter,
 } from "@budibase/types"
 import { buildLuceneQuery, runLuceneQuery } from "../filters"
-import { expect, describe, it, test } from "vitest"
 
 describe("runLuceneQuery", () => {
   const docs = [
@@ -194,7 +193,7 @@ describe("runLuceneQuery", () => {
     expect(runLuceneQuery(docs, query).map(row => row.order_id)).toEqual([2, 3])
   })
 
-  test.each([[523, 259], "523,259"])(
+  it.each([[523, 259], "523,259"])(
     "should return rows with matches on numeric oneOf filter",
     input => {
       const query = buildQuery({
@@ -209,7 +208,7 @@ describe("runLuceneQuery", () => {
     }
   )
 
-  test.each([
+  it.each([
     [false, []],
     [true, [1, 2, 3]],
   ])("should return %s  if allOr is %s ", (allOr, expectedResult) => {
diff --git a/packages/shared-core/tsconfig.build.json b/packages/shared-core/tsconfig.build.json
index 8a7f0ea216..13e298d71c 100644
--- a/packages/shared-core/tsconfig.build.json
+++ b/packages/shared-core/tsconfig.build.json
@@ -18,13 +18,6 @@
     },
     "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
   },
-  "include": ["**/*.js", "**/*.ts"],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.spec.ts",
-    "**/*.spec.js",
-    "__mocks__",
-    "src/tests"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["**/*.spec.ts", "**/*.spec.js", "__mocks__", "src/tests"]
 }
diff --git a/packages/shared-core/tsconfig.json b/packages/shared-core/tsconfig.json
index 5e3d49c8b9..ad028931e4 100644
--- a/packages/shared-core/tsconfig.json
+++ b/packages/shared-core/tsconfig.json
@@ -1,9 +1,8 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "baseUrl": "..",
-    "rootDir": "src",
-    "composite": true
+    "composite": true,
+    "types": ["node", "jest"]
   },
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/string-templates/jest.config.js b/packages/string-templates/jest.config.js
index c6391cdb92..4916ebf894 100644
--- a/packages/string-templates/jest.config.js
+++ b/packages/string-templates/jest.config.js
@@ -4,6 +4,7 @@
  */
 
 module.exports = {
+  preset: "ts-jest",
   // All imported modules in your tests should be mocked automatically
   // automock: false,
 
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index ceafd5364f..8cf8d92692 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -2,39 +2,39 @@
   "name": "@budibase/string-templates",
   "version": "0.0.0",
   "description": "Handlebars wrapper for Budibase templating.",
-  "main": "src/index.js",
+  "main": "dist/bundle.cjs",
   "module": "dist/bundle.mjs",
+  "types": "src/index.ts",
   "license": "MPL-2.0",
-  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./src/index.js",
+      "require": "./dist/bundle.cjs",
       "import": "./dist/bundle.mjs"
     },
     "./package.json": "./package.json",
-    "./test/utils": "./test/utils.js"
+    "./iife": "./src/iife.js"
   },
   "files": [
     "dist",
-    "src",
-    "manifest.json"
+    "src"
   ],
   "scripts": {
-    "build": "tsc && rollup -c",
-    "dev": "concurrently \"tsc --watch\" \"rollup -cw\"",
+    "build": "tsc --emitDeclarationOnly && rollup -c",
+    "dev": "rollup -cw",
+    "check:types": "tsc -p tsconfig.json --noEmit --paths null",
     "test": "jest",
-    "manifest": "node ./scripts/gen-collection-info.js"
+    "manifest": "ts-node ./scripts/gen-collection-info.ts"
   },
   "dependencies": {
     "@budibase/handlebars-helpers": "^0.13.1",
     "dayjs": "^1.10.8",
-    "handlebars": "^4.7.6",
+    "handlebars": "^4.7.8",
     "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "concurrently": "^8.2.2",
+    "@rollup/plugin-inject": "^5.0.5",
+    "@rollup/plugin-typescript": "8.3.0",
     "doctrine": "^3.0.0",
     "jest": "29.7.0",
     "marked": "^4.0.10",
@@ -44,6 +44,7 @@
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "29.1.1",
     "typescript": "5.2.2"
   }
 }
diff --git a/packages/string-templates/rollup.config.js b/packages/string-templates/rollup.config.js
index d7f45489c9..a843286a82 100644
--- a/packages/string-templates/rollup.config.js
+++ b/packages/string-templates/rollup.config.js
@@ -4,31 +4,38 @@ import json from "@rollup/plugin-json"
 import { terser } from "rollup-plugin-terser"
 import builtins from "rollup-plugin-node-builtins"
 import globals from "rollup-plugin-node-globals"
+import typescript from "@rollup/plugin-typescript"
 import injectProcessEnv from "rollup-plugin-inject-process-env"
+import inject from "@rollup/plugin-inject"
 
 const production = !process.env.ROLLUP_WATCH
 
-export default [
-  {
-    input: "src/index.mjs",
-    output: {
-      sourcemap: !production,
-      format: "esm",
-      file: "./dist/bundle.mjs",
-    },
-    plugins: [
-      resolve({
-        preferBuiltins: true,
-        browser: true,
-      }),
-      commonjs(),
-      globals(),
-      builtins(),
-      json(),
-      injectProcessEnv({
-        NO_JS: process.env.NO_JS,
-      }),
-      production && terser(),
-    ],
+const config = (format, outputFile) => ({
+  input: "src/index.ts",
+  output: {
+    sourcemap: !production,
+    format,
+    file: outputFile,
   },
+  plugins: [
+    typescript(),
+    resolve({
+      preferBuiltins: true,
+      browser: true,
+    }),
+    commonjs(),
+    globals(),
+    inject({ Buffer: ["buffer", "Buffer"] }),
+    builtins(),
+    json(),
+    injectProcessEnv({
+      NO_JS: process.env.NO_JS,
+    }),
+    production && terser(),
+  ],
+})
+
+export default [
+  config("cjs", "./dist/bundle.cjs"),
+  config("esm", "./dist/bundle.mjs"),
 ]
diff --git a/packages/string-templates/scripts/gen-collection-info.js b/packages/string-templates/scripts/gen-collection-info.ts
similarity index 95%
rename from packages/string-templates/scripts/gen-collection-info.js
rename to packages/string-templates/scripts/gen-collection-info.ts
index ed57fe7fae..ae2a726661 100644
--- a/packages/string-templates/scripts/gen-collection-info.js
+++ b/packages/string-templates/scripts/gen-collection-info.ts
@@ -22,7 +22,7 @@ const COLLECTIONS = [
   "object",
   "uuid",
 ]
-const FILENAME = join(__dirname, "..", "manifest.json")
+const FILENAME = join(__dirname, "..", "src", "manifest.json")
 const outputJSON = {}
 const ADDED_HELPERS = {
   date: {
@@ -126,7 +126,7 @@ const excludeFunctions = { string: ["raw"] }
  * This script is very specific to purpose, parsing the handlebars-helpers files to attempt to get information about them.
  */
 function run() {
-  const foundNames = []
+  const foundNames: string[] = []
   for (let collection of COLLECTIONS) {
     const collectionFile = fs.readFileSync(
       `${path.dirname(require.resolve(HELPER_LIBRARY))}/lib/${collection}.js`,
@@ -147,7 +147,7 @@ function run() {
       }
       foundNames.push(name)
       // this is ridiculous, but it parse the function header
-      const fnc = entry[1].toString()
+      const fnc = entry[1]!.toString()
       const jsDocInfo = getCommentInfo(collectionFile, fnc)
       let args = jsDocInfo.tags
         .filter(tag => tag.title === "param")
@@ -176,8 +176,8 @@ function run() {
   }
 
   // convert all markdown to HTML
-  for (let collection of Object.values(outputJSON)) {
-    for (let helper of Object.values(collection)) {
+  for (let collection of Object.values<any>(outputJSON)) {
+    for (let helper of Object.values<any>(collection)) {
       helper.description = marked.parse(helper.description)
     }
   }
diff --git a/packages/string-templates/src/conversion/index.js b/packages/string-templates/src/conversion/index.ts
similarity index 85%
rename from packages/string-templates/src/conversion/index.js
rename to packages/string-templates/src/conversion/index.ts
index 10aaef0d2f..7eb5ea71af 100644
--- a/packages/string-templates/src/conversion/index.js
+++ b/packages/string-templates/src/conversion/index.ts
@@ -1,11 +1,11 @@
-const { getJsHelperList } = require("../helpers")
+import { getJsHelperList } from "../helpers"
 
-function getLayers(fullBlock) {
+function getLayers(fullBlock: string): string[] {
   let layers = []
   while (fullBlock.length) {
     const start = fullBlock.lastIndexOf("("),
       end = fullBlock.indexOf(")")
-    let layer
+    let layer: string
     if (start === -1 || end === -1) {
       layer = fullBlock.trim()
       fullBlock = ""
@@ -21,7 +21,7 @@ function getLayers(fullBlock) {
   return layers
 }
 
-function getVariable(variableName) {
+function getVariable(variableName: string) {
   if (!variableName || typeof variableName !== "string") {
     return variableName
   }
@@ -47,10 +47,12 @@ function getVariable(variableName) {
   return `$("${variableName}")`
 }
 
-function buildList(parts, value) {
+function buildList(parts: string[], value: any) {
   function build() {
     return parts
-      .map(part => (part.startsWith("helper") ? part : getVariable(part)))
+      .map((part: string) =>
+        part.startsWith("helper") ? part : getVariable(part)
+      )
       .join(", ")
   }
   if (!value) {
@@ -60,12 +62,12 @@ function buildList(parts, value) {
   }
 }
 
-function splitBySpace(layer) {
-  const parts = []
+function splitBySpace(layer: string) {
+  const parts: string[] = []
   let started = null,
     endChar = null,
     last = 0
-  function add(str) {
+  function add(str: string) {
     const startsWith = ["]"]
     while (startsWith.indexOf(str.substring(0, 1)) !== -1) {
       str = str.substring(1, str.length)
@@ -103,7 +105,7 @@ function splitBySpace(layer) {
   return parts
 }
 
-module.exports.convertHBSBlock = (block, blockNumber) => {
+export function convertHBSBlock(block: string, blockNumber: number) {
   const braceLength = block[2] === "{" ? 3 : 2
   block = block.substring(braceLength, block.length - braceLength).trim()
   const layers = getLayers(block)
@@ -114,7 +116,7 @@ module.exports.convertHBSBlock = (block, blockNumber) => {
     const parts = splitBySpace(layer)
     if (value || parts.length > 1 || list[parts[0]]) {
       // first of layer should always be the helper
-      const helper = parts.splice(0, 1)
+      const [helper] = parts.splice(0, 1)
       if (list[helper]) {
         value = `helpers.${helper}(${buildList(parts, value)})`
       }
diff --git a/packages/string-templates/src/errors.js b/packages/string-templates/src/errors.js
deleted file mode 100644
index e0dcc3de1c..0000000000
--- a/packages/string-templates/src/errors.js
+++ /dev/null
@@ -1,11 +0,0 @@
-class JsErrorTimeout extends Error {
-  code = "ERR_SCRIPT_EXECUTION_TIMEOUT"
-
-  constructor() {
-    super()
-  }
-}
-
-module.exports = {
-  JsErrorTimeout,
-}
diff --git a/packages/string-templates/src/errors.ts b/packages/string-templates/src/errors.ts
new file mode 100644
index 0000000000..79a8a525ef
--- /dev/null
+++ b/packages/string-templates/src/errors.ts
@@ -0,0 +1,3 @@
+export class JsErrorTimeout extends Error {
+  code = "ERR_SCRIPT_EXECUTION_TIMEOUT"
+}
diff --git a/packages/string-templates/src/helpers/Helper.js b/packages/string-templates/src/helpers/Helper.js
deleted file mode 100644
index d963c87158..0000000000
--- a/packages/string-templates/src/helpers/Helper.js
+++ /dev/null
@@ -1,29 +0,0 @@
-class Helper {
-  constructor(name, fn, useValueFallback = true) {
-    this.name = name
-    this.fn = fn
-    this.useValueFallback = useValueFallback
-  }
-
-  register(handlebars) {
-    // wrap the function so that no helper can cause handlebars to break
-    handlebars.registerHelper(this.name, (value, info) => {
-      let context = {}
-      if (info && info.data && info.data.root) {
-        context = info.data.root
-      }
-      const result = this.fn(value, context)
-      if (result == null) {
-        return this.useValueFallback ? value : null
-      } else {
-        return result
-      }
-    })
-  }
-
-  unregister(handlebars) {
-    handlebars.unregisterHelper(this.name)
-  }
-}
-
-module.exports = Helper
diff --git a/packages/string-templates/src/helpers/Helper.ts b/packages/string-templates/src/helpers/Helper.ts
new file mode 100644
index 0000000000..f6ee3bfd06
--- /dev/null
+++ b/packages/string-templates/src/helpers/Helper.ts
@@ -0,0 +1,36 @@
+import Handlebars from "handlebars"
+
+export default class Helper {
+  private name: any
+  private fn: any
+  private useValueFallback: boolean
+
+  constructor(name: string, fn: any, useValueFallback = true) {
+    this.name = name
+    this.fn = fn
+    this.useValueFallback = useValueFallback
+  }
+
+  register(handlebars: typeof Handlebars) {
+    // wrap the function so that no helper can cause handlebars to break
+    handlebars.registerHelper(
+      this.name,
+      (value: any, info: { data: { root: {} } }) => {
+        let context = {}
+        if (info && info.data && info.data.root) {
+          context = info.data.root
+        }
+        const result = this.fn(value, context)
+        if (result == null) {
+          return this.useValueFallback ? value : null
+        } else {
+          return result
+        }
+      }
+    )
+  }
+
+  unregister(handlebars: { unregisterHelper: any }) {
+    handlebars.unregisterHelper(this.name)
+  }
+}
diff --git a/packages/string-templates/src/helpers/constants.js b/packages/string-templates/src/helpers/constants.ts
similarity index 66%
rename from packages/string-templates/src/helpers/constants.js
rename to packages/string-templates/src/helpers/constants.ts
index 1f8cf7a59d..ffccd36ab0 100644
--- a/packages/string-templates/src/helpers/constants.js
+++ b/packages/string-templates/src/helpers/constants.ts
@@ -1,4 +1,4 @@
-module.exports.HelperFunctionBuiltin = [
+export const HelperFunctionBuiltin = [
   "#if",
   "#unless",
   "#each",
@@ -15,11 +15,11 @@ module.exports.HelperFunctionBuiltin = [
   "with",
 ]
 
-module.exports.HelperFunctionNames = {
+export const HelperFunctionNames = {
   OBJECT: "object",
   ALL: "all",
   LITERAL: "literal",
   JS: "js",
 }
 
-module.exports.LITERAL_MARKER = "%LITERAL%"
+export const LITERAL_MARKER = "%LITERAL%"
diff --git a/packages/string-templates/src/helpers/date.js b/packages/string-templates/src/helpers/date.ts
similarity index 72%
rename from packages/string-templates/src/helpers/date.js
rename to packages/string-templates/src/helpers/date.ts
index 6fe8b288d6..589cb3d978 100644
--- a/packages/string-templates/src/helpers/date.js
+++ b/packages/string-templates/src/helpers/date.ts
@@ -1,12 +1,22 @@
-const dayjs = require("dayjs")
-dayjs.extend(require("dayjs/plugin/duration"))
-dayjs.extend(require("dayjs/plugin/advancedFormat"))
-dayjs.extend(require("dayjs/plugin/isoWeek"))
-dayjs.extend(require("dayjs/plugin/weekYear"))
-dayjs.extend(require("dayjs/plugin/weekOfYear"))
-dayjs.extend(require("dayjs/plugin/relativeTime"))
-dayjs.extend(require("dayjs/plugin/utc"))
-dayjs.extend(require("dayjs/plugin/timezone"))
+import dayjs from "dayjs"
+
+import dayjsDurationPlugin from "dayjs/plugin/duration"
+import dayjsAdvancedFormatPlugin from "dayjs/plugin/advancedFormat"
+import dayjsIsoWeekPlugin from "dayjs/plugin/isoWeek"
+import dayjsWeekYearPlugin from "dayjs/plugin/weekYear"
+import dayjsWeekOfYearPlugin from "dayjs/plugin/weekOfYear"
+import dayjsRelativeTimePlugin from "dayjs/plugin/relativeTime"
+import dayjsUtcPlugin from "dayjs/plugin/utc"
+import dayjsTimezonePlugin from "dayjs/plugin/timezone"
+
+dayjs.extend(dayjsDurationPlugin)
+dayjs.extend(dayjsAdvancedFormatPlugin)
+dayjs.extend(dayjsIsoWeekPlugin)
+dayjs.extend(dayjsWeekYearPlugin)
+dayjs.extend(dayjsWeekOfYearPlugin)
+dayjs.extend(dayjsRelativeTimePlugin)
+dayjs.extend(dayjsUtcPlugin)
+dayjs.extend(dayjsTimezonePlugin)
 
 /**
  * This file was largely taken from the helper-date package - we did this for two reasons:
@@ -17,11 +27,11 @@ dayjs.extend(require("dayjs/plugin/timezone"))
  * https://github.com/helpers/helper-date
  */
 
-function isOptions(val) {
+function isOptions(val: any) {
   return typeof val === "object" && typeof val.hash === "object"
 }
 
-function isApp(thisArg) {
+function isApp(thisArg: any) {
   return (
     typeof thisArg === "object" &&
     typeof thisArg.options === "object" &&
@@ -29,7 +39,7 @@ function isApp(thisArg) {
   )
 }
 
-function getContext(thisArg, locals, options) {
+function getContext(thisArg: any, locals: any, options: any) {
   if (isOptions(thisArg)) {
     return getContext({}, locals, thisArg)
   }
@@ -58,7 +68,7 @@ function getContext(thisArg, locals, options) {
   return context
 }
 
-function initialConfig(str, pattern, options) {
+function initialConfig(str: any, pattern: any, options?: any) {
   if (isOptions(pattern)) {
     options = pattern
     pattern = null
@@ -72,7 +82,7 @@ function initialConfig(str, pattern, options) {
   return { str, pattern, options }
 }
 
-function setLocale(str, pattern, options) {
+function setLocale(this: any, str: any, pattern: any, options?: any) {
   // if options is null then it'll get updated here
   const config = initialConfig(str, pattern, options)
   const defaults = { lang: "en", date: new Date(config.str) }
@@ -83,7 +93,7 @@ function setLocale(str, pattern, options) {
   dayjs.locale(opts.lang || opts.language)
 }
 
-module.exports.date = (str, pattern, options) => {
+export const date = (str: any, pattern: any, options: any) => {
   const config = initialConfig(str, pattern, options)
 
   // if no args are passed, return a formatted date
@@ -109,7 +119,7 @@ module.exports.date = (str, pattern, options) => {
   return date.format(config.pattern)
 }
 
-module.exports.duration = (str, pattern, format) => {
+export const duration = (str: any, pattern: any, format: any) => {
   const config = initialConfig(str, pattern)
 
   setLocale(config.str, config.pattern)
diff --git a/packages/string-templates/src/helpers/external.js b/packages/string-templates/src/helpers/external.ts
similarity index 65%
rename from packages/string-templates/src/helpers/external.js
rename to packages/string-templates/src/helpers/external.ts
index 2487fd91df..36d5ac0f54 100644
--- a/packages/string-templates/src/helpers/external.js
+++ b/packages/string-templates/src/helpers/external.ts
@@ -1,6 +1,9 @@
-const helpers = require("@budibase/handlebars-helpers")
-const { date, duration } = require("./date")
-const { HelperFunctionBuiltin } = require("./constants")
+// @ts-ignore we don't have types for it
+import helpers from "@budibase/handlebars-helpers"
+
+import { date, duration } from "./date"
+import { HelperFunctionBuiltin } from "./constants"
+import Handlebars from "handlebars"
 
 /**
  * full list of supported helpers can be found here:
@@ -24,10 +27,10 @@ const ADDED_HELPERS = {
   duration: duration,
 }
 
-exports.externalCollections = EXTERNAL_FUNCTION_COLLECTIONS
-exports.addedHelpers = ADDED_HELPERS
+export const externalCollections = EXTERNAL_FUNCTION_COLLECTIONS
+export const addedHelpers = ADDED_HELPERS
 
-exports.registerAll = handlebars => {
+export function registerAll(handlebars: typeof Handlebars) {
   for (let [name, helper] of Object.entries(ADDED_HELPERS)) {
     handlebars.registerHelper(name, helper)
   }
@@ -52,17 +55,17 @@ exports.registerAll = handlebars => {
     })
   }
   // add date external functionality
-  exports.externalHelperNames = externalNames.concat(Object.keys(ADDED_HELPERS))
+  externalHelperNames = externalNames.concat(Object.keys(ADDED_HELPERS))
 }
 
-exports.unregisterAll = handlebars => {
+export function unregisterAll(handlebars: typeof Handlebars) {
   for (let name of Object.keys(ADDED_HELPERS)) {
     handlebars.unregisterHelper(name)
   }
-  for (let name of module.exports.externalHelperNames) {
+  for (let name of externalHelperNames) {
     handlebars.unregisterHelper(name)
   }
-  exports.externalHelperNames = []
+  externalHelperNames = []
 }
 
-exports.externalHelperNames = []
+export let externalHelperNames: any[] = []
diff --git a/packages/string-templates/src/helpers/index.js b/packages/string-templates/src/helpers/index.js
deleted file mode 100644
index 5e6dcbd2b9..0000000000
--- a/packages/string-templates/src/helpers/index.js
+++ /dev/null
@@ -1,100 +0,0 @@
-const Helper = require("./Helper")
-const { SafeString } = require("handlebars")
-const externalHandlebars = require("./external")
-const { processJS } = require("./javascript")
-const {
-  HelperFunctionNames,
-  HelperFunctionBuiltin,
-  LITERAL_MARKER,
-} = require("./constants")
-const { getJsHelperList } = require("./list")
-
-const HTML_SWAPS = {
-  "<": "&lt;",
-  ">": "&gt;",
-}
-
-function isObject(value) {
-  if (value == null || typeof value !== "object") {
-    return false
-  }
-  return (
-    value.toString() === "[object Object]" ||
-    (value.length > 0 && typeof value[0] === "object")
-  )
-}
-
-const HELPERS = [
-  // external helpers
-  new Helper(HelperFunctionNames.OBJECT, value => {
-    return new SafeString(JSON.stringify(value))
-  }),
-  // javascript helper
-  new Helper(HelperFunctionNames.JS, processJS, false),
-  // this help is applied to all statements
-  new Helper(HelperFunctionNames.ALL, (value, inputs) => {
-    const { __opts } = inputs
-    if (isObject(value)) {
-      return new SafeString(JSON.stringify(value))
-    }
-    // null/undefined values produce bad results
-    if (__opts && __opts.onlyFound && value == null) {
-      return __opts.input
-    }
-    if (value == null || typeof value !== "string") {
-      return value == null ? "" : value
-    }
-    if (value && value.string) {
-      value = value.string
-    }
-    let text = value
-    if (__opts && __opts.escapeNewlines) {
-      text = value.replace(/\n/g, "\\n")
-    }
-    text = new SafeString(text.replace(/&amp;/g, "&"))
-    if (text == null || typeof text !== "string") {
-      return text
-    }
-    return text.replace(/[<>]/g, tag => {
-      return HTML_SWAPS[tag] || tag
-    })
-  }),
-  // adds a note for post-processor
-  new Helper(HelperFunctionNames.LITERAL, value => {
-    if (value === undefined) {
-      return ""
-    }
-    const type = typeof value
-    const outputVal = type === "object" ? JSON.stringify(value) : value
-    return `{{${LITERAL_MARKER} ${type}-${outputVal}}}`
-  }),
-]
-
-module.exports.HelperNames = () => {
-  return Object.values(HelperFunctionNames).concat(
-    HelperFunctionBuiltin,
-    externalHandlebars.externalHelperNames
-  )
-}
-
-module.exports.registerMinimum = handlebars => {
-  for (let helper of HELPERS) {
-    helper.register(handlebars)
-  }
-}
-
-module.exports.registerAll = handlebars => {
-  module.exports.registerMinimum(handlebars)
-  // register imported helpers
-  externalHandlebars.registerAll(handlebars)
-}
-
-module.exports.unregisterAll = handlebars => {
-  for (let helper of HELPERS) {
-    helper.unregister(handlebars)
-  }
-  // unregister all imported helpers
-  externalHandlebars.unregisterAll(handlebars)
-}
-
-module.exports.getJsHelperList = getJsHelperList
diff --git a/packages/string-templates/src/helpers/index.ts b/packages/string-templates/src/helpers/index.ts
new file mode 100644
index 0000000000..fe74a6d711
--- /dev/null
+++ b/packages/string-templates/src/helpers/index.ts
@@ -0,0 +1,103 @@
+import Helper from "./Helper"
+import Handlebars from "handlebars"
+import * as externalHandlebars from "./external"
+import { processJS } from "./javascript"
+import {
+  HelperFunctionNames,
+  HelperFunctionBuiltin,
+  LITERAL_MARKER,
+} from "./constants"
+
+export { getJsHelperList } from "./list"
+
+const HTML_SWAPS = {
+  "<": "&lt;",
+  ">": "&gt;",
+}
+
+function isObject(value: string | any[]) {
+  if (value == null || typeof value !== "object") {
+    return false
+  }
+  return (
+    value.toString() === "[object Object]" ||
+    (value.length > 0 && typeof value[0] === "object")
+  )
+}
+
+const HELPERS = [
+  // external helpers
+  new Helper(HelperFunctionNames.OBJECT, (value: any) => {
+    return new Handlebars.SafeString(JSON.stringify(value))
+  }),
+  // javascript helper
+  new Helper(HelperFunctionNames.JS, processJS, false),
+  // this help is applied to all statements
+  new Helper(
+    HelperFunctionNames.ALL,
+    (value: string, inputs: { __opts: any }) => {
+      const { __opts } = inputs
+      if (isObject(value)) {
+        return new Handlebars.SafeString(JSON.stringify(value))
+      }
+      // null/undefined values produce bad results
+      if (__opts && __opts.onlyFound && value == null) {
+        return __opts.input
+      }
+      if (value == null || typeof value !== "string") {
+        return value == null ? "" : value
+      }
+      // TODO: check, this should always be false
+      if (value && (value as any).string) {
+        value = (value as any).string
+      }
+      let text: any = value
+      if (__opts && __opts.escapeNewlines) {
+        text = value.replace(/\n/g, "\\n")
+      }
+      text = new Handlebars.SafeString(text.replace(/&amp;/g, "&"))
+      if (text == null || typeof text !== "string") {
+        return text
+      }
+      return text.replace(/[<>]/g, (tag: string) => {
+        return HTML_SWAPS[tag as keyof typeof HTML_SWAPS] || tag
+      })
+    }
+  ),
+  // adds a note for post-processor
+  new Helper(HelperFunctionNames.LITERAL, (value: any) => {
+    if (value === undefined) {
+      return ""
+    }
+    const type = typeof value
+    const outputVal = type === "object" ? JSON.stringify(value) : value
+    return `{{${LITERAL_MARKER} ${type}-${outputVal}}}`
+  }),
+]
+
+export function HelperNames() {
+  return Object.values(HelperFunctionNames).concat(
+    HelperFunctionBuiltin,
+    externalHandlebars.externalHelperNames
+  )
+}
+
+export function registerMinimum(handlebars: typeof Handlebars) {
+  for (let helper of HELPERS) {
+    helper.register(handlebars)
+  }
+}
+
+export function registerAll(handlebars: typeof Handlebars) {
+  registerMinimum(handlebars)
+  // register imported helpers
+  externalHandlebars.registerAll(handlebars)
+}
+
+export function unregisterAll(handlebars: any) {
+  for (let helper of HELPERS) {
+    helper.unregister(handlebars)
+  }
+  // unregister all imported helpers
+  externalHandlebars.unregisterAll(handlebars)
+}
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.ts
similarity index 51%
rename from packages/string-templates/src/helpers/javascript.js
rename to packages/string-templates/src/helpers/javascript.ts
index 7827736812..931cc46dc7 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.ts
@@ -1,21 +1,24 @@
-const { atob, isBackendService, isJSAllowed } = require("../utilities")
-const cloneDeep = require("lodash.clonedeep")
-const { LITERAL_MARKER } = require("../helpers/constants")
-const { getJsHelperList } = require("./list")
+import { atob, isJSAllowed } from "../utilities"
+import cloneDeep from "lodash/fp/cloneDeep"
+import { LITERAL_MARKER } from "../helpers/constants"
+import { getJsHelperList } from "./list"
+import { iifeWrapper } from "../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).
-let runJS
-module.exports.setJSRunner = runner => (runJS = runner)
-module.exports.removeJSRunner = () => {
+let runJS: ((js: string, context: any) => any) | undefined = undefined
+export const setJSRunner = (runner: typeof runJS) => (runJS = runner)
+
+export const removeJSRunner = () => {
   runJS = undefined
 }
 
-let onErrorLog
-module.exports.setOnErrorLog = delegate => (onErrorLog = delegate)
+let onErrorLog: (message: Error) => void
+export const setOnErrorLog = (delegate: typeof onErrorLog) =>
+  (onErrorLog = delegate)
 
 // Helper utility to strip square brackets from a value
-const removeSquareBrackets = value => {
+const removeSquareBrackets = (value: string) => {
   if (!value || typeof value !== "string") {
     return value
   }
@@ -29,7 +32,7 @@ const removeSquareBrackets = value => {
 
 // Our context getter function provided to JS code as $.
 // Extracts a value from context.
-const getContextValue = (path, context) => {
+const getContextValue = (path: string, context: any) => {
   let data = context
   path.split(".").forEach(key => {
     if (data == null || typeof data !== "object") {
@@ -41,27 +44,49 @@ const getContextValue = (path, context) => {
 }
 
 // Evaluates JS code against a certain context
-module.exports.processJS = (handlebars, context) => {
-  if (!isJSAllowed() || (isBackendService() && !runJS)) {
+export function processJS(handlebars: string, context: any) {
+  if (!isJSAllowed() || !runJS) {
     throw new Error("JS disabled in environment.")
   }
   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: any = {}
+    let snippetCache: any = {}
+    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: string) => 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
     const res = { data: runJS(js, sandboxContext) }
     return `{{${LITERAL_MARKER} js_result-${JSON.stringify(res)}}}`
-  } catch (error) {
+  } catch (error: any) {
     onErrorLog && onErrorLog(error)
 
     if (error.code === "ERR_SCRIPT_EXECUTION_TIMEOUT") {
diff --git a/packages/string-templates/src/helpers/list.js b/packages/string-templates/src/helpers/list.ts
similarity index 70%
rename from packages/string-templates/src/helpers/list.js
rename to packages/string-templates/src/helpers/list.ts
index 883ab5678e..361558e04d 100644
--- a/packages/string-templates/src/helpers/list.js
+++ b/packages/string-templates/src/helpers/list.ts
@@ -1,7 +1,7 @@
-const { date, duration } = require("./date")
+import { date, duration } from "./date"
 
 // https://github.com/evanw/esbuild/issues/56
-const externalCollections = {
+const getExternalCollections = (): Record<string, () => any> => ({
   math: require("@budibase/handlebars-helpers/lib/math"),
   array: require("@budibase/handlebars-helpers/lib/array"),
   number: require("@budibase/handlebars-helpers/lib/number"),
@@ -11,32 +11,32 @@ const externalCollections = {
   object: require("@budibase/handlebars-helpers/lib/object"),
   regex: require("@budibase/handlebars-helpers/lib/regex"),
   uuid: require("@budibase/handlebars-helpers/lib/uuid"),
-}
+})
 
-const helpersToRemoveForJs = ["sortBy"]
-module.exports.helpersToRemoveForJs = helpersToRemoveForJs
+export const helpersToRemoveForJs = ["sortBy"]
 
 const addedHelpers = {
   date: date,
   duration: duration,
 }
 
-let helpers = undefined
+let helpers: Record<string, any>
 
-module.exports.getJsHelperList = () => {
+export function getJsHelperList() {
   if (helpers) {
     return helpers
   }
 
   helpers = {}
-  for (let collection of Object.values(externalCollections)) {
+  for (let collection of Object.values(getExternalCollections())) {
     for (let [key, func] of Object.entries(collection)) {
       // Handlebars injects the hbs options to the helpers by default. We are adding an empty {} as a last parameter to simulate it
-      helpers[key] = (...props) => func(...props, {})
+      helpers[key] = (...props: any) => func(...props, {})
     }
   }
-  for (let key of Object.keys(addedHelpers)) {
-    helpers[key] = addedHelpers[key]
+  helpers = {
+    ...helpers,
+    addedHelpers,
   }
 
   for (const toRemove of helpersToRemoveForJs) {
diff --git a/packages/string-templates/src/iife.ts b/packages/string-templates/src/iife.ts
new file mode 100644
index 0000000000..0ce3ad8f8e
--- /dev/null
+++ b/packages/string-templates/src/iife.ts
@@ -0,0 +1,3 @@
+export const iifeWrapper = (script: string) => {
+  return `(function(){\n${script}\n})();`
+}
diff --git a/packages/string-templates/src/index.mjs b/packages/string-templates/src/index.mjs
deleted file mode 100644
index f54ca7e23e..0000000000
--- a/packages/string-templates/src/index.mjs
+++ /dev/null
@@ -1,26 +0,0 @@
-import templates from "./index.js"
-
-/**
- * ES6 entrypoint for rollup
- */
-export const isValid = templates.isValid
-export const makePropSafe = templates.makePropSafe
-export const getManifest = templates.getManifest
-export const isJSBinding = templates.isJSBinding
-export const encodeJSBinding = templates.encodeJSBinding
-export const decodeJSBinding = templates.decodeJSBinding
-export const processStringSync = templates.processStringSync
-export const processObjectSync = templates.processObjectSync
-export const processString = templates.processString
-export const processObject = templates.processObject
-export const doesContainStrings = templates.doesContainStrings
-export const doesContainString = templates.doesContainString
-export const disableEscaping = templates.disableEscaping
-export const findHBSBlocks = templates.findHBSBlocks
-export const convertToJS = templates.convertToJS
-export const setJSRunner = templates.setJSRunner
-export const setOnErrorLog = templates.setOnErrorLog
-export const FIND_ANY_HBS_REGEX = templates.FIND_ANY_HBS_REGEX
-export const helpersToRemoveForJs = templates.helpersToRemoveForJs
-
-export * from "./errors.js"
diff --git a/packages/string-templates/src/index.js b/packages/string-templates/src/index.ts
similarity index 73%
rename from packages/string-templates/src/index.js
rename to packages/string-templates/src/index.ts
index 0125b9e0ab..759fe2dc54 100644
--- a/packages/string-templates/src/index.js
+++ b/packages/string-templates/src/index.ts
@@ -1,23 +1,30 @@
-const vm = require("vm")
-const handlebars = require("handlebars")
-const { registerAll, registerMinimum } = require("./helpers/index")
-const processors = require("./processors")
-const { atob, btoa, isBackendService } = require("./utilities")
-const manifest = require("../manifest.json")
-const {
+import { Context, createContext, runInNewContext } from "vm"
+import { create, TemplateDelegate } from "handlebars"
+import { registerAll, registerMinimum } from "./helpers/index"
+import { preprocess, postprocess } from "./processors"
+import {
+  atob,
+  btoa,
+  isBackendService,
   FIND_HBS_REGEX,
   FIND_ANY_HBS_REGEX,
   findDoubleHbsInstances,
-} = require("./utilities")
-const { convertHBSBlock } = require("./conversion")
-const javascript = require("./helpers/javascript")
-const { helpersToRemoveForJs } = require("./helpers/list")
+} from "./utilities"
+import { convertHBSBlock } from "./conversion"
+import { setJSRunner, removeJSRunner } from "./helpers/javascript"
+import { helpersToRemoveForJs } from "./helpers/list"
 
-const hbsInstance = handlebars.create()
+import manifest from "./manifest.json"
+import { ProcessOptions } from "./types"
+
+export { setJSRunner, setOnErrorLog } from "./helpers/javascript"
+export { iifeWrapper } from "./iife"
+
+const hbsInstance = create()
 registerAll(hbsInstance)
-const hbsInstanceNoHelpers = handlebars.create()
+const hbsInstanceNoHelpers = create()
 registerMinimum(hbsInstanceNoHelpers)
-const defaultOpts = {
+const defaultOpts: ProcessOptions = {
   noHelpers: false,
   cacheTemplates: false,
   noEscaping: false,
@@ -28,7 +35,7 @@ const defaultOpts = {
 /**
  * Utility function to check if the object is valid.
  */
-function testObject(object) {
+function testObject(object: any) {
   // JSON stringify will fail if there are any cycles, stops infinite recursion
   try {
     JSON.stringify(object)
@@ -40,8 +47,8 @@ function testObject(object) {
 /**
  * Creates a HBS template function for a given string, and optionally caches it.
  */
-let templateCache = {}
-function createTemplate(string, opts) {
+const templateCache: Record<string, TemplateDelegate<any>> = {}
+function createTemplate(string: string, opts?: ProcessOptions) {
   opts = { ...defaultOpts, ...opts }
 
   // Finalising adds a helper, can't do this with no helpers
@@ -52,11 +59,11 @@ function createTemplate(string, opts) {
     return templateCache[key]
   }
 
-  string = processors.preprocess(string, opts)
+  string = preprocess(string, opts)
 
   // Optionally disable built in HBS escaping
   if (opts.noEscaping) {
-    string = exports.disableEscaping(string)
+    string = disableEscaping(string)
   }
 
   // This does not throw an error when template can't be fulfilled,
@@ -77,24 +84,25 @@ function createTemplate(string, opts) {
  * @param {object|undefined} [opts] optional - specify some options for processing.
  * @returns {Promise<object|array>} The structure input, as fully updated as possible.
  */
-module.exports.processObject = async (object, context, opts) => {
+export async function processObject<T extends Record<string, any>>(
+  object: T,
+  context: object,
+  opts?: { noHelpers?: boolean; escapeNewlines?: boolean; onlyFound?: boolean }
+): Promise<T> {
   testObject(object)
-  for (let key of Object.keys(object || {})) {
+
+  for (const key of Object.keys(object || {})) {
     if (object[key] != null) {
-      let val = object[key]
+      const val = object[key]
+      let parsedValue
       if (typeof val === "string") {
-        object[key] = await module.exports.processString(
-          object[key],
-          context,
-          opts
-        )
+        parsedValue = await processString(object[key], context, opts)
       } else if (typeof val === "object") {
-        object[key] = await module.exports.processObject(
-          object[key],
-          context,
-          opts
-        )
+        parsedValue = await processObject(object[key], context, opts)
       }
+
+      // @ts-ignore
+      object[key] = parsedValue
     }
   }
   return object
@@ -108,9 +116,13 @@ module.exports.processObject = async (object, context, opts) => {
  * @param {object|undefined} [opts] optional - specify some options for processing.
  * @returns {Promise<string>} The enriched string, all templates should have been replaced if they can be.
  */
-module.exports.processString = async (string, context, opts) => {
+export async function processString(
+  string: string,
+  context: object,
+  opts?: ProcessOptions
+): Promise<string> {
   // TODO: carry out any async calls before carrying out async call
-  return module.exports.processStringSync(string, context, opts)
+  return processStringSync(string, context, opts)
 }
 
 /**
@@ -122,14 +134,18 @@ module.exports.processString = async (string, context, opts) => {
  * @param {object|undefined} [opts] optional - specify some options for processing.
  * @returns {object|array} The structure input, as fully updated as possible.
  */
-module.exports.processObjectSync = (object, context, opts) => {
+export function processObjectSync(
+  object: { [x: string]: any },
+  context: any,
+  opts: any
+): object | Array<any> {
   testObject(object)
   for (let key of Object.keys(object || {})) {
     let val = object[key]
     if (typeof val === "string") {
-      object[key] = module.exports.processStringSync(object[key], context, opts)
+      object[key] = processStringSync(object[key], context, opts)
     } else if (typeof val === "object") {
-      object[key] = module.exports.processObjectSync(object[key], context, opts)
+      object[key] = processObjectSync(object[key], context, opts)
     }
   }
   return object
@@ -143,29 +159,32 @@ module.exports.processObjectSync = (object, context, opts) => {
  * @param {object|undefined} [opts] optional - specify some options for processing.
  * @returns {string} The enriched string, all templates should have been replaced if they can be.
  */
-module.exports.processStringSync = (string, context, opts) => {
+export function processStringSync(
+  string: string,
+  context?: object,
+  opts?: ProcessOptions
+): string {
   // Take a copy of input in case of error
   const input = string
   if (typeof string !== "string") {
     throw "Cannot process non-string types."
   }
-  function process(stringPart) {
+  function process(stringPart: string) {
     const template = createTemplate(stringPart, opts)
     const now = Math.floor(Date.now() / 1000) * 1000
-    return processors.postprocess(
-      template({
-        now: new Date(now).toISOString(),
-        __opts: {
-          ...opts,
-          input: stringPart,
-        },
-        ...context,
-      })
-    )
+    const processedString = template({
+      now: new Date(now).toISOString(),
+      __opts: {
+        ...opts,
+        input: stringPart,
+      },
+      ...context,
+    })
+    return postprocess(processedString)
   }
   try {
     if (opts && opts.onlyFound) {
-      const blocks = exports.findHBSBlocks(string)
+      const blocks = findHBSBlocks(string)
       for (let block of blocks) {
         const outcome = process(block)
         string = string.replace(block, outcome)
@@ -185,7 +204,7 @@ module.exports.processStringSync = (string, context, opts) => {
  * this function will find any double braces and switch to triple.
  * @param string the string to have double HBS statements converted to triple.
  */
-module.exports.disableEscaping = string => {
+export function disableEscaping(string: string) {
   const matches = findDoubleHbsInstances(string)
   if (matches == null) {
     return string
@@ -206,7 +225,7 @@ module.exports.disableEscaping = string => {
  * @param {string} property The property which is to be wrapped.
  * @returns {string} The wrapped property ready to be added to a templating string.
  */
-module.exports.makePropSafe = property => {
+export function makePropSafe(property: any): string {
   return `[${property}]`.replace("[[", "[").replace("]]", "]")
 }
 
@@ -216,7 +235,7 @@ module.exports.makePropSafe = property => {
  * @param [opts] optional - specify some options for processing.
  * @returns {boolean} Whether or not the input string is valid.
  */
-module.exports.isValid = (string, opts) => {
+export function isValid(string: any, opts?: any): boolean {
   const validCases = [
     "string",
     "number",
@@ -237,7 +256,7 @@ module.exports.isValid = (string, opts) => {
     })
     template(context)
     return true
-  } catch (err) {
+  } catch (err: any) {
     const msg = err && err.message ? err.message : err
     if (!msg) {
       return false
@@ -258,7 +277,7 @@ module.exports.isValid = (string, opts) => {
  * This manifest provides information about each of the helpers and how it can be used.
  * @returns The manifest JSON which has been generated from the helpers.
  */
-module.exports.getManifest = () => {
+export function getManifest() {
   return manifest
 }
 
@@ -267,8 +286,8 @@ module.exports.getManifest = () => {
  * @param handlebars the HBS expression to check
  * @returns {boolean} whether the expression is JS or not
  */
-module.exports.isJSBinding = handlebars => {
-  return module.exports.decodeJSBinding(handlebars) != null
+export function isJSBinding(handlebars: any): boolean {
+  return decodeJSBinding(handlebars) != null
 }
 
 /**
@@ -276,7 +295,7 @@ module.exports.isJSBinding = handlebars => {
  * @param javascript the JS code to encode
  * @returns {string} the JS HBS expression
  */
-module.exports.encodeJSBinding = javascript => {
+export function encodeJSBinding(javascript: string): string {
   return `{{ js "${btoa(javascript)}" }}`
 }
 
@@ -285,7 +304,7 @@ module.exports.encodeJSBinding = javascript => {
  * @param handlebars the JS HBS expression
  * @returns {string|null} the raw JS code
  */
-module.exports.decodeJSBinding = handlebars => {
+export function decodeJSBinding(handlebars: string): string | null {
   if (!handlebars || typeof handlebars !== "string") {
     return null
   }
@@ -310,7 +329,7 @@ module.exports.decodeJSBinding = handlebars => {
  * @param {string[]} strings The strings to look for.
  * @returns {boolean} Will return true if all strings found in HBS statement.
  */
-module.exports.doesContainStrings = (template, strings) => {
+export function doesContainStrings(template: string, strings: any[]): boolean {
   let regexp = new RegExp(FIND_HBS_REGEX)
   let matches = template.match(regexp)
   if (matches == null) {
@@ -318,8 +337,8 @@ module.exports.doesContainStrings = (template, strings) => {
   }
   for (let match of matches) {
     let hbs = match
-    if (exports.isJSBinding(match)) {
-      hbs = exports.decodeJSBinding(match)
+    if (isJSBinding(match)) {
+      hbs = decodeJSBinding(match)!
     }
     let allFound = true
     for (let string of strings) {
@@ -340,7 +359,7 @@ module.exports.doesContainStrings = (template, strings) => {
  * @param {string} string The string to search within.
  * @return {string[]} The found HBS blocks.
  */
-module.exports.findHBSBlocks = string => {
+export function findHBSBlocks(string: string): string[] {
   if (!string || typeof string !== "string") {
     return []
   }
@@ -361,18 +380,15 @@ module.exports.findHBSBlocks = string => {
  * @param {string} string The word or sentence to search for.
  * @returns {boolean} The this return true if the string is found, false if not.
  */
-module.exports.doesContainString = (template, string) => {
-  return exports.doesContainStrings(template, [string])
+export function doesContainString(template: any, string: any): boolean {
+  return doesContainStrings(template, [string])
 }
 
-module.exports.setJSRunner = javascript.setJSRunner
-module.exports.setOnErrorLog = javascript.setOnErrorLog
-
-module.exports.convertToJS = hbs => {
-  const blocks = exports.findHBSBlocks(hbs)
+export function convertToJS(hbs: string) {
+  const blocks = findHBSBlocks(hbs)
   let js = "return `",
-    prevBlock = null
-  const variables = {}
+    prevBlock: string | null = null
+  const variables: Record<string, any> = {}
   if (blocks.length === 0) {
     js += hbs
   }
@@ -386,7 +402,7 @@ module.exports.convertToJS = hbs => {
     prevBlock = block
     const { variable, value } = convertHBSBlock(block, count++)
     variables[variable] = value
-    js += `${stringPart.split()}\${${variable}}`
+    js += `${[stringPart]}\${${variable}}`
   }
   let varBlock = ""
   for (let [variable, value] of Object.entries(variables)) {
@@ -396,33 +412,34 @@ module.exports.convertToJS = hbs => {
   return `${varBlock}${js}`
 }
 
-module.exports.FIND_ANY_HBS_REGEX = FIND_ANY_HBS_REGEX
+const _FIND_ANY_HBS_REGEX = FIND_ANY_HBS_REGEX
+export { _FIND_ANY_HBS_REGEX as FIND_ANY_HBS_REGEX }
 
-const errors = require("./errors")
-// We cannot use dynamic exports, otherwise the typescript file will not be generating it
-module.exports.JsErrorTimeout = errors.JsErrorTimeout
+export { JsErrorTimeout } from "./errors"
 
-module.exports.helpersToRemoveForJs = helpersToRemoveForJs
+const _helpersToRemoveForJs = helpersToRemoveForJs
+export { _helpersToRemoveForJs as helpersToRemoveForJs }
 
 function defaultJSSetup() {
   if (!isBackendService()) {
     /**
      * Use polyfilled vm to run JS scripts in a browser Env
      */
-    javascript.setJSRunner((js, context) => {
+    setJSRunner((js: string, context: Context) => {
       context = {
         ...context,
         alert: undefined,
         setInterval: undefined,
         setTimeout: undefined,
       }
-      vm.createContext(context)
-      return vm.runInNewContext(js, context, { timeout: 1000 })
+      createContext(context)
+      return runInNewContext(js, context, { timeout: 1000 })
     })
   } else {
-    javascript.removeJSRunner()
+    removeJSRunner()
   }
 }
 defaultJSSetup()
 
-module.exports.defaultJSSetup = defaultJSSetup
+const _defaultJSSetup = defaultJSSetup
+export { _defaultJSSetup as defaultJSSetup }
diff --git a/packages/string-templates/manifest.json b/packages/string-templates/src/manifest.json
similarity index 100%
rename from packages/string-templates/manifest.json
rename to packages/string-templates/src/manifest.json
diff --git a/packages/string-templates/src/processors/index.js b/packages/string-templates/src/processors/index.ts
similarity index 67%
rename from packages/string-templates/src/processors/index.js
rename to packages/string-templates/src/processors/index.ts
index aae18aed8b..308ac5adf4 100644
--- a/packages/string-templates/src/processors/index.js
+++ b/packages/string-templates/src/processors/index.ts
@@ -1,8 +1,9 @@
-const { FIND_HBS_REGEX } = require("../utilities")
-const preprocessor = require("./preprocessor")
-const postprocessor = require("./postprocessor")
+import { FIND_HBS_REGEX } from "../utilities"
+import * as preprocessor from "./preprocessor"
+import * as postprocessor from "./postprocessor"
+import { ProcessOptions } from "../types"
 
-function process(output, processors, opts) {
+function process(output: string, processors: any[], opts?: ProcessOptions) {
   for (let processor of processors) {
     // if a literal statement has occurred stop
     if (typeof output !== "string") {
@@ -21,7 +22,7 @@ function process(output, processors, opts) {
   return output
 }
 
-module.exports.preprocess = (string, opts) => {
+export function preprocess(string: string, opts: ProcessOptions) {
   let processors = preprocessor.processors
   if (opts.noFinalise) {
     processors = processors.filter(
@@ -30,7 +31,7 @@ module.exports.preprocess = (string, opts) => {
   }
   return process(string, processors, opts)
 }
-module.exports.postprocess = string => {
+export function postprocess(string: string) {
   let processors = postprocessor.processors
   return process(string, processors)
 }
diff --git a/packages/string-templates/src/processors/postprocessor.js b/packages/string-templates/src/processors/postprocessor.js
deleted file mode 100644
index f78a572d07..0000000000
--- a/packages/string-templates/src/processors/postprocessor.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const { LITERAL_MARKER } = require("../helpers/constants")
-
-const PostProcessorNames = {
-  CONVERT_LITERALS: "convert-literals",
-}
-
-/* eslint-disable no-unused-vars */
-class Postprocessor {
-  constructor(name, fn) {
-    this.name = name
-    this.fn = fn
-  }
-
-  process(statement) {
-    return this.fn(statement)
-  }
-}
-
-module.exports.PostProcessorNames = PostProcessorNames
-
-module.exports.processors = [
-  new Postprocessor(PostProcessorNames.CONVERT_LITERALS, statement => {
-    if (typeof statement !== "string" || !statement.includes(LITERAL_MARKER)) {
-      return statement
-    }
-    const splitMarkerIndex = statement.indexOf("-")
-    const type = statement.substring(12, splitMarkerIndex)
-    const value = statement.substring(
-      splitMarkerIndex + 1,
-      statement.length - 2
-    )
-    switch (type) {
-      case "string":
-        return value
-      case "number":
-        return parseFloat(value)
-      case "boolean":
-        return value === "true"
-      case "object":
-        return JSON.parse(value)
-      case "js_result":
-        // We use the literal helper to process the result of JS expressions
-        // as we want to be able to return any types.
-        // We wrap the value in an abject to be able to use undefined properly.
-        return JSON.parse(value).data
-    }
-    return value
-  }),
-]
diff --git a/packages/string-templates/src/processors/postprocessor.ts b/packages/string-templates/src/processors/postprocessor.ts
new file mode 100644
index 0000000000..6f7260718b
--- /dev/null
+++ b/packages/string-templates/src/processors/postprocessor.ts
@@ -0,0 +1,56 @@
+import { LITERAL_MARKER } from "../helpers/constants"
+
+export const PostProcessorNames = {
+  CONVERT_LITERALS: "convert-literals",
+}
+
+/* eslint-disable no-unused-vars */
+class Postprocessor {
+  name: string
+  private fn: any
+
+  constructor(name: string, fn: any) {
+    this.name = name
+    this.fn = fn
+  }
+
+  process(statement: any) {
+    return this.fn(statement)
+  }
+}
+
+export const processors = [
+  new Postprocessor(
+    PostProcessorNames.CONVERT_LITERALS,
+    (statement: string) => {
+      if (
+        typeof statement !== "string" ||
+        !statement.includes(LITERAL_MARKER)
+      ) {
+        return statement
+      }
+      const splitMarkerIndex = statement.indexOf("-")
+      const type = statement.substring(12, splitMarkerIndex)
+      const value = statement.substring(
+        splitMarkerIndex + 1,
+        statement.length - 2
+      )
+      switch (type) {
+        case "string":
+          return value
+        case "number":
+          return parseFloat(value)
+        case "boolean":
+          return value === "true"
+        case "object":
+          return JSON.parse(value)
+        case "js_result":
+          // We use the literal helper to process the result of JS expressions
+          // as we want to be able to return any types.
+          // We wrap the value in an abject to be able to use undefined properly.
+          return JSON.parse(value).data
+      }
+      return value
+    }
+  ),
+]
diff --git a/packages/string-templates/src/processors/preprocessor.js b/packages/string-templates/src/processors/preprocessor.js
deleted file mode 100644
index 185a3ab38a..0000000000
--- a/packages/string-templates/src/processors/preprocessor.js
+++ /dev/null
@@ -1,78 +0,0 @@
-const { HelperNames } = require("../helpers")
-const { swapStrings, isAlphaNumeric } = require("../utilities")
-
-const FUNCTION_CASES = ["#", "else", "/"]
-
-const PreprocessorNames = {
-  SWAP_TO_DOT: "swap-to-dot-notation",
-  FIX_FUNCTIONS: "fix-functions",
-  FINALISE: "finalise",
-}
-
-/* eslint-disable no-unused-vars */
-class Preprocessor {
-  constructor(name, fn) {
-    this.name = name
-    this.fn = fn
-  }
-
-  process(fullString, statement, opts) {
-    const output = this.fn(statement, opts)
-    const idx = fullString.indexOf(statement)
-    return swapStrings(fullString, idx, statement.length, output)
-  }
-}
-
-module.exports.processors = [
-  new Preprocessor(PreprocessorNames.SWAP_TO_DOT, statement => {
-    let startBraceIdx = statement.indexOf("[")
-    let lastIdx = 0
-    while (startBraceIdx !== -1) {
-      // if the character previous to the literal specifier is alphanumeric this should happen
-      if (isAlphaNumeric(statement.charAt(startBraceIdx - 1))) {
-        statement = swapStrings(statement, startBraceIdx + lastIdx, 1, ".[")
-      }
-      lastIdx = startBraceIdx + 1
-      const nextBraceIdx = statement.substring(lastIdx + 1).indexOf("[")
-      startBraceIdx = nextBraceIdx > 0 ? lastIdx + 1 + nextBraceIdx : -1
-    }
-    return statement
-  }),
-
-  new Preprocessor(PreprocessorNames.FIX_FUNCTIONS, statement => {
-    for (let specialCase of FUNCTION_CASES) {
-      const toFind = `{ ${specialCase}`,
-        replacement = `{${specialCase}`
-      statement = statement.replace(new RegExp(toFind, "g"), replacement)
-    }
-    return statement
-  }),
-
-  new Preprocessor(PreprocessorNames.FINALISE, (statement, opts) => {
-    const noHelpers = opts && opts.noHelpers
-    let insideStatement = statement.slice(2, statement.length - 2)
-    if (insideStatement.charAt(0) === " ") {
-      insideStatement = insideStatement.slice(1)
-    }
-    if (insideStatement.charAt(insideStatement.length - 1) === " ") {
-      insideStatement = insideStatement.slice(0, insideStatement.length - 1)
-    }
-    const possibleHelper = insideStatement.split(" ")[0]
-    // function helpers can't be wrapped
-    for (let specialCase of FUNCTION_CASES) {
-      if (possibleHelper.includes(specialCase)) {
-        return statement
-      }
-    }
-    const testHelper = possibleHelper.trim().toLowerCase()
-    if (
-      !noHelpers &&
-      HelperNames().some(option => testHelper === option.toLowerCase())
-    ) {
-      insideStatement = `(${insideStatement})`
-    }
-    return `{{ all ${insideStatement} }}`
-  }),
-]
-
-module.exports.PreprocessorNames = PreprocessorNames
diff --git a/packages/string-templates/src/processors/preprocessor.ts b/packages/string-templates/src/processors/preprocessor.ts
new file mode 100644
index 0000000000..141b2be3a9
--- /dev/null
+++ b/packages/string-templates/src/processors/preprocessor.ts
@@ -0,0 +1,82 @@
+import { HelperNames } from "../helpers"
+import { swapStrings, isAlphaNumeric } from "../utilities"
+
+const FUNCTION_CASES = ["#", "else", "/"]
+
+export const PreprocessorNames = {
+  SWAP_TO_DOT: "swap-to-dot-notation",
+  FIX_FUNCTIONS: "fix-functions",
+  FINALISE: "finalise",
+}
+
+/* eslint-disable no-unused-vars */
+class Preprocessor {
+  name: string
+  private fn: any
+
+  constructor(name: string, fn: any) {
+    this.name = name
+    this.fn = fn
+  }
+
+  process(fullString: string, statement: string, opts: Object) {
+    const output = this.fn(statement, opts)
+    const idx = fullString.indexOf(statement)
+    return swapStrings(fullString, idx, statement.length, output)
+  }
+}
+
+export const processors = [
+  new Preprocessor(PreprocessorNames.SWAP_TO_DOT, (statement: string) => {
+    let startBraceIdx = statement.indexOf("[")
+    let lastIdx = 0
+    while (startBraceIdx !== -1) {
+      // if the character previous to the literal specifier is alphanumeric this should happen
+      if (isAlphaNumeric(statement.charAt(startBraceIdx - 1))) {
+        statement = swapStrings(statement, startBraceIdx + lastIdx, 1, ".[")
+      }
+      lastIdx = startBraceIdx + 1
+      const nextBraceIdx = statement.substring(lastIdx + 1).indexOf("[")
+      startBraceIdx = nextBraceIdx > 0 ? lastIdx + 1 + nextBraceIdx : -1
+    }
+    return statement
+  }),
+
+  new Preprocessor(PreprocessorNames.FIX_FUNCTIONS, (statement: string) => {
+    for (let specialCase of FUNCTION_CASES) {
+      const toFind = `{ ${specialCase}`,
+        replacement = `{${specialCase}`
+      statement = statement.replace(new RegExp(toFind, "g"), replacement)
+    }
+    return statement
+  }),
+
+  new Preprocessor(
+    PreprocessorNames.FINALISE,
+    (statement: string, opts: { noHelpers: any }) => {
+      const noHelpers = opts && opts.noHelpers
+      let insideStatement = statement.slice(2, statement.length - 2)
+      if (insideStatement.charAt(0) === " ") {
+        insideStatement = insideStatement.slice(1)
+      }
+      if (insideStatement.charAt(insideStatement.length - 1) === " ") {
+        insideStatement = insideStatement.slice(0, insideStatement.length - 1)
+      }
+      const possibleHelper = insideStatement.split(" ")[0]
+      // function helpers can't be wrapped
+      for (let specialCase of FUNCTION_CASES) {
+        if (possibleHelper.includes(specialCase)) {
+          return statement
+        }
+      }
+      const testHelper = possibleHelper.trim().toLowerCase()
+      if (
+        !noHelpers &&
+        HelperNames().some(option => testHelper === option.toLowerCase())
+      ) {
+        insideStatement = `(${insideStatement})`
+      }
+      return `{{ all ${insideStatement} }}`
+    }
+  ),
+]
diff --git a/packages/string-templates/src/types.ts b/packages/string-templates/src/types.ts
new file mode 100644
index 0000000000..1e1ef048a4
--- /dev/null
+++ b/packages/string-templates/src/types.ts
@@ -0,0 +1,8 @@
+export interface ProcessOptions {
+  cacheTemplates?: boolean
+  noEscaping?: boolean
+  noHelpers?: boolean
+  noFinalise?: boolean
+  escapeNewlines?: boolean
+  onlyFound?: boolean
+}
diff --git a/packages/string-templates/src/utilities.js b/packages/string-templates/src/utilities.ts
similarity index 54%
rename from packages/string-templates/src/utilities.js
rename to packages/string-templates/src/utilities.ts
index 00b2d7d855..bcb9987c89 100644
--- a/packages/string-templates/src/utilities.js
+++ b/packages/string-templates/src/utilities.ts
@@ -1,28 +1,28 @@
 const ALPHA_NUMERIC_REGEX = /^[A-Za-z0-9]+$/g
 
-module.exports.FIND_HBS_REGEX = /{{([^{].*?)}}/g
-module.exports.FIND_ANY_HBS_REGEX = /{?{{([^{].*?)}}}?/g
-module.exports.FIND_TRIPLE_HBS_REGEX = /{{{([^{].*?)}}}/g
+export const FIND_HBS_REGEX = /{{([^{].*?)}}/g
+export const FIND_ANY_HBS_REGEX = /{?{{([^{].*?)}}}?/g
+export const FIND_TRIPLE_HBS_REGEX = /{{{([^{].*?)}}}/g
 
-module.exports.isBackendService = () => {
+export const isBackendService = () => {
   return typeof window === "undefined"
 }
 
-module.exports.isJSAllowed = () => {
+export const isJSAllowed = () => {
   return process && !process.env.NO_JS
 }
 
 // originally this could be done with a single regex using look behinds
 // but safari does not support this feature
 // original regex: /(?<!{){{[^{}]+}}(?!})/g
-module.exports.findDoubleHbsInstances = string => {
+export const findDoubleHbsInstances = (string: string): string[] => {
   let copied = string
-  const doubleRegex = new RegExp(exports.FIND_HBS_REGEX)
-  const regex = new RegExp(exports.FIND_TRIPLE_HBS_REGEX)
+  const doubleRegex = new RegExp(FIND_HBS_REGEX)
+  const regex = new RegExp(FIND_TRIPLE_HBS_REGEX)
   const tripleMatches = copied.match(regex)
   // remove triple braces
   if (tripleMatches) {
-    tripleMatches.forEach(match => {
+    tripleMatches.forEach((match: string) => {
       copied = copied.replace(match, "")
     })
   }
@@ -30,34 +30,39 @@ module.exports.findDoubleHbsInstances = string => {
   return doubleMatches ? doubleMatches : []
 }
 
-module.exports.isAlphaNumeric = char => {
+export const isAlphaNumeric = (char: string) => {
   return char.match(ALPHA_NUMERIC_REGEX)
 }
 
-module.exports.swapStrings = (string, start, length, swap) => {
+export const swapStrings = (
+  string: string,
+  start: number,
+  length: number,
+  swap: string
+) => {
   return string.slice(0, start) + swap + string.slice(start + length)
 }
 
-module.exports.removeHandlebarsStatements = (
-  string,
+export const removeHandlebarsStatements = (
+  string: string,
   replacement = "Invalid binding"
 ) => {
-  let regexp = new RegExp(exports.FIND_HBS_REGEX)
+  let regexp = new RegExp(FIND_HBS_REGEX)
   let matches = string.match(regexp)
   if (matches == null) {
     return string
   }
   for (let match of matches) {
     const idx = string.indexOf(match)
-    string = exports.swapStrings(string, idx, match.length, replacement)
+    string = swapStrings(string, idx, match.length, replacement)
   }
   return string
 }
 
-module.exports.btoa = plainText => {
+export const btoa = (plainText: string) => {
   return Buffer.from(plainText, "utf-8").toString("base64")
 }
 
-module.exports.atob = base64 => {
+export const atob = (base64: string) => {
   return Buffer.from(base64, "base64").toString("utf-8")
 }
diff --git a/packages/string-templates/test/basic.spec.js b/packages/string-templates/test/basic.spec.ts
similarity index 97%
rename from packages/string-templates/test/basic.spec.js
rename to packages/string-templates/test/basic.spec.ts
index 0b78e3cafd..ae006f06f9 100644
--- a/packages/string-templates/test/basic.spec.js
+++ b/packages/string-templates/test/basic.spec.ts
@@ -1,4 +1,4 @@
-const {
+import {
   processObject,
   processString,
   isValid,
@@ -8,7 +8,7 @@ const {
   doesContainString,
   disableEscaping,
   findHBSBlocks,
-} = require("../src/index.js")
+} from "../src/index"
 
 describe("Test that the string processing works correctly", () => {
   it("should process a basic template string", async () => {
@@ -28,7 +28,7 @@ describe("Test that the string processing works correctly", () => {
   it("should fail gracefully when wrong type passed in", async () => {
     let error = null
     try {
-      await processString(null, null)
+      await processString(null as any, null as any)
     } catch (err) {
       error = err
     }
@@ -76,7 +76,7 @@ describe("Test that the object processing works correctly", () => {
   it("should fail gracefully when object passed in has cycles", async () => {
     let error = null
     try {
-      const innerObj = { a: "thing {{ a }}" }
+      const innerObj: any = { a: "thing {{ a }}" }
       innerObj.b = innerObj
       await processObject(innerObj, { a: 1 })
     } catch (err) {
@@ -98,7 +98,7 @@ describe("Test that the object processing works correctly", () => {
   it("should be able to handle null objects", async () => {
     let error = null
     try {
-      await processObject(null, null)
+      await processObject(null as any, null as any)
     } catch (err) {
       error = err
     }
diff --git a/packages/string-templates/test/constants.js b/packages/string-templates/test/constants.ts
similarity index 72%
rename from packages/string-templates/test/constants.js
rename to packages/string-templates/test/constants.ts
index aac0291636..b9e31bcfcc 100644
--- a/packages/string-templates/test/constants.js
+++ b/packages/string-templates/test/constants.ts
@@ -1,2 +1,2 @@
-module.exports.UUID_REGEX =
+export const UUID_REGEX =
   /^[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
diff --git a/packages/string-templates/test/escapes.spec.js b/packages/string-templates/test/escapes.spec.ts
similarity index 98%
rename from packages/string-templates/test/escapes.spec.js
rename to packages/string-templates/test/escapes.spec.ts
index caa2f7d0c1..ffc72a6b92 100644
--- a/packages/string-templates/test/escapes.spec.js
+++ b/packages/string-templates/test/escapes.spec.ts
@@ -1,4 +1,4 @@
-const { processString } = require("../src/index.js")
+import { processString } from "../src/index"
 
 describe("Handling context properties with spaces in their name", () => {
   it("should allow through literal specifiers", async () => {
diff --git a/packages/string-templates/test/hbsToJs.spec.js b/packages/string-templates/test/hbsToJs.spec.ts
similarity index 97%
rename from packages/string-templates/test/hbsToJs.spec.js
rename to packages/string-templates/test/hbsToJs.spec.ts
index 08d8ff5f67..ea375064a1 100644
--- a/packages/string-templates/test/hbsToJs.spec.js
+++ b/packages/string-templates/test/hbsToJs.spec.ts
@@ -1,6 +1,6 @@
-const { convertToJS } = require("../src/index.js")
+import { convertToJS } from "../src/index"
 
-function checkLines(response, lines) {
+function checkLines(response: string, lines: string[]) {
   const toCheck = response.split("\n")
   let count = 0
   for (let line of lines) {
diff --git a/packages/string-templates/test/helpers.spec.js b/packages/string-templates/test/helpers.spec.ts
similarity index 96%
rename from packages/string-templates/test/helpers.spec.js
rename to packages/string-templates/test/helpers.spec.ts
index 86fef538d3..5f1855535d 100644
--- a/packages/string-templates/test/helpers.spec.js
+++ b/packages/string-templates/test/helpers.spec.ts
@@ -1,7 +1,7 @@
-const { processString, processObject, isValid } = require("../src/index.js")
-const tableJson = require("./examples/table.json")
-const dayjs = require("dayjs")
-const { UUID_REGEX } = require("./constants")
+import { processString, processObject, isValid } from "../src/index"
+import tableJson from "./examples/table.json"
+import dayjs from "dayjs"
+import { UUID_REGEX } from "./constants"
 
 describe("test the custom helpers we have applied", () => {
   it("should be able to use the object helper", async () => {
@@ -188,9 +188,7 @@ describe("test the date helpers", () => {
         time: date.toUTCString(),
       }
     )
-    const formatted = new dayjs(date)
-      .tz("America/New_York")
-      .format("HH-mm-ss Z")
+    const formatted = dayjs(date).tz("America/New_York").format("HH-mm-ss Z")
     expect(output).toBe(formatted)
   })
 
@@ -200,7 +198,7 @@ describe("test the date helpers", () => {
       time: date.toUTCString(),
     })
     const timezone = dayjs.tz.guess()
-    const offset = new dayjs(date).tz(timezone).format("Z")
+    const offset = dayjs(date).tz(timezone).format("Z")
     expect(output).toBe(offset)
   })
 })
@@ -273,7 +271,7 @@ describe("test the string helpers", () => {
 })
 
 describe("test the comparison helpers", () => {
-  async function compare(func, a, b) {
+  async function compare(func: string, a: any, b: any) {
     const output = await processString(
       `{{ #${func} a b }}Success{{ else }}Fail{{ /${func} }}`,
       {
@@ -344,14 +342,14 @@ describe("Test the literal helper", () => {
   })
 
   it("should allow use of the literal specifier for an object", async () => {
-    const output = await processString(`{{literal a}}`, {
+    const output: any = await processString(`{{literal a}}`, {
       a: { b: 1 },
     })
     expect(output.b).toBe(1)
   })
 
   it("should allow use of the literal specifier for an object with dashes", async () => {
-    const output = await processString(`{{literal a}}`, {
+    const output: any = await processString(`{{literal a}}`, {
       a: { b: "i-have-dashes" },
     })
     expect(output.b).toBe("i-have-dashes")
diff --git a/packages/string-templates/test/javascript.spec.js b/packages/string-templates/test/javascript.spec.ts
similarity index 94%
rename from packages/string-templates/test/javascript.spec.js
rename to packages/string-templates/test/javascript.spec.ts
index 0e9f196da6..cb2f765007 100644
--- a/packages/string-templates/test/javascript.spec.js
+++ b/packages/string-templates/test/javascript.spec.ts
@@ -1,13 +1,9 @@
-const vm = require("vm")
+import vm from "vm"
 
-const {
-  processStringSync,
-  encodeJSBinding,
-  setJSRunner,
-} = require("../src/index.js")
-const { UUID_REGEX } = require("./constants")
+import { processStringSync, encodeJSBinding, setJSRunner } from "../src/index"
+import { UUID_REGEX } from "./constants"
 
-const processJS = (js, context) => {
+const processJS = (js: string, context?: object): any => {
   return processStringSync(encodeJSBinding(js), context)
 }
 
diff --git a/packages/string-templates/test/manifest.spec.js b/packages/string-templates/test/manifest.spec.ts
similarity index 79%
rename from packages/string-templates/test/manifest.spec.js
rename to packages/string-templates/test/manifest.spec.ts
index 81183f13c9..de0e3355fd 100644
--- a/packages/string-templates/test/manifest.spec.js
+++ b/packages/string-templates/test/manifest.spec.ts
@@ -1,4 +1,4 @@
-const vm = require("vm")
+import vm from "vm"
 
 jest.mock("@budibase/handlebars-helpers/lib/math", () => {
   const actual = jest.requireActual("@budibase/handlebars-helpers/lib/math")
@@ -17,14 +17,14 @@ jest.mock("@budibase/handlebars-helpers/lib/uuid", () => {
   }
 })
 
-const { processString, setJSRunner } = require("../src/index.js")
+import { processString, setJSRunner } from "../src/index"
 
-const tk = require("timekeeper")
-const { getParsedManifest, runJsHelpersTests } = require("./utils")
+import tk from "timekeeper"
+import { getParsedManifest, runJsHelpersTests } from "./utils"
 
 tk.freeze("2021-01-21T12:00:00")
 
-function escapeRegExp(string) {
+function escapeRegExp(string: string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") // $& means the whole matched string
 }
 
@@ -40,15 +40,15 @@ describe("manifest", () => {
   describe("examples are valid", () => {
     describe.each(Object.keys(manifest))("%s", collection => {
       it.each(manifest[collection])("%s", async (_, { hbs, js }) => {
-        const context = {
-          double: i => i * 2,
-          isString: x => typeof x === "string",
+        const context: any = {
+          double: (i: number) => i * 2,
+          isString: (x: any) => typeof x === "string",
         }
 
         const arrays = hbs.match(/\[[^/\]]+\]/)
         arrays?.forEach((arrayString, i) => {
           hbs = hbs.replace(new RegExp(escapeRegExp(arrayString)), `array${i}`)
-          context[`array${i}`] = JSON.parse(arrayString.replace(/\'/g, '"'))
+          context[`array${i}`] = JSON.parse(arrayString.replace(/'/g, '"'))
         })
 
         let result = await processString(hbs, context)
diff --git a/packages/string-templates/test/renderApp.spec.js b/packages/string-templates/test/renderApp.spec.ts
similarity index 94%
rename from packages/string-templates/test/renderApp.spec.js
rename to packages/string-templates/test/renderApp.spec.ts
index 582e70701f..7570d1a8ec 100644
--- a/packages/string-templates/test/renderApp.spec.js
+++ b/packages/string-templates/test/renderApp.spec.ts
@@ -1,4 +1,4 @@
-const { processString } = require("../src/index.js")
+import { processString } from "../src/index"
 
 describe("specific test case for whether or not full app template can still be rendered", () => {
   it("should be able to render the app template", async () => {
diff --git a/packages/string-templates/test/utils.js b/packages/string-templates/test/utils.ts
similarity index 63%
rename from packages/string-templates/test/utils.js
rename to packages/string-templates/test/utils.ts
index 927a6e3aeb..c683acf5b3 100644
--- a/packages/string-templates/test/utils.js
+++ b/packages/string-templates/test/utils.ts
@@ -1,13 +1,9 @@
-const { getManifest } = require("../src")
-const { getJsHelperList } = require("../src/helpers")
+import { getManifest } from "../src"
+import { getJsHelperList } from "../src/helpers"
 
-const {
-  convertToJS,
-  processStringSync,
-  encodeJSBinding,
-} = require("../src/index.js")
+import { convertToJS, processStringSync, encodeJSBinding } from "../src/index"
 
-function tryParseJson(str) {
+function tryParseJson(str: string) {
   if (typeof str !== "string") {
     return
   }
@@ -19,23 +15,35 @@ function tryParseJson(str) {
   }
 }
 
-const getParsedManifest = () => {
-  const manifest = getManifest()
+type ExampleType = [
+  string,
+  {
+    hbs: string
+    js: string
+    requiresHbsBody: boolean
+  }
+]
+
+export const getParsedManifest = () => {
+  const manifest: any = getManifest()
   const collections = Object.keys(manifest)
+
   const examples = collections.reduce((acc, collection) => {
-    const functions = Object.entries(manifest[collection])
-      .filter(([_, details]) => details.example)
-      .map(([name, details]) => {
+    const functions = Object.entries<{
+      example: string
+      requiresBlock: boolean
+    }>(manifest[collection])
+      .filter(
+        ([_, details]) =>
+          details.example?.split("->").map(x => x.trim()).length > 1
+      )
+      .map(([name, details]): ExampleType => {
         const example = details.example
         let [hbs, js] = example.split("->").map(x => x.trim())
-        if (!js) {
-          // The function has no return value
-          return
-        }
 
         // Trim 's
         js = js.replace(/^'|'$/g, "")
-        let parsedExpected
+        let parsedExpected: string
         if ((parsedExpected = tryParseJson(js))) {
           if (Array.isArray(parsedExpected)) {
             if (typeof parsedExpected[0] === "object") {
@@ -48,36 +56,40 @@ const getParsedManifest = () => {
         const requiresHbsBody = details.requiresBlock
         return [name, { hbs, js, requiresHbsBody }]
       })
-      .filter(x => !!x)
 
-    if (Object.keys(functions).length) {
+    if (functions.length) {
       acc[collection] = functions
     }
     return acc
-  }, {})
+  }, {} as Record<string, ExampleType[]>)
 
   return examples
 }
-module.exports.getParsedManifest = getParsedManifest
 
-module.exports.runJsHelpersTests = ({ funcWrap, testsToSkip } = {}) => {
-  funcWrap = funcWrap || (delegate => delegate())
+export const runJsHelpersTests = ({
+  funcWrap,
+  testsToSkip,
+}: {
+  funcWrap?: any
+  testsToSkip?: any
+} = {}) => {
+  funcWrap = funcWrap || ((delegate: () => any) => delegate())
   const manifest = getParsedManifest()
 
-  const processJS = (js, context) => {
+  const processJS = (js: string, context: object | undefined) => {
     return funcWrap(() => processStringSync(encodeJSBinding(js), context))
   }
 
-  function escapeRegExp(string) {
+  function escapeRegExp(string: string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") // $& means the whole matched string
   }
 
   describe("can be parsed and run as js", () => {
-    const jsHelpers = getJsHelperList()
+    const jsHelpers = getJsHelperList()!
     const jsExamples = Object.keys(manifest).reduce((acc, v) => {
       acc[v] = manifest[v].filter(([key]) => jsHelpers[key])
       return acc
-    }, {})
+    }, {} as typeof manifest)
 
     describe.each(Object.keys(jsExamples))("%s", collection => {
       const examplesToRun = jsExamples[collection]
@@ -86,9 +98,9 @@ module.exports.runJsHelpersTests = ({ funcWrap, testsToSkip } = {}) => {
 
       examplesToRun.length &&
         it.each(examplesToRun)("%s", async (_, { hbs, js }) => {
-          const context = {
-            double: i => i * 2,
-            isString: x => typeof x === "string",
+          const context: any = {
+            double: (i: number) => i * 2,
+            isString: (x: any) => typeof x === "string",
           }
 
           const arrays = hbs.match(/\[[^/\]]+\]/)
diff --git a/packages/string-templates/test/vm.spec.js b/packages/string-templates/test/vm.spec.ts
similarity index 85%
rename from packages/string-templates/test/vm.spec.js
rename to packages/string-templates/test/vm.spec.ts
index 7bf1612386..0581736af2 100644
--- a/packages/string-templates/test/vm.spec.js
+++ b/packages/string-templates/test/vm.spec.ts
@@ -5,8 +5,10 @@ jest.mock("../src/utilities", () => {
     isBackendService: jest.fn().mockReturnValue(true),
   }
 })
-const { defaultJSSetup, processStringSync, encodeJSBinding } = require("../src")
-const { isBackendService } = require("../src/utilities")
+
+import { defaultJSSetup, processStringSync, encodeJSBinding } from "../src"
+import { isBackendService } from "../src/utilities"
+
 const mockedBackendService = jest.mocked(isBackendService)
 
 const binding = encodeJSBinding("return 1")
diff --git a/packages/string-templates/tsconfig.json b/packages/string-templates/tsconfig.json
index a7c7a0df67..7fc13ace8e 100644
--- a/packages/string-templates/tsconfig.json
+++ b/packages/string-templates/tsconfig.json
@@ -1,11 +1,15 @@
 {
   "include": ["src/**/*"],
   "compilerOptions": {
-    "allowJs": true,
     "declaration": true,
-    "emitDeclarationOnly": true,
+    "target": "es6",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "incremental": true,
+    "lib": ["dom"],
     "outDir": "dist",
     "esModuleInterop": true,
-    "types": ["node", "jest"]
+    "types": ["node", "jest"],
+    "resolveJsonModule": true
   }
 }
diff --git a/packages/types/package.json b/packages/types/package.json
index f4c7b13344..67b923ed54 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "description": "Budibase types",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "src/index.ts",
   "author": "Budibase",
   "license": "GPL-3.0",
   "scripts": {
diff --git a/packages/types/src/api/web/application.ts b/packages/types/src/api/web/application.ts
index 3d33fce5b1..68c349be5a 100644
--- a/packages/types/src/api/web/application.ts
+++ b/packages/types/src/api/web/application.ts
@@ -11,6 +11,17 @@ export interface CreateAppRequest {
   includeSampleData?: boolean
   encryptionPassword?: string
   templateString?: string
+  file?: { path: string }
+}
+
+export interface DuplicateAppRequest {
+  name: string
+  url?: string
+}
+
+export interface DuplicateAppResponse {
+  duplicateAppId: string
+  sourceAppId: string
 }
 
 export interface FetchAppDefinitionResponse {
diff --git a/packages/types/src/api/web/auth.ts b/packages/types/src/api/web/auth.ts
index 5ff0c3c1f5..30d129f650 100644
--- a/packages/types/src/api/web/auth.ts
+++ b/packages/types/src/api/web/auth.ts
@@ -18,6 +18,7 @@ export interface UpdateSelfRequest {
   password?: string
   forceResetPassword?: boolean
   onboardedAt?: string
+  appFavourites?: string[]
   tours?: Record<string, Date>
 }
 
diff --git a/packages/types/src/api/web/query.ts b/packages/types/src/api/web/query.ts
index 3959cdea19..66f0248647 100644
--- a/packages/types/src/api/web/query.ts
+++ b/packages/types/src/api/web/query.ts
@@ -11,7 +11,7 @@ export interface PreviewQueryResponse {
 }
 
 export interface ExecuteQueryRequest {
-  parameters?: { [key: string]: string }
+  parameters?: Record<string, string>
   pagination?: any
 }
 
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/types/src/documents/global/user.ts b/packages/types/src/documents/global/user.ts
index ddb1e39c64..a4e6b613c6 100644
--- a/packages/types/src/documents/global/user.ts
+++ b/packages/types/src/documents/global/user.ts
@@ -57,6 +57,7 @@ export interface User extends Document {
   onboardedAt?: string
   tours?: Record<string, Date>
   scimInfo?: { isSync: true } & Record<string, any>
+  appFavourites?: string[]
   ssoId?: string
 }
 
diff --git a/packages/types/src/sdk/db.ts b/packages/types/src/sdk/db.ts
index 4d103d5be6..12c86bd9ba 100644
--- a/packages/types/src/sdk/db.ts
+++ b/packages/types/src/sdk/db.ts
@@ -7,6 +7,7 @@ import {
   ViewTemplateOpts,
 } from "../"
 import { Writable } from "stream"
+import type PouchDB from "pouchdb-find"
 
 export enum SearchIndex {
   ROWS = "rows",
diff --git a/packages/types/src/sdk/events/app.ts b/packages/types/src/sdk/events/app.ts
index 602dd8b6a5..8f03974035 100644
--- a/packages/types/src/sdk/events/app.ts
+++ b/packages/types/src/sdk/events/app.ts
@@ -44,6 +44,14 @@ export interface AppFileImportedEvent extends BaseEvent {
   }
 }
 
+export interface AppDuplicatedEvent extends BaseEvent {
+  duplicateAppId: string
+  appId: string
+  audited: {
+    name: string
+  }
+}
+
 export interface AppTemplateImportedEvent extends BaseEvent {
   appId: string
   templateKey: string
diff --git a/packages/types/src/sdk/events/event.ts b/packages/types/src/sdk/events/event.ts
index f20f1b8fd6..05f4fe4be9 100644
--- a/packages/types/src/sdk/events/event.ts
+++ b/packages/types/src/sdk/events/event.ts
@@ -60,6 +60,7 @@ export enum Event {
   APP_CREATED = "app:created",
   APP_UPDATED = "app:updated",
   APP_DELETED = "app:deleted",
+  APP_DUPLICATED = "app:duplicated",
   APP_PUBLISHED = "app:published",
   APP_UNPUBLISHED = "app:unpublished",
   APP_TEMPLATE_IMPORTED = "app:template:imported",
@@ -259,6 +260,7 @@ export const AuditedEventFriendlyName: Record<Event, string | undefined> = {
   [Event.APP_CREATED]: `App "{{ name }}" created`,
   [Event.APP_UPDATED]: `App "{{ name }}" updated`,
   [Event.APP_DELETED]: `App "{{ name }}" deleted`,
+  [Event.APP_DUPLICATED]: `App "{{ name }}" duplicated`,
   [Event.APP_PUBLISHED]: `App "{{ name }}" published`,
   [Event.APP_UNPUBLISHED]: `App "{{ name }}" unpublished`,
   [Event.APP_TEMPLATE_IMPORTED]: `App "{{ name }}" template imported`,
diff --git a/packages/types/src/sdk/middleware/matchers.ts b/packages/types/src/sdk/middleware/matchers.ts
index fc4ceb323e..671505eb13 100644
--- a/packages/types/src/sdk/middleware/matchers.ts
+++ b/packages/types/src/sdk/middleware/matchers.ts
@@ -8,15 +8,10 @@ export interface EndpointMatcher {
    * ALL is also accepted to cover all verbs.
    */
   method: string
-  /**
-   * The route must match exactly - not just begins with
-   */
-  strict?: boolean
 }
 
 export interface RegexMatcher {
   regex: RegExp
   method: string
-  strict: boolean
   route: string
 }
diff --git a/packages/types/src/sdk/vm.ts b/packages/types/src/sdk/vm.ts
index f1099524bc..1c5820bcc2 100644
--- a/packages/types/src/sdk/vm.ts
+++ b/packages/types/src/sdk/vm.ts
@@ -1,4 +1,5 @@
 export interface VM {
   execute(code: string): any
   withContext<T>(context: Record<string, any>, executeWithContext: () => T): T
+  close(): void
 }
diff --git a/packages/types/tsconfig.json b/packages/types/tsconfig.json
index a2fd5207b4..ad5356c2dc 100644
--- a/packages/types/tsconfig.json
+++ b/packages/types/tsconfig.json
@@ -1,8 +1,6 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "./src",
     "composite": true
   },
   "exclude": ["node_modules", "dist"]
diff --git a/packages/worker/Dockerfile b/packages/worker/Dockerfile
index 77869c48f1..28796ea666 100644
--- a/packages/worker/Dockerfile
+++ b/packages/worker/Dockerfile
@@ -16,17 +16,11 @@ COPY scripts/removeWorkspaceDependencies.sh scripts/removeWorkspaceDependencies.
 RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
 
 
-WORKDIR /string-templates
-COPY packages/string-templates/package.json package.json
-RUN ../scripts/removeWorkspaceDependencies.sh package.json
-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
-COPY packages/string-templates .
 
 
 WORKDIR /app
 COPY packages/worker/package.json .
 COPY packages/worker/dist/yarn.lock .
-RUN cd ../string-templates && yarn link && cd - && yarn link @budibase/string-templates
 
 RUN ../scripts/removeWorkspaceDependencies.sh package.json
 
diff --git a/packages/worker/jest.config.ts b/packages/worker/jest.config.ts
index 0a640766f4..1eb17f100f 100644
--- a/packages/worker/jest.config.ts
+++ b/packages/worker/jest.config.ts
@@ -15,6 +15,7 @@ const config: Config.InitialOptions = {
     "@budibase/backend-core": "<rootDir>/../backend-core/src",
     "@budibase/types": "<rootDir>/../types/src",
     "@budibase/shared-core": ["<rootDir>/../shared-core/src"],
+    "@budibase/string-templates": ["<rootDir>/../string-templates/src"],
   },
 }
 
diff --git a/packages/worker/scripts/test.sh b/packages/worker/scripts/test.sh
index 17b3ee17f4..4191674538 100644
--- a/packages/worker/scripts/test.sh
+++ b/packages/worker/scripts/test.sh
@@ -4,10 +4,10 @@ set -e
 if [[ -n $CI ]]
 then
   # Running in ci, where resources are limited
-  echo "jest --coverage --maxWorkers=2  --forceExit --bail $@"
-  jest --coverage --maxWorkers=2  --forceExit --bail $@
+  echo "jest --coverage --maxWorkers=2 --forceExit --bail $@"
+  jest --coverage --maxWorkers=2 --forceExit --bail $@
 else
   # --maxWorkers performs better in development
-  echo "jest --coverage --maxWorkers=2 --forceExit $@"
-  jest --coverage --maxWorkers=2 --forceExit $@
+  echo "jest --coverage --detectOpenHandles $@"
+  jest --coverage --detectOpenHandles $@
 fi
\ No newline at end of file
diff --git a/packages/worker/src/api/controllers/global/self.ts b/packages/worker/src/api/controllers/global/self.ts
index 2d7e83a2c3..d762f5168a 100644
--- a/packages/worker/src/api/controllers/global/self.ts
+++ b/packages/worker/src/api/controllers/global/self.ts
@@ -9,7 +9,12 @@ import {
 } from "@budibase/backend-core"
 import env from "../../../environment"
 import { groups } from "@budibase/pro"
-import { UpdateSelfRequest, UpdateSelfResponse, UserCtx } from "@budibase/types"
+import {
+  UpdateSelfRequest,
+  UpdateSelfResponse,
+  User,
+  UserCtx,
+} from "@budibase/types"
 
 const { newid } = utils
 
@@ -105,16 +110,75 @@ export async function getSelf(ctx: any) {
   addSessionAttributesToUser(ctx)
 }
 
+export const syncAppFavourites = async (processedAppIds: string[]) => {
+  if (processedAppIds.length === 0) {
+    return []
+  }
+
+  const tenantId = tenancy.getTenantId()
+  const appPrefix =
+    tenantId === tenancy.DEFAULT_TENANT_ID
+      ? dbCore.APP_DEV_PREFIX
+      : `${dbCore.APP_DEV_PREFIX}${tenantId}_`
+
+  const apps = await fetchAppsByIds(processedAppIds, appPrefix)
+  return apps?.reduce((acc: string[], app) => {
+    const id = app.appId.replace(appPrefix, "")
+    if (processedAppIds.includes(id)) {
+      acc.push(id)
+    }
+    return acc
+  }, [])
+}
+
+export const fetchAppsByIds = async (
+  processedAppIds: string[],
+  appPrefix: string
+) => {
+  return await dbCore.getAppsByIDs(
+    processedAppIds.map(appId => {
+      return `${appPrefix}${appId}`
+    })
+  )
+}
+
+const processUserAppFavourites = async (
+  user: User,
+  update: UpdateSelfRequest
+) => {
+  if (!("appFavourites" in update)) {
+    // Ignore requests without an explicit update to favourites.
+    return
+  }
+
+  const userAppFavourites = user.appFavourites || []
+  const requestAppFavourites = new Set(update.appFavourites || [])
+  const containsAll = userAppFavourites.every(v => requestAppFavourites.has(v))
+
+  if (containsAll && requestAppFavourites.size === userAppFavourites.length) {
+    // Ignore request if the outcome will have no change
+    return
+  }
+
+  // Clean up the request by purging apps that no longer exist.
+  const syncedAppFavourites = await syncAppFavourites([...requestAppFavourites])
+  return syncedAppFavourites
+}
+
 export async function updateSelf(
   ctx: UserCtx<UpdateSelfRequest, UpdateSelfResponse>
 ) {
   const update = ctx.request.body
 
   let user = await userSdk.db.getUser(ctx.user._id!)
+  const updatedAppFavourites = await processUserAppFavourites(user, update)
+
   user = {
     ...user,
     ...update,
+    ...(updatedAppFavourites ? { appFavourites: updatedAppFavourites } : {}),
   }
+
   user = await userSdk.db.save(user, { requirePassword: false })
 
   if (update.password) {
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/global/tests/auth.spec.ts b/packages/worker/src/api/routes/global/tests/auth.spec.ts
index e9edfdf1cf..a81d5db435 100644
--- a/packages/worker/src/api/routes/global/tests/auth.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/auth.spec.ts
@@ -58,7 +58,7 @@ describe("/api/global/auth", () => {
         const response = await config.api.auth.login(tenantId, email, password)
 
         expectSetAuthCookie(response)
-        expect(events.auth.login).toBeCalledTimes(1)
+        expect(events.auth.login).toHaveBeenCalledTimes(1)
       })
 
       it("should return 403 with incorrect credentials", async () => {
@@ -139,7 +139,7 @@ describe("/api/global/auth", () => {
     describe("POST /api/global/auth/logout", () => {
       it("should logout", async () => {
         const response = await config.api.auth.logout()
-        expect(events.auth.logout).toBeCalledTimes(1)
+        expect(events.auth.logout).toHaveBeenCalledTimes(1)
 
         const authCookie = getAuthCookie(response)
         expect(authCookie).toBe("")
@@ -160,8 +160,8 @@ describe("/api/global/auth", () => {
         })
         expect(sendMailMock).toHaveBeenCalled()
         expect(code).toBeDefined()
-        expect(events.user.passwordResetRequested).toBeCalledTimes(1)
-        expect(events.user.passwordResetRequested).toBeCalledWith(user)
+        expect(events.user.passwordResetRequested).toHaveBeenCalledTimes(1)
+        expect(events.user.passwordResetRequested).toHaveBeenCalledWith(user)
       })
 
       describe("sso user", () => {
@@ -211,8 +211,8 @@ describe("/api/global/auth", () => {
         delete user.password
 
         expect(res.body).toEqual({ message: "password reset successfully." })
-        expect(events.user.passwordReset).toBeCalledTimes(1)
-        expect(events.user.passwordReset).toBeCalledWith(user)
+        expect(events.user.passwordReset).toHaveBeenCalledTimes(1)
+        expect(events.user.passwordReset).toHaveBeenCalledWith(user)
 
         // login using new password
         await config.api.auth.login(user.tenantId, user.email, newPassword)
@@ -360,21 +360,16 @@ describe("/api/global/auth", () => {
 
         const res = await config.api.configs.OIDCCallback(configId, preAuthRes)
 
-        expect(events.auth.login).toBeCalledWith("oidc", "oauth@example.com")
-        expect(events.auth.login).toBeCalledTimes(1)
+        expect(events.auth.login).toHaveBeenCalledWith(
+          "oidc",
+          "oauth@example.com"
+        )
+        expect(events.auth.login).toHaveBeenCalledTimes(1)
         expect(res.status).toBe(302)
         const location: string = res.get("location")
         expect(location).toBe("/")
         expectSetAuthCookie(res)
       })
     })
-
-    // SINGLE TENANT
-
-    describe("GET /api/global/auth/oidc/callback", () => {})
-
-    describe("GET /api/global/auth/oidc/callback", () => {})
-
-    describe("GET /api/admin/auth/oidc/callback", () => {})
   })
 })
diff --git a/packages/worker/src/api/routes/global/tests/configs.spec.ts b/packages/worker/src/api/routes/global/tests/configs.spec.ts
index 4d9f28d2cb..6e3558ba86 100644
--- a/packages/worker/src/api/routes/global/tests/configs.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/configs.spec.ts
@@ -57,20 +57,22 @@ describe("configs", () => {
       describe("create", () => {
         it("should create activated google config", async () => {
           await saveGoogleConfig()
-          expect(events.auth.SSOCreated).toBeCalledTimes(1)
-          expect(events.auth.SSOCreated).toBeCalledWith(ConfigType.GOOGLE)
-          expect(events.auth.SSODeactivated).not.toBeCalled()
-          expect(events.auth.SSOActivated).toBeCalledTimes(1)
-          expect(events.auth.SSOActivated).toBeCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSOCreated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOCreated).toHaveBeenCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSODeactivated).not.toHaveBeenCalled()
+          expect(events.auth.SSOActivated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOActivated).toHaveBeenCalledWith(
+            ConfigType.GOOGLE
+          )
           await config.deleteConfig(ConfigType.GOOGLE)
         })
 
         it("should create deactivated google config", async () => {
           await saveGoogleConfig({ activated: false })
-          expect(events.auth.SSOCreated).toBeCalledTimes(1)
-          expect(events.auth.SSOCreated).toBeCalledWith(ConfigType.GOOGLE)
-          expect(events.auth.SSOActivated).not.toBeCalled()
-          expect(events.auth.SSODeactivated).not.toBeCalled()
+          expect(events.auth.SSOCreated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOCreated).toHaveBeenCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSOActivated).not.toHaveBeenCalled()
+          expect(events.auth.SSODeactivated).not.toHaveBeenCalled()
           await config.deleteConfig(ConfigType.GOOGLE)
         })
       })
@@ -84,11 +86,13 @@ describe("configs", () => {
             googleConf._id,
             googleConf._rev
           )
-          expect(events.auth.SSOUpdated).toBeCalledTimes(1)
-          expect(events.auth.SSOUpdated).toBeCalledWith(ConfigType.GOOGLE)
-          expect(events.auth.SSOActivated).not.toBeCalled()
-          expect(events.auth.SSODeactivated).toBeCalledTimes(1)
-          expect(events.auth.SSODeactivated).toBeCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSOActivated).not.toHaveBeenCalled()
+          expect(events.auth.SSODeactivated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSODeactivated).toHaveBeenCalledWith(
+            ConfigType.GOOGLE
+          )
           await config.deleteConfig(ConfigType.GOOGLE)
         })
 
@@ -100,11 +104,13 @@ describe("configs", () => {
             googleConf._id,
             googleConf._rev
           )
-          expect(events.auth.SSOUpdated).toBeCalledTimes(1)
-          expect(events.auth.SSOUpdated).toBeCalledWith(ConfigType.GOOGLE)
-          expect(events.auth.SSODeactivated).not.toBeCalled()
-          expect(events.auth.SSOActivated).toBeCalledTimes(1)
-          expect(events.auth.SSOActivated).toBeCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledWith(ConfigType.GOOGLE)
+          expect(events.auth.SSODeactivated).not.toHaveBeenCalled()
+          expect(events.auth.SSOActivated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOActivated).toHaveBeenCalledWith(
+            ConfigType.GOOGLE
+          )
           await config.deleteConfig(ConfigType.GOOGLE)
         })
       })
@@ -123,20 +129,20 @@ describe("configs", () => {
       describe("create", () => {
         it("should create activated OIDC config", async () => {
           await saveOIDCConfig()
-          expect(events.auth.SSOCreated).toBeCalledTimes(1)
-          expect(events.auth.SSOCreated).toBeCalledWith(ConfigType.OIDC)
-          expect(events.auth.SSODeactivated).not.toBeCalled()
-          expect(events.auth.SSOActivated).toBeCalledTimes(1)
-          expect(events.auth.SSOActivated).toBeCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSOCreated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOCreated).toHaveBeenCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSODeactivated).not.toHaveBeenCalled()
+          expect(events.auth.SSOActivated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOActivated).toHaveBeenCalledWith(ConfigType.OIDC)
           await config.deleteConfig(ConfigType.OIDC)
         })
 
         it("should create deactivated OIDC config", async () => {
           await saveOIDCConfig({ activated: false })
-          expect(events.auth.SSOCreated).toBeCalledTimes(1)
-          expect(events.auth.SSOCreated).toBeCalledWith(ConfigType.OIDC)
-          expect(events.auth.SSOActivated).not.toBeCalled()
-          expect(events.auth.SSODeactivated).not.toBeCalled()
+          expect(events.auth.SSOCreated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOCreated).toHaveBeenCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSOActivated).not.toHaveBeenCalled()
+          expect(events.auth.SSODeactivated).not.toHaveBeenCalled()
           await config.deleteConfig(ConfigType.OIDC)
         })
       })
@@ -150,11 +156,13 @@ describe("configs", () => {
             oidcConf._id,
             oidcConf._rev
           )
-          expect(events.auth.SSOUpdated).toBeCalledTimes(1)
-          expect(events.auth.SSOUpdated).toBeCalledWith(ConfigType.OIDC)
-          expect(events.auth.SSOActivated).not.toBeCalled()
-          expect(events.auth.SSODeactivated).toBeCalledTimes(1)
-          expect(events.auth.SSODeactivated).toBeCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSOActivated).not.toHaveBeenCalled()
+          expect(events.auth.SSODeactivated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSODeactivated).toHaveBeenCalledWith(
+            ConfigType.OIDC
+          )
           await config.deleteConfig(ConfigType.OIDC)
         })
 
@@ -166,11 +174,11 @@ describe("configs", () => {
             oidcConf._id,
             oidcConf._rev
           )
-          expect(events.auth.SSOUpdated).toBeCalledTimes(1)
-          expect(events.auth.SSOUpdated).toBeCalledWith(ConfigType.OIDC)
-          expect(events.auth.SSODeactivated).not.toBeCalled()
-          expect(events.auth.SSOActivated).toBeCalledTimes(1)
-          expect(events.auth.SSOActivated).toBeCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOUpdated).toHaveBeenCalledWith(ConfigType.OIDC)
+          expect(events.auth.SSODeactivated).not.toHaveBeenCalled()
+          expect(events.auth.SSOActivated).toHaveBeenCalledTimes(1)
+          expect(events.auth.SSOActivated).toHaveBeenCalledWith(ConfigType.OIDC)
           await config.deleteConfig(ConfigType.OIDC)
         })
       })
@@ -190,8 +198,8 @@ describe("configs", () => {
         it("should create SMTP config", async () => {
           await config.deleteConfig(ConfigType.SMTP)
           await saveSMTPConfig()
-          expect(events.email.SMTPUpdated).not.toBeCalled()
-          expect(events.email.SMTPCreated).toBeCalledTimes(1)
+          expect(events.email.SMTPUpdated).not.toHaveBeenCalled()
+          expect(events.email.SMTPCreated).toHaveBeenCalledTimes(1)
           await config.deleteConfig(ConfigType.SMTP)
         })
       })
@@ -201,8 +209,8 @@ describe("configs", () => {
           const smtpConf = await saveSMTPConfig()
           jest.clearAllMocks()
           await saveSMTPConfig(smtpConf.config, smtpConf._id, smtpConf._rev)
-          expect(events.email.SMTPCreated).not.toBeCalled()
-          expect(events.email.SMTPUpdated).toBeCalledTimes(1)
+          expect(events.email.SMTPCreated).not.toHaveBeenCalled()
+          expect(events.email.SMTPUpdated).toHaveBeenCalledTimes(1)
           await config.deleteConfig(ConfigType.SMTP)
         })
       })
@@ -215,9 +223,9 @@ describe("configs", () => {
 
           await saveSettingsConfig()
 
-          expect(events.org.nameUpdated).not.toBeCalled()
-          expect(events.org.logoUpdated).not.toBeCalled()
-          expect(events.org.platformURLUpdated).not.toBeCalled()
+          expect(events.org.nameUpdated).not.toHaveBeenCalled()
+          expect(events.org.logoUpdated).not.toHaveBeenCalled()
+          expect(events.org.platformURLUpdated).not.toHaveBeenCalled()
         })
 
         it("should create settings config with non-default settings", async () => {
@@ -231,9 +239,9 @@ describe("configs", () => {
 
           await saveSettingsConfig(conf)
 
-          expect(events.org.nameUpdated).toBeCalledTimes(1)
-          expect(events.org.logoUpdated).toBeCalledTimes(1)
-          expect(events.org.platformURLUpdated).toBeCalledTimes(1)
+          expect(events.org.nameUpdated).toHaveBeenCalledTimes(1)
+          expect(events.org.logoUpdated).toHaveBeenCalledTimes(1)
+          expect(events.org.platformURLUpdated).toHaveBeenCalledTimes(1)
           config.cloudHosted()
         })
       })
@@ -253,9 +261,9 @@ describe("configs", () => {
             settingsConfig._rev
           )
 
-          expect(events.org.nameUpdated).toBeCalledTimes(1)
-          expect(events.org.logoUpdated).toBeCalledTimes(1)
-          expect(events.org.platformURLUpdated).toBeCalledTimes(1)
+          expect(events.org.nameUpdated).toHaveBeenCalledTimes(1)
+          expect(events.org.logoUpdated).toHaveBeenCalledTimes(1)
+          expect(events.org.platformURLUpdated).toHaveBeenCalledTimes(1)
           config.cloudHosted()
         })
       })
diff --git a/packages/worker/src/api/routes/global/tests/groups.spec.ts b/packages/worker/src/api/routes/global/tests/groups.spec.ts
index 414518d763..bc489348df 100644
--- a/packages/worker/src/api/routes/global/tests/groups.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/groups.spec.ts
@@ -25,9 +25,9 @@ describe("/api/global/groups", () => {
     it("should be able to create a new group", async () => {
       const group = structures.groups.UserGroup()
       await config.api.groups.saveGroup(group)
-      expect(events.group.created).toBeCalledTimes(1)
-      expect(events.group.updated).not.toBeCalled()
-      expect(events.group.permissionsEdited).not.toBeCalled()
+      expect(events.group.created).toHaveBeenCalledTimes(1)
+      expect(events.group.updated).not.toHaveBeenCalled()
+      expect(events.group.permissionsEdited).not.toHaveBeenCalled()
     })
 
     it("should not allow undefined names", async () => {
@@ -57,7 +57,7 @@ describe("/api/global/groups", () => {
     it("should trim names", async () => {
       const group = { ...structures.groups.UserGroup(), name: "   group name " }
       await config.api.groups.saveGroup(group)
-      expect(events.group.created).toBeCalledWith(
+      expect(events.group.created).toHaveBeenCalledWith(
         expect.objectContaining({ name: "group name" })
       )
     })
@@ -100,8 +100,8 @@ describe("/api/global/groups", () => {
       }
       await config.api.groups.saveGroup(updatedGroup)
 
-      expect(events.group.updated).toBeCalledTimes(1)
-      expect(events.group.permissionsEdited).not.toBeCalled()
+      expect(events.group.updated).toHaveBeenCalledTimes(1)
+      expect(events.group.permissionsEdited).not.toHaveBeenCalled()
     })
 
     describe("scim", () => {
@@ -135,7 +135,7 @@ describe("/api/global/groups", () => {
           },
         })
 
-        expect(events.group.updated).not.toBeCalled()
+        expect(events.group.updated).not.toHaveBeenCalled()
       })
 
       it("update will not amend the SCIM fields", async () => {
@@ -151,7 +151,7 @@ describe("/api/global/groups", () => {
           expect: 200,
         })
 
-        expect(events.group.updated).toBeCalledTimes(1)
+        expect(events.group.updated).toHaveBeenCalledTimes(1)
         expect(
           (
             await config.api.groups.find(group._id!, {
@@ -176,7 +176,7 @@ describe("/api/global/groups", () => {
       let oldGroup = await config.api.groups.saveGroup(group)
       await config.api.groups.deleteGroup(oldGroup.body._id, oldGroup.body._rev)
 
-      expect(events.group.deleted).toBeCalledTimes(1)
+      expect(events.group.deleted).toHaveBeenCalledTimes(1)
     })
   })
 
diff --git a/packages/worker/src/api/routes/global/tests/license.spec.ts b/packages/worker/src/api/routes/global/tests/license.spec.ts
index e08292c061..7c8fdb553c 100644
--- a/packages/worker/src/api/routes/global/tests/license.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/license.spec.ts
@@ -22,7 +22,7 @@ describe("/api/global/license", () => {
     it("returns 200", async () => {
       const res = await config.api.license.refresh()
       expect(res.status).toBe(200)
-      expect(licensing.cache.refresh).toBeCalledTimes(1)
+      expect(licensing.cache.refresh).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -42,7 +42,9 @@ describe("/api/global/license", () => {
         licenseKey: "licenseKey",
       })
       expect(res.status).toBe(200)
-      expect(licensing.keys.activateLicenseKey).toBeCalledWith("licenseKey")
+      expect(licensing.keys.activateLicenseKey).toHaveBeenCalledWith(
+        "licenseKey"
+      )
     })
   })
 
@@ -64,7 +66,7 @@ describe("/api/global/license", () => {
   describe("DELETE /api/global/license/key", () => {
     it("returns 204", async () => {
       const res = await config.api.license.deleteLicenseKey()
-      expect(licensing.keys.deleteLicenseKey).toBeCalledTimes(1)
+      expect(licensing.keys.deleteLicenseKey).toHaveBeenCalledTimes(1)
       expect(res.status).toBe(204)
     })
   })
@@ -74,9 +76,9 @@ describe("/api/global/license", () => {
       const res = await config.api.license.activateOfflineLicense({
         offlineLicenseToken: "offlineLicenseToken",
       })
-      expect(licensing.offline.activateOfflineLicenseToken).toBeCalledWith(
-        "offlineLicenseToken"
-      )
+      expect(
+        licensing.offline.activateOfflineLicenseToken
+      ).toHaveBeenCalledWith("offlineLicenseToken")
       expect(res.status).toBe(200)
     })
   })
@@ -102,7 +104,9 @@ describe("/api/global/license", () => {
     it("returns 204", async () => {
       const res = await config.api.license.deleteOfflineLicense()
       expect(res.status).toBe(204)
-      expect(licensing.offline.deleteOfflineLicenseToken).toBeCalledTimes(1)
+      expect(licensing.offline.deleteOfflineLicenseToken).toHaveBeenCalledTimes(
+        1
+      )
     })
   })
 
diff --git a/packages/worker/src/api/routes/global/tests/realEmail.spec.ts b/packages/worker/src/api/routes/global/tests/realEmail.spec.ts
index 544c2651dc..ee53f844f9 100644
--- a/packages/worker/src/api/routes/global/tests/realEmail.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/realEmail.spec.ts
@@ -43,7 +43,6 @@ describe("/api/global/email", () => {
       }
       expect(res.body.message).toBeDefined()
       const testUrl = nodemailer.getTestMessageUrl(res.body)
-      console.log(`${purpose} URL: ${testUrl}`)
       expect(testUrl).toBeDefined()
       response = await fetch(testUrl)
       text = await response.text()
diff --git a/packages/worker/src/api/routes/global/tests/scim.spec.ts b/packages/worker/src/api/routes/global/tests/scim.spec.ts
index ad43f089db..258702a3b3 100644
--- a/packages/worker/src/api/routes/global/tests/scim.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/scim.spec.ts
@@ -304,7 +304,7 @@ describe("scim", () => {
 
           await postScimUser({ body })
 
-          expect(events.user.created).toBeCalledTimes(1)
+          expect(events.user.created).toHaveBeenCalledTimes(1)
         })
 
         it("if the username is an email, the user name will be used as email", async () => {
@@ -571,7 +571,7 @@ describe("scim", () => {
 
         await patchScimUser({ id: user.id, body })
 
-        expect(events.user.updated).toBeCalledTimes(1)
+        expect(events.user.updated).toHaveBeenCalledTimes(1)
       })
     })
 
@@ -603,7 +603,7 @@ describe("scim", () => {
       it("an event is dispatched", async () => {
         await deleteScimUser(user.id, { expect: 204 })
 
-        expect(events.user.deleted).toBeCalledTimes(1)
+        expect(events.user.deleted).toHaveBeenCalledTimes(1)
       })
 
       it("an account holder cannot be removed even when synched", async () => {
diff --git a/packages/worker/src/api/routes/global/tests/self.spec.ts b/packages/worker/src/api/routes/global/tests/self.spec.ts
index 274efb0aff..55eed0bca2 100644
--- a/packages/worker/src/api/routes/global/tests/self.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/self.spec.ts
@@ -41,10 +41,10 @@ describe("/api/global/self", () => {
       user._rev = dbUser._rev
       user.dayPassRecordedAt = mocks.date.MOCK_DATE.toISOString()
       expect(res.body._id).toBe(user._id)
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.updated).toBeCalledWith(dbUser)
-      expect(events.user.passwordUpdated).toBeCalledTimes(1)
-      expect(events.user.passwordUpdated).toBeCalledWith(dbUser)
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.updated).toHaveBeenCalledWith(dbUser)
+      expect(events.user.passwordUpdated).toHaveBeenCalledTimes(1)
+      expect(events.user.passwordUpdated).toHaveBeenCalledWith(dbUser)
     })
   })
 
diff --git a/packages/worker/src/api/routes/global/tests/users.spec.ts b/packages/worker/src/api/routes/global/tests/users.spec.ts
index 744b0a5578..37f5721881 100644
--- a/packages/worker/src/api/routes/global/tests/users.spec.ts
+++ b/packages/worker/src/api/routes/global/tests/users.spec.ts
@@ -39,7 +39,7 @@ describe("/api/global/users", () => {
 
       expect(sendMailMock).toHaveBeenCalled()
       expect(code).toBeDefined()
-      expect(events.user.invited).toBeCalledTimes(1)
+      expect(events.user.invited).toHaveBeenCalledTimes(1)
     })
 
     it("should not be able to generate an invitation for existing user", async () => {
@@ -52,7 +52,7 @@ describe("/api/global/users", () => {
       expect(res.body.message).toBe(`Unavailable`)
       expect(sendMailMock).toHaveBeenCalledTimes(0)
       expect(code).toBeUndefined()
-      expect(events.user.invited).toBeCalledTimes(0)
+      expect(events.user.invited).toHaveBeenCalledTimes(0)
     })
 
     it("should not invite the same user twice", async () => {
@@ -70,7 +70,7 @@ describe("/api/global/users", () => {
       expect(res.body.message).toBe(`Unavailable`)
       expect(sendMailMock).toHaveBeenCalledTimes(0)
       expect(code).toBeUndefined()
-      expect(events.user.invited).toBeCalledTimes(0)
+      expect(events.user.invited).toHaveBeenCalledTimes(0)
     })
 
     it("should be able to create new user from invite", async () => {
@@ -86,8 +86,8 @@ describe("/api/global/users", () => {
       const user = await config.getUser(email)
       expect(user).toBeDefined()
       expect(user!._id).toEqual(res.body._id)
-      expect(events.user.inviteAccepted).toBeCalledTimes(1)
-      expect(events.user.inviteAccepted).toBeCalledWith(user)
+      expect(events.user.inviteAccepted).toHaveBeenCalledTimes(1)
+      expect(events.user.inviteAccepted).toHaveBeenCalledWith(user)
     })
   })
 
@@ -105,7 +105,7 @@ describe("/api/global/users", () => {
       expect(body.successful.length).toBe(2)
       expect(body.unsuccessful.length).toBe(0)
       expect(sendMailMock).toHaveBeenCalledTimes(2)
-      expect(events.user.invited).toBeCalledTimes(2)
+      expect(events.user.invited).toHaveBeenCalledTimes(2)
     })
 
     it("should not be able to generate an invitation for existing user", async () => {
@@ -118,7 +118,7 @@ describe("/api/global/users", () => {
       expect(body.unsuccessful.length).toBe(1)
       expect(body.unsuccessful[0].reason).toBe("Unavailable")
       expect(sendMailMock).toHaveBeenCalledTimes(0)
-      expect(events.user.invited).toBeCalledTimes(0)
+      expect(events.user.invited).toHaveBeenCalledTimes(0)
     })
 
     it("should not be able to generate an invitation for user that has already been invited", async () => {
@@ -135,7 +135,7 @@ describe("/api/global/users", () => {
       expect(body.unsuccessful.length).toBe(1)
       expect(body.unsuccessful[0].reason).toBe("Unavailable")
       expect(sendMailMock).toHaveBeenCalledTimes(0)
-      expect(events.user.invited).toBeCalledTimes(0)
+      expect(events.user.invited).toHaveBeenCalledTimes(0)
     })
   })
 
@@ -149,7 +149,7 @@ describe("/api/global/users", () => {
       expect(response.created?.successful.length).toBe(0)
       expect(response.created?.unsuccessful.length).toBe(1)
       expect(response.created?.unsuccessful[0].email).toBe(user.email)
-      expect(events.user.created).toBeCalledTimes(0)
+      expect(events.user.created).toHaveBeenCalledTimes(0)
     })
 
     it("should ignore users existing in other tenants", async () => {
@@ -162,7 +162,7 @@ describe("/api/global/users", () => {
         expect(response.created?.successful.length).toBe(0)
         expect(response.created?.unsuccessful.length).toBe(1)
         expect(response.created?.unsuccessful[0].email).toBe(user.email)
-        expect(events.user.created).toBeCalledTimes(0)
+        expect(events.user.created).toHaveBeenCalledTimes(0)
       })
     })
 
@@ -177,7 +177,7 @@ describe("/api/global/users", () => {
       expect(response.created?.successful.length).toBe(0)
       expect(response.created?.unsuccessful.length).toBe(1)
       expect(response.created?.unsuccessful[0].email).toBe(user.email)
-      expect(events.user.created).toBeCalledTimes(0)
+      expect(events.user.created).toHaveBeenCalledTimes(0)
     })
 
     it("should be able to bulk create users", async () => {
@@ -196,9 +196,9 @@ describe("/api/global/users", () => {
       expect(response.created?.successful[1].email).toBe(admin.email)
       expect(response.created?.successful[2].email).toBe(user.email)
       expect(response.created?.unsuccessful.length).toBe(0)
-      expect(events.user.created).toBeCalledTimes(3)
-      expect(events.user.permissionAdminAssigned).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderAssigned).toBeCalledTimes(2)
+      expect(events.user.created).toHaveBeenCalledTimes(3)
+      expect(events.user.permissionAdminAssigned).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderAssigned).toHaveBeenCalledTimes(2)
     })
   })
 
@@ -208,10 +208,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).toBeCalledTimes(1)
-      expect(events.user.updated).not.toBeCalled()
-      expect(events.user.permissionBuilderAssigned).not.toBeCalled()
-      expect(events.user.permissionAdminAssigned).not.toBeCalled()
+      expect(events.user.created).toHaveBeenCalledTimes(1)
+      expect(events.user.updated).not.toHaveBeenCalled()
+      expect(events.user.permissionBuilderAssigned).not.toHaveBeenCalled()
+      expect(events.user.permissionAdminAssigned).not.toHaveBeenCalled()
     })
 
     it("should be able to create an admin user", async () => {
@@ -219,10 +219,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).toBeCalledTimes(1)
-      expect(events.user.updated).not.toBeCalled()
-      expect(events.user.permissionBuilderAssigned).toBeCalledTimes(1)
-      expect(events.user.permissionAdminAssigned).toBeCalledTimes(1)
+      expect(events.user.created).toHaveBeenCalledTimes(1)
+      expect(events.user.updated).not.toHaveBeenCalled()
+      expect(events.user.permissionBuilderAssigned).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminAssigned).toHaveBeenCalledTimes(1)
     })
 
     it("should be able to create a builder user", async () => {
@@ -230,10 +230,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).toBeCalledTimes(1)
-      expect(events.user.updated).not.toBeCalled()
-      expect(events.user.permissionBuilderAssigned).toBeCalledTimes(1)
-      expect(events.user.permissionAdminAssigned).not.toBeCalled()
+      expect(events.user.created).toHaveBeenCalledTimes(1)
+      expect(events.user.updated).not.toHaveBeenCalled()
+      expect(events.user.permissionBuilderAssigned).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminAssigned).not.toHaveBeenCalled()
     })
 
     it("should be able to assign app roles", async () => {
@@ -246,11 +246,11 @@ describe("/api/global/users", () => {
       await config.api.users.saveUser(user)
 
       const savedUser = await config.getUser(user.email)
-      expect(events.user.created).toBeCalledTimes(1)
-      expect(events.user.updated).not.toBeCalled()
-      expect(events.role.assigned).toBeCalledTimes(2)
-      expect(events.role.assigned).toBeCalledWith(savedUser, "role1")
-      expect(events.role.assigned).toBeCalledWith(savedUser, "role2")
+      expect(events.user.created).toHaveBeenCalledTimes(1)
+      expect(events.user.updated).not.toHaveBeenCalled()
+      expect(events.role.assigned).toHaveBeenCalledTimes(2)
+      expect(events.role.assigned).toHaveBeenCalledWith(savedUser, "role1")
+      expect(events.role.assigned).toHaveBeenCalledWith(savedUser, "role2")
     })
 
     it("should not be able to create user that exists in same tenant", async () => {
@@ -264,7 +264,7 @@ describe("/api/global/users", () => {
       expect(response.body.message).toBe(
         `Email already in use: '${user.email}'`
       )
-      expect(events.user.created).toBeCalledTimes(0)
+      expect(events.user.created).toHaveBeenCalledTimes(0)
     })
 
     it("should not be able to create user that exists in other tenant", async () => {
@@ -278,7 +278,7 @@ describe("/api/global/users", () => {
         expect(response.body.message).toBe(
           `Email already in use: '${user.email}'`
         )
-        expect(events.user.created).toBeCalledTimes(0)
+        expect(events.user.created).toHaveBeenCalledTimes(0)
       })
     })
 
@@ -292,7 +292,7 @@ describe("/api/global/users", () => {
       expect(response.body.message).toBe(
         `Email already in use: '${user.email}'`
       )
-      expect(events.user.created).toBeCalledTimes(0)
+      expect(events.user.created).toHaveBeenCalledTimes(0)
     })
 
     it("should not be able to create a user with the same email and different casing", async () => {
@@ -302,7 +302,7 @@ describe("/api/global/users", () => {
       user.email = user.email.toUpperCase()
       await config.api.users.saveUser(user, 400)
 
-      expect(events.user.created).toBeCalledTimes(1)
+      expect(events.user.created).toHaveBeenCalledTimes(1)
     })
 
     it("should not be able to bulk create a user with the same email and different casing", async () => {
@@ -312,7 +312,7 @@ describe("/api/global/users", () => {
       user.email = user.email.toUpperCase()
       await config.api.users.bulkCreateUsers([user])
 
-      expect(events.user.created).toBeCalledTimes(1)
+      expect(events.user.created).toHaveBeenCalledTimes(1)
     })
 
     it("should not allow a non-admin user to create a new user", async () => {
@@ -335,11 +335,11 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderAssigned).not.toBeCalled()
-      expect(events.user.permissionAdminAssigned).not.toBeCalled()
-      expect(events.user.passwordForceReset).not.toBeCalled()
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderAssigned).not.toHaveBeenCalled()
+      expect(events.user.permissionAdminAssigned).not.toHaveBeenCalled()
+      expect(events.user.passwordForceReset).not.toHaveBeenCalled()
     })
 
     it("should not allow a user to update their own admin/builder status", async () => {
@@ -367,11 +367,11 @@ describe("/api/global/users", () => {
       user.password = "tempPassword"
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderAssigned).not.toBeCalled()
-      expect(events.user.permissionAdminAssigned).not.toBeCalled()
-      expect(events.user.passwordForceReset).toBeCalledTimes(1)
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderAssigned).not.toHaveBeenCalled()
+      expect(events.user.permissionAdminAssigned).not.toHaveBeenCalled()
+      expect(events.user.passwordForceReset).toHaveBeenCalledTimes(1)
     })
 
     it("should be able to update a basic user to an admin user", async () => {
@@ -380,10 +380,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(structures.users.adminUser(user))
 
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderAssigned).toBeCalledTimes(1)
-      expect(events.user.permissionAdminAssigned).toBeCalledTimes(1)
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderAssigned).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminAssigned).toHaveBeenCalledTimes(1)
     })
 
     it("should be able to update a basic user to a builder user", async () => {
@@ -392,10 +392,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(structures.users.builderUser(user))
 
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderAssigned).toBeCalledTimes(1)
-      expect(events.user.permissionAdminAssigned).not.toBeCalled()
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderAssigned).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminAssigned).not.toHaveBeenCalled()
     })
 
     it("should be able to update an admin user to a basic user", async () => {
@@ -406,10 +406,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.permissionAdminRemoved).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderRemoved).toBeCalledTimes(1)
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminRemoved).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderRemoved).toHaveBeenCalledTimes(1)
     })
 
     it("should be able to update an builder user to a basic user", async () => {
@@ -419,10 +419,10 @@ describe("/api/global/users", () => {
 
       await config.api.users.saveUser(user)
 
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderRemoved).toBeCalledTimes(1)
-      expect(events.user.permissionAdminRemoved).not.toBeCalled()
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderRemoved).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminRemoved).not.toHaveBeenCalled()
     })
 
     it("should be able to assign app roles", async () => {
@@ -436,11 +436,11 @@ describe("/api/global/users", () => {
       await config.api.users.saveUser(user)
 
       const savedUser = await config.getUser(user.email)
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.role.assigned).toBeCalledTimes(2)
-      expect(events.role.assigned).toBeCalledWith(savedUser, "role1")
-      expect(events.role.assigned).toBeCalledWith(savedUser, "role2")
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.role.assigned).toHaveBeenCalledTimes(2)
+      expect(events.role.assigned).toHaveBeenCalledWith(savedUser, "role1")
+      expect(events.role.assigned).toHaveBeenCalledWith(savedUser, "role2")
     })
 
     it("should be able to unassign app roles", async () => {
@@ -456,11 +456,11 @@ describe("/api/global/users", () => {
       await config.api.users.saveUser(user)
 
       const savedUser = await config.getUser(user.email)
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.role.unassigned).toBeCalledTimes(2)
-      expect(events.role.unassigned).toBeCalledWith(savedUser, "role1")
-      expect(events.role.unassigned).toBeCalledWith(savedUser, "role2")
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.role.unassigned).toHaveBeenCalledTimes(2)
+      expect(events.role.unassigned).toHaveBeenCalledWith(savedUser, "role1")
+      expect(events.role.unassigned).toHaveBeenCalledWith(savedUser, "role2")
     })
 
     it("should be able to update existing app roles", async () => {
@@ -479,12 +479,12 @@ describe("/api/global/users", () => {
       await config.api.users.saveUser(user)
 
       const savedUser = await config.getUser(user.email)
-      expect(events.user.created).not.toBeCalled()
-      expect(events.user.updated).toBeCalledTimes(1)
-      expect(events.role.unassigned).toBeCalledTimes(1)
-      expect(events.role.unassigned).toBeCalledWith(savedUser, "role2")
-      expect(events.role.assigned).toBeCalledTimes(1)
-      expect(events.role.assigned).toBeCalledWith(savedUser, "role2-edit")
+      expect(events.user.created).not.toHaveBeenCalled()
+      expect(events.user.updated).toHaveBeenCalledTimes(1)
+      expect(events.role.unassigned).toHaveBeenCalledTimes(1)
+      expect(events.role.unassigned).toHaveBeenCalledWith(savedUser, "role2")
+      expect(events.role.assigned).toHaveBeenCalledTimes(1)
+      expect(events.role.assigned).toHaveBeenCalledWith(savedUser, "role2-edit")
     })
 
     it("should not be able to update email address", async () => {
@@ -534,7 +534,7 @@ describe("/api/global/users", () => {
       const response = await config.api.users.bulkDeleteUsers([user._id!], 400)
 
       expect(response.message).toBe("Unable to delete self.")
-      expect(events.user.deleted).not.toBeCalled()
+      expect(events.user.deleted).not.toHaveBeenCalled()
     })
 
     it("should not be able to bulk delete account owner", async () => {
@@ -551,7 +551,7 @@ describe("/api/global/users", () => {
         "Account holder cannot be deleted"
       )
       expect(response.deleted?.unsuccessful[0]._id).toBe(user._id)
-      expect(events.user.deleted).not.toBeCalled()
+      expect(events.user.deleted).not.toHaveBeenCalled()
     })
 
     it("should be able to bulk delete users", async () => {
@@ -574,9 +574,9 @@ describe("/api/global/users", () => {
 
       expect(response.deleted?.successful.length).toBe(3)
       expect(response.deleted?.unsuccessful.length).toBe(0)
-      expect(events.user.deleted).toBeCalledTimes(3)
-      expect(events.user.permissionAdminRemoved).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderRemoved).toBeCalledTimes(2)
+      expect(events.user.deleted).toHaveBeenCalledTimes(3)
+      expect(events.user.permissionAdminRemoved).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderRemoved).toHaveBeenCalledTimes(2)
     })
   })
 
@@ -669,9 +669,9 @@ describe("/api/global/users", () => {
 
       await config.api.users.deleteUser(user._id!)
 
-      expect(events.user.deleted).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderRemoved).not.toBeCalled()
-      expect(events.user.permissionAdminRemoved).not.toBeCalled()
+      expect(events.user.deleted).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderRemoved).not.toHaveBeenCalled()
+      expect(events.user.permissionAdminRemoved).not.toHaveBeenCalled()
     })
 
     it("should be able to destroy an admin user", async () => {
@@ -680,9 +680,9 @@ describe("/api/global/users", () => {
 
       await config.api.users.deleteUser(user._id!)
 
-      expect(events.user.deleted).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderRemoved).toBeCalledTimes(1)
-      expect(events.user.permissionAdminRemoved).toBeCalledTimes(1)
+      expect(events.user.deleted).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderRemoved).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminRemoved).toHaveBeenCalledTimes(1)
     })
 
     it("should be able to destroy a builder user", async () => {
@@ -691,9 +691,9 @@ describe("/api/global/users", () => {
 
       await config.api.users.deleteUser(user._id!)
 
-      expect(events.user.deleted).toBeCalledTimes(1)
-      expect(events.user.permissionBuilderRemoved).toBeCalledTimes(1)
-      expect(events.user.permissionAdminRemoved).not.toBeCalled()
+      expect(events.user.deleted).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionBuilderRemoved).toHaveBeenCalledTimes(1)
+      expect(events.user.permissionAdminRemoved).not.toHaveBeenCalled()
     })
 
     it("should not be able to destroy account owner", async () => {
diff --git a/packages/worker/src/api/routes/global/tests/workspaces.spec.ts b/packages/worker/src/api/routes/global/tests/workspaces.spec.ts
deleted file mode 100644
index 1a30c6525c..0000000000
--- a/packages/worker/src/api/routes/global/tests/workspaces.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { TestConfiguration } from "../../../../tests"
-
-// TODO
-
-describe("/api/global/workspaces", () => {
-  const config = new TestConfiguration()
-
-  beforeAll(async () => {
-    await config.beforeAll()
-  })
-
-  afterAll(async () => {
-    await config.afterAll()
-  })
-
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe("GET /api/global/workspaces", () => {
-    it("retrieves workspaces", () => {})
-  })
-
-  describe("DELETE /api/global/workspaces/:id", () => {})
-
-  describe("GET /api/global/workspaces", () => {})
-
-  describe("GET /api/global/workspaces/:id", () => {})
-})
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/packages/worker/src/api/routes/system/tests/migrations.spec.ts b/packages/worker/src/api/routes/system/tests/migrations.spec.ts
index 950f5c2153..4198d65ee9 100644
--- a/packages/worker/src/api/routes/system/tests/migrations.spec.ts
+++ b/packages/worker/src/api/routes/system/tests/migrations.spec.ts
@@ -31,13 +31,13 @@ describe("/api/system/migrations", () => {
         status: 403,
       })
       expect(res.body).toEqual({ message: "Unauthorized", status: 403 })
-      expect(migrateFn).toBeCalledTimes(0)
+      expect(migrateFn).toHaveBeenCalledTimes(0)
     })
 
     it("runs migrations", async () => {
       const res = await config.api.migrations.runMigrations()
       expect(res.text).toBe("OK")
-      expect(migrateFn).toBeCalledTimes(1)
+      expect(migrateFn).toHaveBeenCalledTimes(1)
     })
   })
 
diff --git a/packages/worker/src/api/routes/system/tests/status.spec.ts b/packages/worker/src/api/routes/system/tests/status.spec.ts
index e2011dc79a..71e01a0e72 100644
--- a/packages/worker/src/api/routes/system/tests/status.spec.ts
+++ b/packages/worker/src/api/routes/system/tests/status.spec.ts
@@ -28,7 +28,7 @@ describe("/api/system/status", () => {
           passing: true,
         },
       })
-      expect(accounts.getStatus).toBeCalledTimes(0)
+      expect(accounts.getStatus).toHaveBeenCalledTimes(0)
       config.cloudHosted()
     })
 
@@ -45,7 +45,7 @@ describe("/api/system/status", () => {
 
       const res = await config.api.status.getStatus()
 
-      expect(accounts.getStatus).toBeCalledTimes(1)
+      expect(accounts.getStatus).toHaveBeenCalledTimes(1)
       expect(res.body).toEqual(value)
     })
   })
diff --git a/packages/worker/src/api/routes/validation/users.ts b/packages/worker/src/api/routes/validation/users.ts
index 7b95de0f59..fbc85af2d3 100644
--- a/packages/worker/src/api/routes/validation/users.ts
+++ b/packages/worker/src/api/routes/validation/users.ts
@@ -26,6 +26,7 @@ export const buildSelfSaveValidation = () => {
     firstName: OPTIONAL_STRING,
     lastName: OPTIONAL_STRING,
     onboardedAt: Joi.string().optional(),
+    appFavourites: Joi.array().optional(),
     tours: Joi.object().optional(),
   }
   return auth.joiValidator.body(Joi.object(schema).required().unknown(false))
diff --git a/packages/worker/src/constants/index.ts b/packages/worker/src/constants/index.ts
index 4301569a3a..17fce666db 100644
--- a/packages/worker/src/constants/index.ts
+++ b/packages/worker/src/constants/index.ts
@@ -52,7 +52,7 @@ export enum InternalTemplateBinding {
   RESET_URL = "resetUrl",
   RESET_CODE = "resetCode",
   INVITE_URL = "inviteUrl",
-  INVITE_CODE = "inviteUrl",
+  INVITE_CODE = "inviteCode",
   CONTENTS = "contents",
 }
 
diff --git a/packages/worker/src/sdk/auth/tests/auth.spec.ts b/packages/worker/src/sdk/auth/tests/auth.spec.ts
index e9f348f7c7..894a3e6eca 100644
--- a/packages/worker/src/sdk/auth/tests/auth.spec.ts
+++ b/packages/worker/src/sdk/auth/tests/auth.spec.ts
@@ -6,6 +6,8 @@ import { TestConfiguration } from "../../../tests"
 describe("auth", () => {
   const config = new TestConfiguration()
 
+  afterAll(config.afterAll)
+
   describe("resetUpdate", () => {
     it("providing a valid code will update the password", async () => {
       await context.doInTenant(structures.tenant.id(), async () => {
diff --git a/packages/worker/tsconfig.build.json b/packages/worker/tsconfig.build.json
index bc477abe4d..f38f31fe67 100644
--- a/packages/worker/tsconfig.build.json
+++ b/packages/worker/tsconfig.build.json
@@ -16,7 +16,8 @@
       "@budibase/backend-core": ["../backend-core/src"],
       "@budibase/backend-core/*": ["../backend-core/*"],
       "@budibase/shared-core": ["../shared-core/src"],
-      "@budibase/pro": ["../pro/src"]
+      "@budibase/pro": ["../pro/src"],
+      "@budibase/string-templates": ["../string-templates/src"]
     }
   },
   "include": ["src/**/*"],
diff --git a/qa-core/src/account-api/tests/licensing/offline.spec.ts b/qa-core/src/account-api/tests/licensing/offline.spec.ts
index 8374677bd6..e524048153 100644
--- a/qa-core/src/account-api/tests/licensing/offline.spec.ts
+++ b/qa-core/src/account-api/tests/licensing/offline.spec.ts
@@ -15,7 +15,7 @@ describe("offline", () => {
 
   // TODO: Currently requires a self host install + account portal
   // Ignored until we set this up
-  xit("creates, activates and deletes offline license", async () => {
+  it.skip("creates, activates and deletes offline license", async () => {
     // installation: Delete any token
     await config.internalApi.license.deleteOfflineLicenseToken()
 
diff --git a/qa-core/src/internal-api/tests/dataSources/mongoDB.integration.spec.ts b/qa-core/src/internal-api/tests/dataSources/mongoDB.integration.spec.ts
index ace9ef32c5..efa9eb2dd2 100644
--- a/qa-core/src/internal-api/tests/dataSources/mongoDB.integration.spec.ts
+++ b/qa-core/src/internal-api/tests/dataSources/mongoDB.integration.spec.ts
@@ -2,7 +2,7 @@ import TestConfiguration from "../../config/TestConfiguration"
 import * as fixtures from "../../fixtures"
 import { Query } from "@budibase/types"
 
-xdescribe("Internal API - Data Sources: MongoDB", () => {
+describe.skip("Internal API - Data Sources: MongoDB", () => {
   const config = new TestConfiguration()
 
   beforeAll(async () => {
diff --git a/qa-core/yarn.lock b/qa-core/yarn.lock
index 9b7a9c6c05..0eba6dd4d7 100644
--- a/qa-core/yarn.lock
+++ b/qa-core/yarn.lock
@@ -2062,9 +2062,9 @@ find-up@^4.0.0, find-up@^4.1.0:
     path-exists "^4.0.0"
 
 follow-redirects@^1.14.0, follow-redirects@^1.14.4, follow-redirects@^1.15.0:
-  version "1.15.2"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
 forever-agent@~0.6.1:
   version "0.6.1"
diff --git a/yarn.lock b/yarn.lock
index 235e28e85e..22c11453ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1988,7 +1988,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.10.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.21.0":
+"@babel/runtime@^7.10.5", "@babel/runtime@^7.13.10":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -3922,7 +3922,7 @@
     "@rollup/pluginutils" "^5.0.1"
     mini-svg-data-uri "^1.4.4"
 
-"@rollup/plugin-inject@^5.0.4":
+"@rollup/plugin-inject@^5.0.4", "@rollup/plugin-inject@^5.0.5":
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz#616f3a73fe075765f91c5bec90176608bed277a3"
   integrity sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==
@@ -5447,6 +5447,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/json-schema@^7.0.9":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -5961,6 +5966,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.7.tgz#b9eb89d7dfa70d5d1ce525bc1411a35347f533a3"
   integrity sha512-4g1jrL98mdOIwSOUh6LTlB0Cs9I0dQPwINUhBg7C6pN4HLr8GS8xsksJxilW6S6dQHVi2K/o+lQuQcg7LroCnw==
 
+"@types/semver@^7.3.12":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
 "@types/serve-static@*":
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.1.tgz#86b1753f0be4f9a1bee68d459fcda5be4ea52b5d"
@@ -6133,6 +6143,14 @@
     "@typescript-eslint/visitor-keys" "6.9.0"
     debug "^4.3.4"
 
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
 "@typescript-eslint/scope-manager@6.9.0":
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.9.0.tgz#2626e9a7fe0e004c3e25f3b986c75f584431134e"
@@ -6151,11 +6169,29 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.53.0.tgz#f79eca62b97e518ee124086a21a24f3be267026f"
   integrity sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A==
 
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
 "@typescript-eslint/types@6.9.0":
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.9.0.tgz#86a0cbe7ac46c0761429f928467ff3d92f841098"
   integrity sha512-+KB0lbkpxBkBSiVCuQvduqMJy+I1FyDbdwSpM3IoBS7APl4Bu15lStPjgBIdykdRqQNYqYNMa8Kuidax6phaEw==
 
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/typescript-estree@6.9.0":
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.0.tgz#d0601b245be873d8fe49f3737f93f8662c8693d4"
@@ -6195,6 +6231,20 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/utils@^5.10.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
 "@typescript-eslint/visitor-keys@4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
@@ -6211,6 +6261,14 @@
     "@typescript-eslint/types" "5.53.0"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
 "@typescript-eslint/visitor-keys@6.9.0":
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.0.tgz#cc69421c10c4ac997ed34f453027245988164e80"
@@ -8242,11 +8300,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"
@@ -8462,21 +8525,6 @@ concat-with-sourcemaps@^1.1.0:
   dependencies:
     source-map "^0.6.1"
 
-concurrently@^8.2.2:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-8.2.2.tgz#353141985c198cfa5e4a3ef90082c336b5851784"
-  integrity sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==
-  dependencies:
-    chalk "^4.1.2"
-    date-fns "^2.30.0"
-    lodash "^4.17.21"
-    rxjs "^7.8.1"
-    shell-quote "^1.8.1"
-    spawn-command "0.0.2"
-    supports-color "^8.1.1"
-    tree-kill "^1.2.2"
-    yargs "^17.7.2"
-
 condense-newlines@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
@@ -9044,13 +9092,6 @@ data-urls@^4.0.0:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^12.0.0"
 
-date-fns@^2.30.0:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
-
 dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -10414,6 +10455,13 @@ eslint-plugin-import@^2.29.0:
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
+eslint-plugin-jest@^27.9.0:
+  version "27.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.9.0.tgz#7c98a33605e1d8b8442ace092b60e9919730000b"
+  integrity sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==
+  dependencies:
+    "@typescript-eslint/utils" "^5.10.0"
+
 eslint-plugin-local-rules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-local-rules/-/eslint-plugin-local-rules-2.0.0.tgz#cda95d7616cc0e2609d76c347c187ca2be1e252e"
@@ -10437,7 +10485,7 @@ eslint-plugin-svelte@^2.34.0:
     semver "^7.5.3"
     svelte-eslint-parser ">=0.33.0 <1.0.0"
 
-eslint-scope@5.1.1:
+eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -11998,7 +12046,7 @@ handlebars-utils@^1.0.6:
     kind-of "^6.0.0"
     typeof-article "^0.1.1"
 
-handlebars@^4.7.6, handlebars@^4.7.7:
+handlebars@^4.7.7:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
   integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
@@ -12010,6 +12058,18 @@ handlebars@^4.7.6, handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+handlebars@^4.7.8:
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.8.tgz#41c42c18b1be2365439188c77c6afae71c0cd9e9"
+  integrity sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.2"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -13944,6 +14004,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"
@@ -19390,13 +19455,6 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
-rxjs@^7.8.1:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
-  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
-  dependencies:
-    tslib "^2.1.0"
-
 safe-array-concat@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
@@ -19672,11 +19730,6 @@ shell-exec@1.0.2:
   resolved "https://registry.yarnpkg.com/shell-exec/-/shell-exec-1.0.2.tgz#2e9361b0fde1d73f476c4b6671fa17785f696756"
   integrity sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==
 
-shell-quote@^1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
-  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
-
 shortid@2.2.15:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
@@ -19995,11 +20048,6 @@ sparse-bitfield@^3.0.3:
   dependencies:
     memory-pager "^1.0.2"
 
-spawn-command@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
-  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
-
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -20572,7 +20620,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0, supports-color@^8.1.1:
+supports-color@^8.0.0:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -21199,11 +21247,6 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
-tree-kill@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
-  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
-
 trim-newlines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"