diff --git a/.eslintignore b/.eslintignore
index 8d4c64d960..f2c53c2fdc 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,6 +6,7 @@ packages/server/coverage
 packages/worker/coverage
 packages/backend-core/coverage
 packages/server/client
+packages/server/coverage
 packages/builder/.routify
 packages/sdk/sdk
 packages/account-portal/packages/server/build
diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index ae86695168..6cea7efeba 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -10,7 +10,7 @@ import {
   StaticDatabases,
   DEFAULT_TENANT_ID,
 } from "../constants"
-import { Database, IdentityContext } from "@budibase/types"
+import { Database, IdentityContext, Snippet, App } from "@budibase/types"
 import { ContextMap } from "./types"
 
 let TEST_APP_ID: string | null = null
@@ -122,10 +122,10 @@ export async function doInAutomationContext<T>(params: {
   automationId: string
   task: () => T
 }): Promise<T> {
-  const tenantId = getTenantIDFromAppID(params.appId)
+  await ensureSnippetContext()
   return newContext(
     {
-      tenantId,
+      tenantId: getTenantIDFromAppID(params.appId),
       appId: params.appId,
       automationId: params.automationId,
     },
@@ -281,6 +281,27 @@ export function doInScimContext(task: any) {
   return newContext(updates, task)
 }
 
+export async function ensureSnippetContext() {
+  const ctx = getCurrentContext()
+
+  // If we've already added snippets to context, continue
+  if (!ctx || ctx.snippets) {
+    return
+  }
+
+  // Otherwise get snippets for this app and update context
+  let snippets: Snippet[] | undefined
+  const db = getAppDB()
+  if (db && !env.isTest()) {
+    const app = await db.get<App>(DocumentType.APP_METADATA)
+    snippets = app.snippets
+  }
+
+  // Always set snippets to a non-null value so that we can tell we've attempted
+  // to load snippets
+  ctx.snippets = snippets || []
+}
+
 export function getEnvironmentVariables() {
   const context = Context.get()
   if (!context.environmentVariables) {
diff --git a/packages/backend-core/src/context/types.ts b/packages/backend-core/src/context/types.ts
index 8ea544a53c..f297d3089f 100644
--- a/packages/backend-core/src/context/types.ts
+++ b/packages/backend-core/src/context/types.ts
@@ -1,4 +1,4 @@
-import { IdentityContext, VM } from "@budibase/types"
+import { IdentityContext, Snippet, VM } from "@budibase/types"
 
 // keep this out of Budibase types, don't want to expose context info
 export type ContextMap = {
@@ -11,4 +11,5 @@ export type ContextMap = {
   isMigrating?: boolean
   vm?: VM
   cleanup?: (() => void | Promise<void>)[]
+  snippets?: Snippet[]
 }
diff --git a/packages/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/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/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 62416ae88d..12c4c4d002 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -33,8 +33,8 @@ const handleClick = event => {
     }
 
     // Ignore clicks for drawers, unless the handler is registered from a drawer
-    const sourceInDrawer = handler.anchor.closest(".drawer-container") != null
-    const clickInDrawer = event.target.closest(".drawer-container") != null
+    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
+    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
     if (clickInDrawer && !sourceInDrawer) {
       return
     }
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 757f86b471..89ee92726d 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -57,8 +57,10 @@
 </script>
 
 <script>
-  import Portal from "svelte-portal"
   import Button from "../Button/Button.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"
 
@@ -170,7 +172,8 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div class="drawer-container">
+    <!-- This class is unstyled, but needed by click_outside -->
+    <div class="drawer-wrapper">
       <div
         class="underlay"
         class:hidden={!$modal}
@@ -184,10 +187,24 @@
         {style}
       >
         <header>
-          <div class="text">{title || "Bindings"}</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>
         <slot name="body" />
@@ -206,7 +223,7 @@
     height: 420px;
     background: var(--background);
     border: var(--border-light);
-    z-index: 999;
+    z-index: 100;
     border-radius: 8px;
     overflow: hidden;
     box-sizing: border-box;
@@ -233,7 +250,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 999;
+    z-index: 100;
     display: block;
     transition: opacity 260ms ease-out;
   }
@@ -274,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 7974e1e1bf..490dfecc31 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -19,7 +19,6 @@
   .drawer-contents {
     overflow-y: auto;
     flex: 1 1 auto;
-    height: 0;
   }
   .container {
     height: 100%;
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 275c339bf4..13452cf981 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -14,6 +14,7 @@
   export let disabled = false
   export let color
   export let tooltip
+  export let newStyles = false
 
   $: rotation = getRotation(direction)
 
@@ -28,6 +29,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon"
+  class:newStyles
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
@@ -60,6 +62,9 @@
     display: grid;
     place-items: center;
   }
+  .newStyles {
+    color: var(--spectrum-global-color-gray-700);
+  }
 
   svg.hoverable {
     pointer-events: all;
@@ -72,7 +77,10 @@
   svg.hoverable:active {
     color: var(--spectrum-global-color-blue-400) !important;
   }
-
+  .newStyles svg.hoverable:hover,
+  .newStyles svg.hoverable:active {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
   svg.disabled {
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
diff --git a/packages/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/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index 5d9b84fde5..ba5f75083a 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -40,7 +40,7 @@
     indentMore,
     indentLess,
   } from "@codemirror/commands"
-  import { Compartment } from "@codemirror/state"
+  import { Compartment, EditorState } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes } from "./"
   import { themeStore } from "stores/portal"
@@ -53,6 +53,7 @@
   export let autocompleteEnabled = true
   export let autofocus = false
   export let jsBindingWrapping = true
+  export let readonly = false
 
   const dispatch = createEventDispatcher()
 
@@ -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,35 @@
       })
     },
   })
-
-  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)
+      },
+    }),
+    {
+      decorations: v => v.decorations,
+    }
+  )
+
+  // 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)
       },
     }),
     {
@@ -141,33 +165,21 @@
 
   const buildBaseExtensions = () => {
     return [
-      ...(mode.name === "handlebars" ? [plugin] : []),
-      history(),
       drawSelection(),
       dropCursor(),
       bracketMatching(),
       closeBrackets(),
-      highlightActiveLine(),
       syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }),
-      highlightActiveLineGutter(),
       highlightSpecialChars(),
-      lineNumbers(),
-      foldGutter(),
       EditorView.lineWrapping,
-      EditorView.updateListener.of(v => {
-        const docStr = v.state.doc?.toString()
-        if (docStr === value) {
-          return
-        }
-        dispatch("change", docStr)
-      }),
-      keymap.of(buildKeymap()),
       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(
@@ -175,7 +187,10 @@
           override: [...completions],
           closeOnBlur: true,
           icons: false,
-          optionClass: () => "autocomplete-option",
+          optionClass: completion =>
+            completion.simple
+              ? "autocomplete-option-simple"
+              : "autocomplete-option",
         })
       )
       complete.push(
@@ -201,20 +216,49 @@
             view.dispatch(tr)
             return true
           }
-
           return false
         })
       )
     }
 
+    // JS only plugins
     if (mode.name === "javascript") {
+      complete.push(snippetMatchDecoPlugin)
       complete.push(javascript())
-      complete.push(highlightWhitespace())
+      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
   }
 
@@ -300,7 +344,6 @@
 
   /* Active line */
   .code-editor :global(.cm-line) {
-    height: 16px;
     padding: 0 var(--spacing-s);
     color: var(--spectrum-alias-text-color);
   }
@@ -318,6 +361,9 @@
     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) {
@@ -360,9 +406,12 @@
     font-style: italic;
   }
 
-  /* Highlight bindings */
+  /* Highlight bindings and snippets */
   .code-editor :global(.binding-wrap) {
-    color: var(--spectrum-global-color-blue-700);
+    color: var(--spectrum-global-color-blue-700) !important;
+  }
+  .code-editor :global(.snippet-wrap *) {
+    color: #61afef !important;
   }
 
   /* Completion popover */
@@ -391,7 +440,8 @@
   }
 
   /* Completion item container */
-  .code-editor :global(.autocomplete-option) {
+  .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;
@@ -399,9 +449,13 @@
     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[aria-selected]),
+  .code-editor :global(.autocomplete-option-simple[aria-selected]) {
     background: var(--spectrum-global-color-blue-400);
     color: white;
   }
@@ -417,6 +471,9 @@
     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) {
@@ -454,14 +511,14 @@
   .code-editor :global(.binding__example) {
     padding: 0;
     margin: 0;
-    font-size: var(--font-size-s);
+    font-size: 12px;
     font-family: var(--font-mono);
     white-space: pre;
     text-overflow: ellipsis;
     overflow: hidden;
     max-height: 480px;
   }
-  .code-editor :global(.binding__example) {
+  .code-editor :global(.binding__example.helper) {
     color: var(--spectrum-global-color-blue-700);
   }
   .code-editor :global(.binding__example span) {
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index c104267aa4..f66c84adce 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -102,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()
@@ -247,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/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 0819bcb86b..7180b149de 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -71,6 +71,7 @@
   class:scrollable
   class:highlighted
   class:selectedBy
+  class:actionsOpen={highlighted && withActions}
   on:dragend
   on:dragstart
   on:dragover
@@ -168,8 +169,9 @@
     --avatars-background: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions,
-  .hovering .actions {
-    visibility: visible;
+  .hovering .actions,
+  .nav-item.withActions.actionsOpen .actions {
+    opacity: 1;
   }
   .nav-item-content {
     flex: 1 1 auto;
@@ -272,7 +274,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 aa765c03f6..21d389357f 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -7,7 +7,7 @@
     Body,
     Button,
   } from "@budibase/bbui"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
   import {
     decodeJSBinding,
     encodeJSBinding,
@@ -19,27 +19,33 @@
     getHelperCompletions,
     jsAutocomplete,
     hbAutocomplete,
+    snippetAutoComplete,
     EditorModes,
     bindingsToCompletions,
   } from "../CodeEditor"
   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 { get } from "svelte/store"
+  import { licensing } from "stores/portal"
 
   const dispatch = createEventDispatcher()
 
-  export let bindings
+  export let bindings = []
   export let value = ""
+  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 drawerContext = getContext("drawer")
   const Modes = {
     Text: "Text",
     JavaScript: "JavaScript",
@@ -47,61 +53,110 @@
   const SidePanels = {
     Bindings: "FlashOn",
     Evaluation: "Play",
+    Snippets: "Code",
   }
 
+  let mode
+  let sidePanel
   let initialValueJS = value?.startsWith?.("{{ js ")
-  let mode = initialValueJS ? Modes.JavaScript : Modes.Text
-  let sidePanel = SidePanels.Bindings
-  let getCaretPosition
-  let insertAtPos
   let jsValue = initialValueJS ? value : null
   let hbsValue = initialValueJS ? null : value
+  let getCaretPosition
+  let insertAtPos
   let targetMode = null
   let expressionResult
-  let drawerIsModal
   let evaluating = false
 
-  $: drawerContext?.modal.subscribe(val => (drawerIsModal = val))
-  $: editorTabs = allowJS ? [Modes.Text, Modes.JavaScript] : [Modes.Text]
-  $: sideTabs = context
-    ? [SidePanels.Evaluation, SidePanels.Bindings]
-    : [SidePanels.Bindings]
-  $: enrichedBindings = enrichBindings(bindings, context)
+  $: 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 === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
   $: editorValue = editorMode === EditorModes.JS ? jsValue : hbsValue
-  $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
-  $: requestUpdateEvaluation(runtimeExpression, context)
+  $: requestEval(runtimeExpression, context, snippets)
+  $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
-  $: hbsCompletions = [
-    hbAutocomplete([
-      ...bindingCompletions,
-      ...getHelperCompletions(EditorModes.Handlebars),
-    ]),
-  ]
-  $: jsCompletions = [
-    jsAutocomplete([
-      ...bindingCompletions,
-      ...getHelperCompletions(EditorModes.JS),
-    ]),
-  ]
+  $: 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 debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
-    expressionResult = processStringSync(expression || "", context)
+  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 requestUpdateEvaluation = (expression, context) => {
+  const requestEval = (expression, context, snippets) => {
     evaluating = true
-    debouncedUpdateEvaluation(expression, context)
+    debouncedEval(expression, context, snippets)
   }
 
-  const getBindingValue = (binding, context) => {
+  const getBindingValue = (binding, context, snippets) => {
     const js = `return $("${binding.runtimeBinding}")`
     const hbs = encodeJSBinding(js)
-    const res = processStringSync(hbs, context)
+    const res = processStringSync(hbs, { ...context, snippets })
     return JSON.stringify(res, null, 2)
   }
 
@@ -116,12 +171,12 @@
     })
   }
 
-  const enrichBindings = (bindings, context) => {
+  const enrichBindings = (bindings, context, snippets) => {
     return bindings.map(binding => {
       if (!context) {
         return binding
       }
-      const value = getBindingValue(binding, context)
+      const value = getBindingValue(binding, context, snippets)
       return {
         ...binding,
         value,
@@ -133,7 +188,7 @@
   const updateValue = val => {
     const runtimeExpression = readableToRuntimeBinding(enrichedBindings, val)
     dispatch("change", val)
-    requestUpdateEvaluation(runtimeExpression, context)
+    requestEval(runtimeExpression, context, snippets)
   }
 
   const onSelectHelper = (helper, js) => {
@@ -149,7 +204,14 @@
     if (targetMode || newMode === mode) {
       return
     }
-    if (editorValue) {
+
+    // 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
@@ -177,47 +239,52 @@
     jsValue = encodeJSBinding(e.detail)
     updateValue(jsValue)
   }
+
+  onMount(() => {
+    // 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>
 
 <DrawerContent padding={false}>
   <div class="binding-panel">
     <div class="main">
-      <div class="tabs">
-        <div class="editor-tabs">
-          {#each editorTabs as tab}
-            <ActionButton
-              size="M"
-              quiet
-              selected={mode === tab}
-              on:click={() => changeMode(tab)}
-            >
-              {capitalise(tab)}
-            </ActionButton>
-          {/each}
+      {#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>
         </div>
-        <div class="side-tabs">
-          {#each sideTabs as tab}
-            <ActionButton
-              size="M"
-              quiet
-              selected={sidePanel === tab}
-              on:click={() => changeSidePanel(tab)}
-            >
-              <Icon name={tab} size="S" />
-            </ActionButton>
-          {/each}
-          {#if drawerContext && get(drawerContext.resizable)}
-            <ActionButton
-              size="M"
-              quiet
-              selected={drawerIsModal}
-              on:click={() => drawerContext.modal.set(!drawerIsModal)}
-            >
-              <Icon name={drawerIsModal ? "Minimize" : "Maximize"} size="S" />
-            </ActionButton>
-          {/if}
-        </div>
-      </div>
+      {/if}
       <div class="editor">
         {#if mode === Modes.Text}
           {#key hbsCompletions}
@@ -228,7 +295,8 @@
               bind:insertAtPos
               completions={hbsCompletions}
               autofocus={autofocusEditor}
-              placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
+              placeholder={placeholder ||
+                "Add bindings by typing {{ or use the menu on the right"}
               jsBindingWrapping={false}
             />
           {/key}
@@ -242,7 +310,8 @@
               bind:getCaretPosition
               bind:insertAtPos
               autofocus={autofocusEditor}
-              placeholder="Add bindings by typing $ or use the menu on the right"
+              placeholder={placeholder ||
+                "Add bindings by typing $ or use the menu on the right"}
               jsBindingWrapping
             />
           {/key}
@@ -289,6 +358,11 @@
           {evaluating}
           expression={editorValue}
         />
+      {:else if sidePanel === SidePanels.Snippets}
+        <SnippetSidePanel
+          addSnippet={snippet => bindingHelpers.onSelectSnippet(snippet)}
+          {snippets}
+        />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index d990451005..6ef2d35a6c 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -12,6 +12,7 @@
   export let context = null
 
   let search = ""
+  let searching = false
   let popover
   let popoverAnchor
   let hoverTarget
@@ -74,6 +75,13 @@
     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 = {
@@ -112,6 +120,17 @@
       hideTimeout = null
     }
   }
+
+  const startSearching = async () => {
+    searching = true
+    search = ""
+  }
+
+  const stopSearching = e => {
+    e.stopPropagation()
+    searching = false
+    search = ""
+  }
 </script>
 
 <Popover
@@ -141,7 +160,6 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="binding-side-panel">
   <Layout noPadding gap="S">
     {#if selectedCategory}
@@ -158,25 +176,34 @@
 
     {#if !selectedCategory}
       <div class="header">
-        <span class="search-input">
-          <Input
-            placeholder={"Search for bindings"}
-            autocomplete="off"
-            bind:value={search}
+        {#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}
           />
-        </span>
-        <span
-          class="search-input-icon"
-          on:click={() => {
-            search = null
-          }}
-          class:searching={search}
-        >
-          <Icon size="S" name={search ? "Close" : "Search"} />
-        </span>
+        {: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}
@@ -281,18 +308,15 @@
     background: var(--background);
     z-index: 1;
   }
-
   .header :global(input) {
     border: none;
     border-radius: 0;
     background: none;
     padding: 0;
   }
-  .search-input {
-    flex: 1;
-  }
-  .search-input-icon.searching {
-    cursor: pointer;
+  .search-input,
+  .title {
+    flex: 1 1 auto;
   }
 
   ul.category-list {
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 843dec8c89..cb65d2bbe4 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
-  import { previewStore } from "stores/builder"
+  import { previewStore, snippets } from "stores/builder"
   import { onMount } from "svelte"
 
   export let bindings = []
@@ -28,6 +28,7 @@
 <BindingPanel
   bindings={enrichedBindings}
   context={$previewStore.selectedComponentContext}
+  snippets={$snippets}
   {value}
   {allowJS}
   {allowHelpers}
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 82c3f80a6f..2c4e6a0991 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -55,7 +55,7 @@
           </div>
         {/if}
         <span />
-        <Icon name="Copy" hoverable on:click={copy} />
+        <Icon name="Copy" size="S" hoverable on:click={copy} />
       {:else}
         <div>Preview</div>
         {#if evaluating}
@@ -65,7 +65,7 @@
         {/if}
         <span />
         {#if !empty}
-          <Icon name="Copy" hoverable on:click={copy} />
+          <Icon name="Copy" newStyles size="S" hoverable on:click={copy} />
         {/if}
       {/if}
     </div>
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 5718d080f2..df0da768e0 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -1,5 +1,6 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
+  import { snippets } from "stores/builder"
 
   export let bindings = []
   export let value = ""
@@ -20,6 +21,7 @@
 
 <BindingPanel
   bindings={enrichedBindings}
+  snippets={$snippets}
   {value}
   {allowJS}
   {context}
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/DeleteModal.svelte b/packages/builder/src/components/deploy/DeleteModal.svelte
index 855f6a0757..676fed60f8 100644
--- a/packages/builder/src/components/deploy/DeleteModal.svelte
+++ b/packages/builder/src/components/deploy/DeleteModal.svelte
@@ -3,9 +3,16 @@
   import { goto } from "@roxi/routify"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { apps } from "stores/portal"
-  import { appStore } from "stores/builder"
   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)
+      await API.deleteApp(appId)
       apps.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/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..60e073ca21 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -5,6 +5,7 @@
   import { goto } from "@roxi/routify"
   import { UserAvatars } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
+  import AppRowContext from "./AppRowContext.svelte"
 
   export let app
   export let lockedAction
@@ -76,12 +77,10 @@
 
   {#if isBuilder}
     <div class="app-row-actions">
-      <Button size="S" secondary on:click={lockedAction || goToOverview}>
-        Manage
-      </Button>
-      <Button size="S" primary on:click={lockedAction || goToBuilder}>
+      <Button size="S" secondary on:click={lockedAction || goToBuilder}>
         Edit
       </Button>
+      <AppRowContext {app} />
     </div>
   {:else if app.deployed}
     <!-- this can happen if an app builder has app user access to an app -->
diff --git a/packages/builder/src/components/start/AppRowContext.svelte b/packages/builder/src/components/start/AppRowContext.svelte
new file mode 100644
index 0000000000..2533294274
--- /dev/null
+++ b/packages/builder/src/components/start/AppRowContext.svelte
@@ -0,0 +1,88 @@
+<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 { licensing } from "stores/portal"
+
+  export let app
+  export let align = "right"
+
+  let deleteModal
+  let exportModal
+  let duplicateModal
+  let exportPublishedVersion = false
+  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>
+  <MenuItem
+    icon="Copy"
+    on:click={() => {
+      if ($licensing?.usageMetrics?.apps < 100) {
+        duplicateModal.show()
+      } else {
+        appLimitModal.show()
+      }
+    }}
+  >
+    Duplicate
+  </MenuItem>
+  <MenuItem
+    icon="Export"
+    on:click={() => {
+      exportPublishedVersion = false
+      exportModal.show()
+    }}
+  >
+    Export latest edited app
+  </MenuItem>
+  {#if app.deployed}
+    <MenuItem
+      icon="Export"
+      on:click={() => {
+        exportPublishedVersion = true
+        exportModal.show()
+      }}
+    >
+      Export latest published app
+    </MenuItem>
+  {/if}
+  <MenuItem
+    icon="Delete"
+    on:click={() => {
+      deleteModal.show()
+    }}
+  >
+    Delete
+  </MenuItem>
+</ActionMenu>
diff --git a/packages/builder/src/components/start/DuplicateAppModal.svelte b/packages/builder/src/components/start/DuplicateAppModal.svelte
new file mode 100644
index 0000000000..d7b600cfeb
--- /dev/null
+++ b/packages/builder/src/components/start/DuplicateAppModal.svelte
@@ -0,0 +1,158 @@
+<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 { apps } from "stores/portal"
+  import { onMount } from "svelte"
+  import { API } from "api"
+
+  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 {
+      await API.duplicateApp(data, appId)
+      apps.load()
+      onDuplicateSuccess()
+      notifications.success("App duplicated successfully")
+    } catch (err) {
+      notifications.error("Error duplicating app")
+      duplicating = false
+    }
+  }
+
+  const setupValidation = async () => {
+    const applications = get(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/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/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index c4ee060149..57180625b1 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -40,7 +40,7 @@
 <!-- routify:options index=3 -->
 <div class="root">
   <AutomationPanel {modal} {webhookModal} />
-  <div class="content">
+  <div class="content drawer-container">
     {#if $automationStore.automations?.length}
       <slot />
     {:else}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index a910036a4a..95e7a66be9 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,7 @@
     navigationStore,
     selectedScreen,
     hoverStore,
+    snippets,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
@@ -68,6 +69,7 @@
       hostname: window.location.hostname,
       port: window.location.port,
     },
+    snippets: $snippets,
   }
 
   // Refresh the preview when required
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/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
index 3ece483425..e487713257 100644
--- a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { apps, sideBarCollapsed } from "stores/portal"
+  import { apps, sideBarCollapsed, 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 { AppStatus } from "constants"
+  import { sdk } from "@budibase/shared-core"
 
   let searchString
+  let opened
 
   $: filteredApps = $apps
     .filter(app => {
@@ -13,6 +17,12 @@
         app.name.toLowerCase().includes(searchString.toLowerCase())
       )
     })
+    .map(app => {
+      return {
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+      }
+    })
     .sort((a, b) => {
       const lowerA = a.name.toLowerCase()
       const lowerB = b.name.toLowerCase()
@@ -42,8 +52,22 @@
         icon={app.icon?.name || "Apps"}
         iconColor={app.icon?.color}
         selected={$params.appId === app.appId}
+        highlighted={opened == app.appId}
         on:click={() => $goto(`./${app.appId}`)}
-      />
+      >
+        {#if sdk.users.isBuilder($auth.user, app?.devId)}
+          <AppRowContext
+            {app}
+            align="left"
+            on:open={() => {
+              opened = app.appId
+            }}
+            on:close={() => {
+              opened = null
+            }}
+          />
+        {/if}
+      </NavItem>
     {/each}
   </div>
 </div>
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index bac9fb8826..4df4bc3c41 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -18,6 +18,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"
@@ -62,6 +63,7 @@ export {
   queries,
   flags,
   hoverStore,
+  snippets,
 }
 
 export const reset = () => {
@@ -101,6 +103,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/snippets.js b/packages/builder/src/stores/builder/snippets.js
new file mode 100644
index 0000000000..72ab274730
--- /dev/null
+++ b/packages/builder/src/stores/builder/snippets.js
@@ -0,0 +1,41 @@
+import { writable, get } from "svelte/store"
+import { API } from "api"
+import { appStore } from "./app"
+
+const createsnippets = () => {
+  const store = writable([])
+
+  const syncMetadata = metadata => {
+    store.set(metadata?.snippets || [])
+  }
+
+  const saveSnippet = async updatedSnippet => {
+    const snippets = [
+      ...get(store).filter(snippet => snippet.name !== updatedSnippet.name),
+      updatedSnippet,
+    ]
+    const app = await API.saveAppMetadata({
+      appId: get(appStore).appId,
+      metadata: { snippets },
+    })
+    syncMetadata(app)
+  }
+
+  const deleteSnippet = async snippetName => {
+    const snippets = get(store).filter(snippet => snippet.name !== snippetName)
+    const app = await API.saveAppMetadata({
+      appId: get(appStore).appId,
+      metadata: { snippets },
+    })
+    syncMetadata(app)
+  }
+
+  return {
+    ...store,
+    syncMetadata,
+    saveSnippet,
+    deleteSnippet,
+  }
+}
+
+export const snippets = createsnippets()
diff --git a/packages/builder/src/stores/builder/websocket.js b/packages/builder/src/stores/builder/websocket.js
index bbdf7b6d63..0704f26439 100644
--- a/packages/builder/src/stores/builder/websocket.js
+++ b/packages/builder/src/stores/builder/websocket.js
@@ -6,6 +6,7 @@ import {
   themeStore,
   navigationStore,
   deploymentStore,
+  snippets,
   datasources,
   tables,
 } from "stores/builder"
@@ -64,6 +65,7 @@ export const createBuilderWebsocket = appId => {
     appStore.syncMetadata(metadata)
     themeStore.syncMetadata(metadata)
     navigationStore.syncMetadata(metadata)
+    snippets.syncMetadata(metadata)
   })
   socket.onOther(
     BuilderSocketEvent.AppPublishChange,
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 7e30e21ae8..e6cda03270 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -39,6 +39,7 @@
   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)
@@ -121,114 +122,116 @@
           <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}
-
-                <!-- 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 />
+                <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}
 
-                    <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}
+                  <!-- 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}
+
+                            <!--
                           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>
-                      {/if}
+                            <!-- Layers on top of app -->
+                            <NotificationDisplay />
+                            <ConfirmationDisplay />
+                            <PeekScreenDisplay />
+                          </CustomThemeWrapper>
+                        {/if}
 
-                      {#if showDevTools}
-                        <DevTools />
+                        {#if showDevTools}
+                          <DevTools />
+                        {/if}
+                      </div>
+
+                      {#if !$builderStore.inBuilder && licensing.logoEnabled()}
+                        <FreeFooter />
                       {/if}
                     </div>
 
-                    {#if !$builderStore.inBuilder && licensing.logoEnabled()}
-                      <FreeFooter />
+                    <!-- Preview and dev tools utilities  -->
+                    {#if $appStore.isDevApp}
+                      <SelectionIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
+                      <HoverIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder}
+                      <DNDHandler />
+                      <GridDNDHandler />
                     {/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>
+                </SnippetsProvider>
               </QueryParamsProvider>
             </RowSelectionProvider>
           </StateBindingsProvider>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3d267ec623..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
     }
 
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 1ce7101466..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
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/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/server/package.json b/packages/server/package.json
index 97de17eb58..bac65c768e 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -13,9 +13,10 @@
     "build": "node ./scripts/build.js",
     "postbuild": "copyfiles -f ../client/dist/budibase-client.js ../client/manifest.json client && copyfiles -f ../../yarn.lock ./dist/",
     "check:types": "tsc -p tsconfig.json --noEmit --paths null",
+    "build:isolated-vm-lib:snippets": "esbuild --minify --bundle src/jsRunner/bundles/snippets.ts --outfile=src/jsRunner/bundles/snippets.ivm.bundle.js --platform=node --format=iife --global-name=snippets",
     "build:isolated-vm-lib:string-templates": "esbuild --minify --bundle src/jsRunner/bundles/index-helpers.ts --outfile=src/jsRunner/bundles/index-helpers.ivm.bundle.js --platform=node --format=iife --external:handlebars --global-name=helpers",
     "build:isolated-vm-lib:bson": "esbuild --minify --bundle src/jsRunner/bundles/bsonPackage.ts --outfile=src/jsRunner/bundles/bson.ivm.bundle.js --platform=node --format=iife --global-name=bson",
-    "build:isolated-vm-libs": "yarn build:isolated-vm-lib:string-templates && yarn build:isolated-vm-lib:bson",
+    "build:isolated-vm-libs": "yarn build:isolated-vm-lib:string-templates && yarn build:isolated-vm-lib:bson && yarn build:isolated-vm-lib:snippets",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "debug": "yarn build && node --expose-gc --inspect=9222 dist/index.js",
     "jest": "NODE_OPTIONS=\"--no-node-snapshot $NODE_OPTIONS\" jest",
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 0bc93888ae..0a84451bac 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,66 @@ 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,
+    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/row/ExternalRequest.ts b/packages/server/src/api/controllers/row/ExternalRequest.ts
index 685af4e98e..814b57567f 100644
--- a/packages/server/src/api/controllers/row/ExternalRequest.ts
+++ b/packages/server/src/api/controllers/row/ExternalRequest.ts
@@ -437,11 +437,11 @@ export class ExternalRequest<T extends Operation> {
     return { row: newRow, manyRelationships }
   }
 
-  processRelationshipFields(
+  async processRelationshipFields(
     table: Table,
     row: Row,
     relationships: RelationshipsJson[]
-  ): Row {
+  ): Promise<Row> {
     for (let relationship of relationships) {
       const linkedTable = this.tables[relationship.tableName]
       if (!linkedTable || !row[relationship.column]) {
@@ -457,7 +457,7 @@ export class ExternalRequest<T extends Operation> {
         }
         // process additional types
         relatedRow = processDates(table, relatedRow)
-        relatedRow = processFormulas(linkedTable, relatedRow)
+        relatedRow = await processFormulas(linkedTable, relatedRow)
         row[relationship.column][key] = relatedRow
       }
     }
@@ -521,7 +521,7 @@ export class ExternalRequest<T extends Operation> {
     return rows
   }
 
-  outputProcessing(
+  async outputProcessing(
     rows: Row[] = [],
     table: Table,
     relationships: RelationshipsJson[]
@@ -561,9 +561,12 @@ export class ExternalRequest<T extends Operation> {
     }
 
     // make sure all related rows are correct
-    let finalRowArray = Object.values(finalRows).map(row =>
-      this.processRelationshipFields(table, row, relationships)
-    )
+    let finalRowArray = []
+    for (let row of Object.values(finalRows)) {
+      finalRowArray.push(
+        await this.processRelationshipFields(table, row, relationships)
+      )
+    }
 
     // process some additional types
     finalRowArray = processDates(table, finalRowArray)
@@ -934,7 +937,11 @@ export class ExternalRequest<T extends Operation> {
         processed.manyRelationships
       )
     }
-    const output = this.outputProcessing(responseRows, table, relationships)
+    const output = await this.outputProcessing(
+      responseRows,
+      table,
+      relationships
+    )
     // if reading it'll just be an array of rows, return whole thing
     if (operation === Operation.READ) {
       return (
diff --git a/packages/server/src/api/controllers/row/staticFormula.ts b/packages/server/src/api/controllers/row/staticFormula.ts
index 0ea8b3560e..a75a6cd2cc 100644
--- a/packages/server/src/api/controllers/row/staticFormula.ts
+++ b/packages/server/src/api/controllers/row/staticFormula.ts
@@ -110,7 +110,7 @@ export async function updateAllFormulasInTable(table: Table) {
       (enriched: Row) => enriched._id === row._id
     )
     if (enrichedRow) {
-      const processed = processFormulas(table, cloneDeep(row), {
+      const processed = await processFormulas(table, cloneDeep(row), {
         dynamic: false,
         contextRows: [enrichedRow],
       })
@@ -143,7 +143,7 @@ export async function finaliseRow(
     squash: false,
   })) as Row
   // use enriched row to generate formulas for saving, specifically only use as context
-  row = processFormulas(table, row, {
+  row = await processFormulas(table, row, {
     dynamic: false,
     contextRows: [enrichedRow],
   })
@@ -179,7 +179,7 @@ export async function finaliseRow(
   const response = await db.put(row)
   // for response, calculate the formulas for the enriched row
   enrichedRow._rev = response.rev
-  enrichedRow = processFormulas(table, enrichedRow, {
+  enrichedRow = await processFormulas(table, enrichedRow, {
     dynamic: false,
   })
   // this updates the related formulas in other rows based on the relations to this row
diff --git a/packages/server/src/api/controllers/script.ts b/packages/server/src/api/controllers/script.ts
index b69fc430a6..4317f5fcde 100644
--- a/packages/server/src/api/controllers/script.ts
+++ b/packages/server/src/api/controllers/script.ts
@@ -1,6 +1,6 @@
 import { Ctx } from "@budibase/types"
 import { IsolatedVM } from "../../jsRunner/vm"
-import { iifeWrapper } from "../../jsRunner/utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 
 export async function execute(ctx: Ctx) {
   const { script, context } = ctx.request.body
diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs
index 63c61baa9f..54b5b1a4e4 100644
--- a/packages/server/src/api/controllers/static/templates/preview.hbs
+++ b/packages/server/src/api/controllers/static/templates/preview.hbs
@@ -72,7 +72,8 @@
         navigation,
         hiddenComponentIds,
         usedPlugins,
-        location
+        location,
+        snippets
       } = parsed
 
       // Set some flags so the app knows we're in the builder
@@ -89,6 +90,7 @@
       window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
       window["##BUDIBASE_USED_PLUGINS##"] = usedPlugins
       window["##BUDIBASE_LOCATION##"] = location
+      window["##BUDIBASE_SNIPPETS##"] = snippets
 
       // Initialise app
       try {
diff --git a/packages/server/src/api/routes/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/application.spec.ts b/packages/server/src/api/routes/tests/application.spec.ts
index 63c9fe44b8..04edc91bf6 100644
--- a/packages/server/src/api/routes/tests/application.spec.ts
+++ b/packages/server/src/api/routes/tests/application.spec.ts
@@ -34,6 +34,96 @@ describe("/applications", () => {
     jest.clearAllMocks()
   })
 
+  // 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({
+        builder: { global: false },
+        admin: { global: false },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(0)
+      })
+
+      user = await config.globalUser({
+        ...user,
+        builder: {
+          apps: [config.getProdAppId()],
+        },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(1)
+      })
+    })
+
+    it("should only return apps a user has access to through a custom role", async () => {
+      let user = await config.createUser({
+        builder: { global: false },
+        admin: { global: false },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(0)
+      })
+
+      const role = await config.api.roles.save({
+        name: "Test",
+        inherits: "PUBLIC",
+        permissionId: "read_only",
+        version: "name",
+      })
+
+      user = await config.globalUser({
+        ...user,
+        roles: {
+          [config.getProdAppId()]: role.name,
+        },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(1)
+      })
+    })
+
+    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 },
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(0)
+      })
+
+      const roleName = uuid.v4().replace(/-/g, "")
+      const role = await config.api.roles.save({
+        name: roleName,
+        inherits: "PUBLIC",
+        permissionId: "read_only",
+        version: "name",
+      })
+
+      const group = await config.createGroup(role._id!)
+
+      user = await config.globalUser({
+        ...user,
+        userGroups: [group._id!],
+      })
+
+      await config.withUser(user, async () => {
+        const apps = await config.api.application.fetch()
+        expect(apps).toHaveLength(1)
+      })
+    })
+  })
+
   describe("create", () => {
     it("creates empty app", async () => {
       const app = await config.api.application.create({ name: utils.newid() })
@@ -94,6 +184,20 @@ describe("/applications", () => {
       expect(events.app.created).toBeCalledTimes(1)
       expect(events.app.fileImported).toBeCalledTimes(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", () => {
@@ -229,6 +333,63 @@ describe("/applications", () => {
     })
   })
 
+  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).toBeCalled()
+      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(
+        app.appId.slice(0, -1) + "a",
+        {
+          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.toBeCalled()
+    })
+
+    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.toBeCalled()
+    })
+  })
+
   describe("POST /api/applications/:appId/sync", () => {
     it("should not sync automation logs", async () => {
       const automation = await config.createAutomation()
@@ -249,93 +410,4 @@ describe("/applications", () => {
       expect(devLogs.data.length).toBe(0)
     })
   })
-
-  describe("permissions", () => {
-    it("should only return apps a user has access to", async () => {
-      let user = await config.createUser({
-        builder: { global: false },
-        admin: { global: false },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(0)
-      })
-
-      user = await config.globalUser({
-        ...user,
-        builder: {
-          apps: [config.getProdAppId()],
-        },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(1)
-      })
-    })
-
-    it("should only return apps a user has access to through a custom role", async () => {
-      let user = await config.createUser({
-        builder: { global: false },
-        admin: { global: false },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(0)
-      })
-
-      const role = await config.api.roles.save({
-        name: "Test",
-        inherits: "PUBLIC",
-        permissionId: "read_only",
-        version: "name",
-      })
-
-      user = await config.globalUser({
-        ...user,
-        roles: {
-          [config.getProdAppId()]: role.name,
-        },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(1)
-      })
-    })
-
-    it.only("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 },
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(0)
-      })
-
-      const roleName = uuid.v4().replace(/-/g, "")
-      const role = await config.api.roles.save({
-        name: roleName,
-        inherits: "PUBLIC",
-        permissionId: "read_only",
-        version: "name",
-      })
-
-      const group = await config.createGroup(role._id!)
-
-      user = await config.globalUser({
-        ...user,
-        userGroups: [group._id!],
-      })
-
-      await config.withUser(user, async () => {
-        const apps = await config.api.application.fetch()
-        expect(apps).toHaveLength(1)
-      })
-    })
-  })
 })
diff --git a/packages/server/src/api/routes/utils/validators.ts b/packages/server/src/api/routes/utils/validators.ts
index 55766cd120..424d0d6c79 100644
--- a/packages/server/src/api/routes/utils/validators.ts
+++ b/packages/server/src/api/routes/utils/validators.ts
@@ -2,6 +2,7 @@ import { auth, permissions } from "@budibase/backend-core"
 import { DataSourceOperation } from "../../../constants"
 import { WebhookActionType } from "@budibase/types"
 import Joi from "joi"
+import { ValidSnippetNameRegex } from "@budibase/shared-core"
 
 const OPTIONAL_STRING = Joi.string().optional().allow(null).allow("")
 const OPTIONAL_NUMBER = Joi.number().optional().allow(null)
@@ -226,6 +227,21 @@ export function applicationValidator(opts = { isCreate: true }) {
     base.name = appNameValidator.optional()
   }
 
+  const snippetValidator = Joi.array()
+    .optional()
+    .items(
+      Joi.object({
+        name: Joi.string()
+          .pattern(new RegExp(ValidSnippetNameRegex))
+          .error(
+            new Error(
+              "Snippet name cannot include spaces or special characters, and cannot start with a number"
+            )
+          ),
+        code: OPTIONAL_STRING,
+      })
+    )
+
   return auth.joiValidator.body(
     Joi.object({
       _id: OPTIONAL_STRING,
@@ -235,6 +251,7 @@ export function applicationValidator(opts = { isCreate: true }) {
       template: Joi.object({
         templateString: OPTIONAL_STRING,
       }).unknown(true),
+      snippets: snippetValidator,
     }).unknown(true)
   )
 }
diff --git a/packages/server/src/db/linkedRows/index.ts b/packages/server/src/db/linkedRows/index.ts
index 7af3f9392f..513e0c0df2 100644
--- a/packages/server/src/db/linkedRows/index.ts
+++ b/packages/server/src/db/linkedRows/index.ts
@@ -202,7 +202,8 @@ export async function attachFullLinkedDocs(
           table => table._id === linkedTableId
         )
         if (linkedTable) {
-          row[link.fieldName].push(processFormulas(linkedTable, linkedRow))
+          const processed = await processFormulas(linkedTable, linkedRow)
+          row[link.fieldName].push(processed)
         }
       }
     }
diff --git a/packages/server/src/jsRunner/bundles/index.ts b/packages/server/src/jsRunner/bundles/index.ts
index 9e2960807a..f7685206a6 100644
--- a/packages/server/src/jsRunner/bundles/index.ts
+++ b/packages/server/src/jsRunner/bundles/index.ts
@@ -5,11 +5,13 @@ import fs from "fs"
 export const enum BundleType {
   HELPERS = "helpers",
   BSON = "bson",
+  SNIPPETS = "snippets",
 }
 
 const bundleSourceFile: Record<BundleType, string> = {
   [BundleType.HELPERS]: "./index-helpers.ivm.bundle.js",
   [BundleType.BSON]: "./bson.ivm.bundle.js",
+  [BundleType.SNIPPETS]: "./snippets.ivm.bundle.js",
 }
 const bundleSourceCode: Partial<Record<BundleType, string>> = {}
 
diff --git a/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
new file mode 100644
index 0000000000..bad9049af0
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
@@ -0,0 +1,3 @@
+"use strict";var snippets=(()=>{var u=Object.create;var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),W=(i,e)=>{for(var p in e)n(i,p,{get:e[p],enumerable:!0})},f=(i,e,p,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!C.call(i,t)&&t!==p&&n(i,t,{get:()=>e[t],enumerable:!(r=a(e,t))||r.enumerable});return i};var d=(i,e,p)=>(p=i!=null?u(x(i)):{},f(e||!i||!i.__esModule?n(p,"default",{value:i,enumerable:!0}):p,i)),g=i=>f(n({},"__esModule",{value:!0}),i);var s=l((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
+${i}
+})();`});var w={};W(w,{default:()=>v});var c=d(s()),v=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0]((0,c.iifeWrapper)(snippetDefinitions[e]))),snippetCache[e]}});return g(w);})();
diff --git a/packages/server/src/jsRunner/bundles/snippets.ts b/packages/server/src/jsRunner/bundles/snippets.ts
new file mode 100644
index 0000000000..258d501a27
--- /dev/null
+++ b/packages/server/src/jsRunner/bundles/snippets.ts
@@ -0,0 +1,24 @@
+// @ts-ignore
+// eslint-disable-next-line local-rules/no-budibase-imports
+import { iifeWrapper } from "@budibase/string-templates/iife"
+
+export default new Proxy(
+  {},
+  {
+    get: function (_, name) {
+      // Both snippetDefinitions and snippetCache are injected to the isolate
+      // global scope before this bundle is loaded, so we can access it from
+      // there.
+      // See https://esbuild.github.io/content-types/#direct-eval for info on
+      // why eval is being called this way.
+      // Snippets are cached and reused once they have been evaluated.
+      // @ts-ignore
+      if (!(name in snippetCache)) {
+        // @ts-ignore
+        snippetCache[name] = [eval][0](iifeWrapper(snippetDefinitions[name]))
+      }
+      // @ts-ignore
+      return snippetCache[name]
+    },
+  }
+)
diff --git a/packages/server/src/jsRunner/index.ts b/packages/server/src/jsRunner/index.ts
index 19bf0fa6b5..b5c8e036f6 100644
--- a/packages/server/src/jsRunner/index.ts
+++ b/packages/server/src/jsRunner/index.ts
@@ -14,16 +14,19 @@ export function init() {
   setJSRunner((js: string, ctx: Record<string, any>) => {
     return tracer.trace("runJS", {}, span => {
       try {
+        // Reuse an existing isolate from context, or make a new one
         const bbCtx = context.getCurrentContext()
-
         const vm =
           bbCtx?.vm ||
           new IsolatedVM({
             memoryLimit: env.JS_RUNNER_MEMORY_LIMIT,
             invocationTimeout: env.JS_PER_INVOCATION_TIMEOUT_MS,
             isolateAccumulatedTimeout: env.JS_PER_REQUEST_TIMEOUT_MS,
-          }).withHelpers()
+          })
+            .withHelpers()
+            .withSnippets(bbCtx?.snippets)
 
+        // Persist isolate in context so we can reuse it
         if (bbCtx && !bbCtx.vm) {
           bbCtx.vm = vm
           bbCtx.cleanup = bbCtx.cleanup || []
@@ -33,7 +36,7 @@ export function init() {
         // Because we can't pass functions into an Isolate, we remove them from
         // the passed context and rely on the withHelpers() method to add them
         // back in.
-        const { helpers, ...rest } = ctx
+        const { helpers, snippets, ...rest } = ctx
         return vm.withContext(rest, () => vm.execute(js))
       } catch (error: any) {
         if (error.message === "Script execution timed out.") {
diff --git a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
index 5296598ef1..5a9bc05d76 100644
--- a/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
+++ b/packages/server/src/jsRunner/tests/isolatedVM.spec.ts
@@ -1,7 +1,7 @@
 import fs from "fs"
 import path from "path"
 import { IsolatedVM } from "../vm"
-import { iifeWrapper } from "../utilities"
+import { iifeWrapper } from "@budibase/string-templates"
 
 function runJSWithIsolatedVM(script: string, context: Record<string, any>) {
   const runner = new IsolatedVM()
diff --git a/packages/server/src/jsRunner/utilities.ts b/packages/server/src/jsRunner/utilities.ts
deleted file mode 100644
index fa398ec239..0000000000
--- a/packages/server/src/jsRunner/utilities.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function iifeWrapper(script: string) {
-  return `(function(){\n${script}\n})();`
-}
diff --git a/packages/server/src/jsRunner/vm/isolated-vm.ts b/packages/server/src/jsRunner/vm/isolated-vm.ts
index 53858bd6ff..e89d420ec5 100644
--- a/packages/server/src/jsRunner/vm/isolated-vm.ts
+++ b/packages/server/src/jsRunner/vm/isolated-vm.ts
@@ -6,8 +6,8 @@ import crypto from "crypto"
 import querystring from "querystring"
 
 import { BundleType, loadBundle } from "../bundles"
-import { VM } from "@budibase/types"
-import { iifeWrapper } from "../utilities"
+import { Snippet, VM } from "@budibase/types"
+import { iifeWrapper } from "@budibase/string-templates"
 import environment from "../../environment"
 
 class ExecutionTimeoutError extends Error {
@@ -98,6 +98,26 @@ export class IsolatedVM implements VM {
     return this
   }
 
+  withSnippets(snippets?: Snippet[]) {
+    // Transform snippets into a map for faster access
+    let snippetMap: Record<string, string> = {}
+    for (let snippet of snippets || []) {
+      snippetMap[snippet.name] = snippet.code
+    }
+    const snippetsSource = loadBundle(BundleType.SNIPPETS)
+    const script = this.isolate.compileScriptSync(`
+      const snippetDefinitions = ${JSON.stringify(snippetMap)};
+      const snippetCache = {};
+      ${snippetsSource};
+      snippets = snippets.default;
+    `)
+    script.runSync(this.vm, { timeout: this.invocationTimeout, release: false })
+    new Promise(() => {
+      script.release()
+    })
+    return this
+  }
+
   withContext<T>(context: Record<string, any>, executeWithContext: () => T) {
     this.addToContext(context)
 
diff --git a/packages/server/src/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/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/threads/automation.ts b/packages/server/src/threads/automation.ts
index a4938bb138..4e33fadce6 100644
--- a/packages/server/src/threads/automation.ts
+++ b/packages/server/src/threads/automation.ts
@@ -625,6 +625,7 @@ export async function executeInThread(job: Job<AutomationData>) {
   })
 
   return await context.doInAppContext(appId, async () => {
+    await context.ensureSnippetContext()
     const envVars = await sdkUtils.getEnvironmentVariables()
     // put into automation thread for whole context
     return await context.doInEnvironmentContext(envVars, async () => {
diff --git a/packages/server/src/threads/query.ts b/packages/server/src/threads/query.ts
index baee2d5c05..9f5e02bf69 100644
--- a/packages/server/src/threads/query.ts
+++ b/packages/server/src/threads/query.ts
@@ -8,9 +8,8 @@ import {
   QueryResponse,
 } from "./definitions"
 import { IsolatedVM } from "../jsRunner/vm"
-import { iifeWrapper } from "../jsRunner/utilities"
+import { iifeWrapper, processStringSync } from "@budibase/string-templates"
 import { getIntegration } from "../integrations"
-import { processStringSync } from "@budibase/string-templates"
 import { context, cache, auth } from "@budibase/backend-core"
 import { getGlobalIDFromUserMetadataID } from "../db/utils"
 import sdk from "../sdk"
diff --git a/packages/server/src/utilities/rowProcessor/index.ts b/packages/server/src/utilities/rowProcessor/index.ts
index e3ca576fb7..d956a94d0b 100644
--- a/packages/server/src/utilities/rowProcessor/index.ts
+++ b/packages/server/src/utilities/rowProcessor/index.ts
@@ -245,7 +245,7 @@ export async function outputProcessing<T extends Row[] | Row>(
   }
 
   // process formulas after the complex types had been processed
-  enriched = processFormulas(table, enriched, { dynamic: true })
+  enriched = await processFormulas(table, enriched, { dynamic: true })
 
   if (opts.squash) {
     enriched = (await linkRows.squashLinksToPrimaryDisplay(
diff --git a/packages/server/src/utilities/rowProcessor/utils.ts b/packages/server/src/utilities/rowProcessor/utils.ts
index d0fc82b3ee..8201680f13 100644
--- a/packages/server/src/utilities/rowProcessor/utils.ts
+++ b/packages/server/src/utilities/rowProcessor/utils.ts
@@ -10,6 +10,7 @@ import {
   FieldType,
 } from "@budibase/types"
 import tracer from "dd-trace"
+import { context } from "@budibase/backend-core"
 
 interface FormulaOpts {
   dynamic?: boolean
@@ -44,16 +45,19 @@ export function fixAutoColumnSubType(
 /**
  * Looks through the rows provided and finds formulas - which it then processes.
  */
-export function processFormulas<T extends Row | Row[]>(
+export async function processFormulas<T extends Row | Row[]>(
   table: Table,
   inputRows: T,
   { dynamic, contextRows }: FormulaOpts = { dynamic: true }
-): T {
-  return tracer.trace("processFormulas", {}, span => {
+): Promise<T> {
+  return tracer.trace("processFormulas", {}, async span => {
     const numRows = Array.isArray(inputRows) ? inputRows.length : 1
     span?.addTags({ table_id: table._id, dynamic, numRows })
     const rows = Array.isArray(inputRows) ? inputRows : [inputRows]
     if (rows) {
+      // Ensure we have snippet context
+      await context.ensureSnippetContext()
+
       for (let [column, schema] of Object.entries(table.schema)) {
         if (schema.type !== FieldType.FORMULA) {
           continue
diff --git a/packages/shared-core/src/constants/index.ts b/packages/shared-core/src/constants/index.ts
index 99fb5c2a73..633fd36e45 100644
--- a/packages/shared-core/src/constants/index.ts
+++ b/packages/shared-core/src/constants/index.ts
@@ -98,6 +98,7 @@ export enum BuilderSocketEvent {
 export const SocketSessionTTL = 60
 export const ValidQueryNameRegex = /^[^()]*$/
 export const ValidColumnNameRegex = /^[_a-zA-Z0-9\s]*$/g
+export const ValidSnippetNameRegex = /^[a-z_][a-z0-9_]*$/i
 
 export const REBOOT_CRON = "@reboot"
 
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index ceafd5364f..340d74ef8a 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -12,7 +12,8 @@
       "import": "./dist/bundle.mjs"
     },
     "./package.json": "./package.json",
-    "./test/utils": "./test/utils.js"
+    "./test/utils": "./test/utils.js",
+    "./iife": "./src/iife.js"
   },
   "files": [
     "dist",
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 7827736812..5be2619463 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -2,6 +2,7 @@ const { atob, isBackendService, isJSAllowed } = require("../utilities")
 const cloneDeep = require("lodash.clonedeep")
 const { LITERAL_MARKER } = require("../helpers/constants")
 const { getJsHelperList } = require("./list")
+const { iifeWrapper } = require("../iife")
 
 // The method of executing JS scripts depends on the bundle being built.
 // This setter is used in the entrypoint (either index.js or index.mjs).
@@ -48,14 +49,36 @@ module.exports.processJS = (handlebars, context) => {
   try {
     // Wrap JS in a function and immediately invoke it.
     // This is required to allow the final `return` statement to be valid.
-    const js = `(function(){${atob(handlebars)}})();`
+    const js = iifeWrapper(atob(handlebars))
+
+    // Transform snippets into an object for faster access, and cache previously
+    // evaluated snippets
+    let snippetMap = {}
+    let snippetCache = {}
+    for (let snippet of context.snippets || []) {
+      snippetMap[snippet.name] = snippet.code
+    }
 
     // Our $ context function gets a value from context.
     // We clone the context to avoid mutation in the binding affecting real
     // app context.
+    const clonedContext = cloneDeep({ ...context, snippets: null })
     const sandboxContext = {
-      $: path => getContextValue(path, cloneDeep(context)),
+      $: path => getContextValue(path, clonedContext),
       helpers: getJsHelperList(),
+
+      // Proxy to evaluate snippets when running in the browser
+      snippets: new Proxy(
+        {},
+        {
+          get: function (_, name) {
+            if (!(name in snippetCache)) {
+              snippetCache[name] = eval(iifeWrapper(snippetMap[name]))
+            }
+            return snippetCache[name]
+          },
+        }
+      ),
     }
 
     // Create a sandbox with our context and run the JS
diff --git a/packages/string-templates/src/iife.js b/packages/string-templates/src/iife.js
new file mode 100644
index 0000000000..d043c14565
--- /dev/null
+++ b/packages/string-templates/src/iife.js
@@ -0,0 +1,3 @@
+module.exports.iifeWrapper = script => {
+  return `(function(){\n${script}\n})();`
+}
diff --git a/packages/string-templates/src/index.js b/packages/string-templates/src/index.js
index 0125b9e0ab..5ae773516f 100644
--- a/packages/string-templates/src/index.js
+++ b/packages/string-templates/src/index.js
@@ -3,6 +3,7 @@ const handlebars = require("handlebars")
 const { registerAll, registerMinimum } = require("./helpers/index")
 const processors = require("./processors")
 const { atob, btoa, isBackendService } = require("./utilities")
+const { iifeWrapper } = require("./iife")
 const manifest = require("../manifest.json")
 const {
   FIND_HBS_REGEX,
@@ -426,3 +427,4 @@ function defaultJSSetup() {
 defaultJSSetup()
 
 module.exports.defaultJSSetup = defaultJSSetup
+module.exports.iifeWrapper = iifeWrapper
diff --git a/packages/types/src/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/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/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`,