diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
index 9805ba99..67899943 100644
--- a/packages/ui/package-lock.json
+++ b/packages/ui/package-lock.json
@@ -8,14 +8,14 @@
             "name": "restfox-ui",
             "version": "0.0.0",
             "dependencies": {
-                "@codemirror/autocomplete": "^6.16.0",
-                "@codemirror/commands": "^6.5.0",
+                "@codemirror/autocomplete": "^6.18.0",
+                "@codemirror/commands": "^6.6.1",
                 "@codemirror/lang-javascript": "^6.2.2",
                 "@codemirror/lang-json": "^6.0.1",
-                "@codemirror/language": "^6.10.1",
+                "@codemirror/language": "^6.10.2",
                 "@codemirror/search": "^6.5.6",
                 "@codemirror/state": "^6.4.1",
-                "@codemirror/view": "^6.26.3",
+                "@codemirror/view": "^6.33.0",
                 "@flawiddsouza/quickjs-emscripten-sync": "^1.5.2",
                 "@jitl/quickjs-singlefile-browser-release-asyncify": "^0.29.1",
                 "chai": "^4.3.10",
@@ -28,6 +28,7 @@
                 "graphql-request": "^7.1.0",
                 "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#ed12aba",
                 "insomnia-importers-browser": "github:flawiddsouza/insomnia-importers-browser",
+                "js-base64": "^3.7.7",
                 "js-yaml": "^4.1.0",
                 "jsonpath-plus": "9.0.0",
                 "jszip": "^3.7.1",
@@ -1751,9 +1752,10 @@
             }
         },
         "node_modules/@codemirror/autocomplete": {
-            "version": "6.16.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.0.tgz",
-            "integrity": "sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==",
+            "version": "6.18.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
+            "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/language": "^6.0.0",
                 "@codemirror/state": "^6.0.0",
@@ -1768,13 +1770,14 @@
             }
         },
         "node_modules/@codemirror/commands": {
-            "version": "6.5.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.5.0.tgz",
-            "integrity": "sha512-rK+sj4fCAN/QfcY9BEzYMgp4wwL/q5aj/VfNSoH1RWPF9XS/dUwBkvlL3hpWgEjOqlpdN1uLC9UkjJ4tmyjJYg==",
+            "version": "6.6.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.1.tgz",
+            "integrity": "sha512-iBfKbyIoXS1FGdsKcZmnrxmbc8VcbMrSgD7AVrsnX+WyAYjmUDWvE93dt5D874qS4CCVu4O1JpbagHdXbbLiOw==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/language": "^6.0.0",
                 "@codemirror/state": "^6.4.0",
-                "@codemirror/view": "^6.0.0",
+                "@codemirror/view": "^6.27.0",
                 "@lezer/common": "^1.1.0"
             }
         },
@@ -1782,6 +1785,7 @@
             "version": "6.2.2",
             "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
             "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/autocomplete": "^6.0.0",
                 "@codemirror/language": "^6.6.0",
@@ -1796,15 +1800,17 @@
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
             "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/language": "^6.0.0",
                 "@lezer/json": "^1.0.0"
             }
         },
         "node_modules/@codemirror/language": {
-            "version": "6.10.1",
-            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz",
-            "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==",
+            "version": "6.10.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+            "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.23.0",
@@ -1828,6 +1834,7 @@
             "version": "6.5.6",
             "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
             "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.0.0",
@@ -1837,12 +1844,14 @@
         "node_modules/@codemirror/state": {
             "version": "6.4.1",
             "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz",
-            "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
+            "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==",
+            "license": "MIT"
         },
         "node_modules/@codemirror/view": {
-            "version": "6.26.3",
-            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.3.tgz",
-            "integrity": "sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==",
+            "version": "6.33.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.33.0.tgz",
+            "integrity": "sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==",
+            "license": "MIT",
             "dependencies": {
                 "@codemirror/state": "^6.4.0",
                 "style-mod": "^4.1.0",
@@ -6323,6 +6332,12 @@
                 "@sideway/pinpoint": "^2.0.0"
             }
         },
+        "node_modules/js-base64": {
+            "version": "3.7.7",
+            "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+            "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==",
+            "license": "BSD-3-Clause"
+        },
         "node_modules/js-sdsl": {
             "version": "4.1.5",
             "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -10918,9 +10933,9 @@
             }
         },
         "@codemirror/autocomplete": {
-            "version": "6.16.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.0.tgz",
-            "integrity": "sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==",
+            "version": "6.18.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
+            "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
             "requires": {
                 "@codemirror/language": "^6.0.0",
                 "@codemirror/state": "^6.0.0",
@@ -10929,13 +10944,13 @@
             }
         },
         "@codemirror/commands": {
-            "version": "6.5.0",
-            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.5.0.tgz",
-            "integrity": "sha512-rK+sj4fCAN/QfcY9BEzYMgp4wwL/q5aj/VfNSoH1RWPF9XS/dUwBkvlL3hpWgEjOqlpdN1uLC9UkjJ4tmyjJYg==",
+            "version": "6.6.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.1.tgz",
+            "integrity": "sha512-iBfKbyIoXS1FGdsKcZmnrxmbc8VcbMrSgD7AVrsnX+WyAYjmUDWvE93dt5D874qS4CCVu4O1JpbagHdXbbLiOw==",
             "requires": {
                 "@codemirror/language": "^6.0.0",
                 "@codemirror/state": "^6.4.0",
-                "@codemirror/view": "^6.0.0",
+                "@codemirror/view": "^6.27.0",
                 "@lezer/common": "^1.1.0"
             }
         },
@@ -10963,9 +10978,9 @@
             }
         },
         "@codemirror/language": {
-            "version": "6.10.1",
-            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz",
-            "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==",
+            "version": "6.10.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+            "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
             "requires": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.23.0",
@@ -11001,9 +11016,9 @@
             "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
         },
         "@codemirror/view": {
-            "version": "6.26.3",
-            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.3.tgz",
-            "integrity": "sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==",
+            "version": "6.33.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.33.0.tgz",
+            "integrity": "sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==",
             "requires": {
                 "@codemirror/state": "^6.4.0",
                 "style-mod": "^4.1.0",
@@ -14109,6 +14124,11 @@
                 "@sideway/pinpoint": "^2.0.0"
             }
         },
+        "js-base64": {
+            "version": "3.7.7",
+            "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+            "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
+        },
         "js-sdsl": {
             "version": "4.1.5",
             "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 431eda38..d5457d8e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,14 +18,14 @@
         "ci-test": "start-server-and-test dev http://127.0.0.1:5173/ e2e-test"
     },
     "dependencies": {
-        "@codemirror/autocomplete": "^6.16.0",
-        "@codemirror/commands": "^6.5.0",
+        "@codemirror/autocomplete": "^6.18.0",
+        "@codemirror/commands": "^6.6.1",
         "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/language": "^6.10.1",
+        "@codemirror/language": "^6.10.2",
         "@codemirror/search": "^6.5.6",
         "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.26.3",
+        "@codemirror/view": "^6.33.0",
         "@flawiddsouza/quickjs-emscripten-sync": "^1.5.2",
         "@jitl/quickjs-singlefile-browser-release-asyncify": "^0.29.1",
         "chai": "^4.3.10",
@@ -38,6 +38,7 @@
         "graphql-request": "^7.1.0",
         "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#ed12aba",
         "insomnia-importers-browser": "github:flawiddsouza/insomnia-importers-browser",
+        "js-base64": "^3.7.7",
         "js-yaml": "^4.1.0",
         "jsonpath-plus": "9.0.0",
         "jszip": "^3.7.1",
diff --git a/packages/ui/src/codemirror-extensions/tags.ts b/packages/ui/src/codemirror-extensions/tags.ts
new file mode 100644
index 00000000..53dd8cea
--- /dev/null
+++ b/packages/ui/src/codemirror-extensions/tags.ts
@@ -0,0 +1,79 @@
+import { ViewPlugin, Decoration, EditorView, ViewUpdate, MatchDecorator, WidgetType, DecorationSet } from '@codemirror/view'
+import { parseFunction } from '@/parsers/tag'
+import type { ParsedResult } from '@/parsers/tag'
+
+type OnClickType = (parsedFunc: ParsedResult, updateFunc: (updatedTag: string) => void) => void
+
+class PlaceholderWidget extends WidgetType {
+    readonly #onClick: () => void
+    #parsed: ParsedResult
+    readonly #view: EditorView
+    readonly #pos: number
+
+    constructor(readonly placeholder: string, readonly onClick: OnClickType, readonly view: EditorView, readonly pos: number) {
+        super()
+        this.#parsed = parseFunction(placeholder)
+        this.#onClick = () => {
+            onClick(this.#parsed, this.updateTag)
+        }
+        this.#view = view
+        this.#pos = pos
+    }
+
+    eq(other: PlaceholderWidget) {
+        return this.placeholder === other.placeholder
+    }
+
+    toDOM() {
+        const span = document.createElement('span')
+        span.className = 'tag'
+        span.textContent = `${this.#parsed.functionName}(...)`
+        span.title = this.placeholder
+        span.addEventListener('click', this.#onClick)
+        return span
+    }
+
+    ignoreEvent(): boolean {
+        return false
+    }
+
+    destroy(dom: HTMLElement): void {
+        dom.removeEventListener('click', this.#onClick)
+    }
+
+    updateTag = (updatedTag: string) => {
+        this.#parsed = parseFunction(updatedTag)
+        this.#view.dispatch({
+            changes: { from: this.#pos + 3, to: this.#pos + this.placeholder.length + 3, insert: updatedTag }
+        })
+    }
+}
+
+export function tags(onClick: OnClickType) {
+    const placeholderMatcher = new MatchDecorator({
+        regexp: /{% (.+?) %}/g,
+        decoration: (match, view, pos) => Decoration.replace({
+            widget: new PlaceholderWidget(match[1], onClick, view, pos),
+        })
+    })
+
+    const tags = ViewPlugin.fromClass(
+        class {
+            placeholders: DecorationSet
+            constructor(view: EditorView) {
+                this.placeholders = placeholderMatcher.createDeco(view)
+            }
+            update(update: ViewUpdate) {
+                this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders)
+            }
+        },
+        {
+            decorations: instance => instance.placeholders,
+            provide: plugin => EditorView.atomicRanges.of(view => {
+                return view.plugin(plugin)?.placeholders || Decoration.none
+            })
+        }
+    )
+
+    return tags
+}
diff --git a/packages/ui/src/components/CodeMirrorEditor.vue b/packages/ui/src/components/CodeMirrorEditor.vue
index 21217cf8..c5cd0809 100644
--- a/packages/ui/src/components/CodeMirrorEditor.vue
+++ b/packages/ui/src/components/CodeMirrorEditor.vue
@@ -5,16 +5,18 @@
 <script lang="ts">
 import { EditorView, highlightActiveLine, keymap, highlightSpecialChars, lineNumbers, highlightActiveLineGutter, drawSelection } from '@codemirror/view'
 import { EditorState, StateEffect } from '@codemirror/state'
-import { json } from '@codemirror/lang-json'
+import { json, jsonLanguage } from '@codemirror/lang-json'
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript'
-import { graphql } from 'cm6-graphql'
+import { graphql, graphqlLanguage } from 'cm6-graphql'
 import { closeBrackets, completeFromList, autocompletion } from '@codemirror/autocomplete'
 import { indentOnInput, indentUnit, bracketMatching, foldGutter, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
 import { defaultKeymap, indentWithTab, history, historyKeymap, selectLine, selectLineBoundaryForward } from '@codemirror/commands'
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search'
 import { codeMirrorSyntaxHighlighting } from '@/helpers'
 import { envVarDecoration } from '@/utils/codemirror-extensions'
+import { tags } from '@/codemirror-extensions/tags'
 import { codeMirrorStyleOverrides } from '@/utils/code-mirror-style-overrides'
+import type { ParsedResult } from '@/parsers/tag'
 
 /**
  * "Mod-Enter" is "Ctrl-Enter" inside codemirror
@@ -42,6 +44,7 @@ function getLanguageFuncAndHighlightStyle(language) {
 
     if(language === 'json') {
         languageFunc = json()
+        languageData = jsonLanguage
         highlightStyle = codeMirrorSyntaxHighlighting()
     }
 
@@ -53,6 +56,7 @@ function getLanguageFuncAndHighlightStyle(language) {
 
     if(language === 'graphql') {
         languageFunc = graphql()
+        languageData = graphqlLanguage
         highlightStyle = codeMirrorSyntaxHighlighting()
     }
 
@@ -74,10 +78,24 @@ function getExtensions(vueInstance, language) {
         }) : null,
     ].filter(Boolean)
 
+    let autocompletionExtension = autocompletion()
+
+    if(languageData === null && vueInstance.autocompletions.length > 0) {
+        autocompletionExtension = autocompletion({
+            override: [
+                completeFromList(vueInstance.autocompletions)
+            ]
+        })
+    }
+
+    const tagClickHandler = (parsedFunc: ParsedResult, updateFunc: (updatedTag: string) => void) => {
+        vueInstance.$emit('tag-click', parsedFunc, updateFunc)
+    }
+
     return [
         ...languageArray,
         ...autocompletionsArray,
-        autocompletion(),
+        autocompletionExtension,
         syntaxHighlighting(highlightStyle, { fallback: true }),
         lineNumbers(),
         highlightActiveLineGutter(),
@@ -108,6 +126,7 @@ function getExtensions(vueInstance, language) {
         ]),
         vueInstance.readonly ? EditorState.readOnly.of(true) : EditorState.readOnly.of(false),
         envVarDecoration(vueInstance.envVariables),
+        tags(tagClickHandler),
     ]
 }
 
diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
index 2c17d14f..31999588 100644
--- a/packages/ui/src/components/CodeMirrorSingleLine.vue
+++ b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -2,12 +2,14 @@
     <div class="code-mirror-single-line" :class="{ disabled }"></div>
 </template>
 
-<script>
-import { EditorView, keymap, placeholder } from '@codemirror/view'
+<script lang="ts">
+import { EditorView, keymap, placeholder, drawSelection } from '@codemirror/view'
 import { EditorState, StateEffect } from '@codemirror/state'
-import { history, historyKeymap } from '@codemirror/commands'
-import { autocompletion } from '@codemirror/autocomplete'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { autocompletion, completeFromList } from '@codemirror/autocomplete'
 import { envVarDecoration } from '@/utils/codemirror-extensions'
+import { tags } from '@/codemirror-extensions/tags'
+import type { ParsedResult } from '@/parsers/tag'
 
 function getExtensions(vueInstance) {
     const singleLineEnforcers = []
@@ -50,6 +52,18 @@ function getExtensions(vueInstance) {
         ].forEach(enforcer => multiLineEnforcers.push(enforcer))
     }
 
+    let autocompletions: any[] = []
+
+    if(vueInstance.autocompletions.length > 0) {
+        autocompletions = [
+            completeFromList(vueInstance.autocompletions)
+        ]
+    }
+
+    const tagClickHandler = (parsedFunc: ParsedResult, updateFunc: (updatedTag: string) => void) => {
+        vueInstance.$emit('tag-click', parsedFunc, updateFunc)
+    }
+
     const extensions = [
         history(),
         EditorView.updateListener.of(v => {
@@ -61,12 +75,16 @@ function getExtensions(vueInstance) {
         ...singleLineEnforcers,
         ...multiLineEnforcers,
         keymap.of([
+            ...defaultKeymap,
             ...historyKeymap
         ]),
         placeholder(vueInstance.placeholder),
         envVarDecoration(vueInstance.envVariables),
+        tags(tagClickHandler),
+        drawSelection(),
         autocompletion({
             override: [
+                ...autocompletions,
                 context => {
                     let word = context.matchBefore(/\w*/)
                     if(!word) {
@@ -159,6 +177,10 @@ export default {
             type: Boolean,
             default: false
         },
+        autocompletions: {
+            type: Array,
+            default: () => []
+        },
     },
     data() {
         return {
diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue
index 07c57206..06c05898 100644
--- a/packages/ui/src/components/RequestPanel.vue
+++ b/packages/ui/src/components/RequestPanel.vue
@@ -22,6 +22,8 @@
                     @update:modelValue="handleUrlChange"
                     :paste-handler="handleAddressBarPaste"
                     :env-variables="collectionItemEnvironmentResolved"
+                    :autocompletions="tagAutocompletions"
+                    @tagClick="onTagClick"
                     data-testid="request-panel-address-bar"
                 />
             </div>
@@ -72,6 +74,8 @@
                                     v-model="param.name"
                                     placeholder="name"
                                     :env-variables="collectionItemEnvironmentResolved"
+                                    :autocompletions="tagAutocompletions"
+                                    @tagClick="onTagClick"
                                     :input-text-compatible="true"
                                     :disabled="param.disabled"
                                     :key="'body-param-name-' + index"
@@ -82,6 +86,8 @@
                                     v-model="param.value"
                                     placeholder="value"
                                     :env-variables="collectionItemEnvironmentResolved"
+                                    :autocompletions="tagAutocompletions"
+                                    @tagClick="onTagClick"
                                     :input-text-compatible="true"
                                     :disabled="param.disabled"
                                     :key="'body-param-value-' + index"
@@ -109,6 +115,8 @@
                                     v-model="param.name"
                                     placeholder="name"
                                     :env-variables="collectionItemEnvironmentResolved"
+                                    :autocompletions="tagAutocompletions"
+                                    @tagClick="onTagClick"
                                     :input-text-compatible="true"
                                     :disabled="param.disabled"
                                     :key="'body-param-name-' + index"
@@ -121,6 +129,8 @@
                                             v-model="param.value"
                                             placeholder="value"
                                             :env-variables="collectionItemEnvironmentResolved"
+                                            :autocompletions="tagAutocompletions"
+                                            @tagClick="onTagClick"
                                             :input-text-compatible="true"
                                             :disabled="param.disabled"
                                             :key="'body-param-value-' + index"
@@ -165,6 +175,8 @@
                         v-model="activeTab.body.text"
                         lang="text"
                         :env-variables="collectionItemEnvironmentResolved"
+                        :autocompletions="tagAutocompletions"
+                        @tagClick="onTagClick"
                         class="code-editor"
                         :key="'code-mirror-editor-' + activeTab._id + '-' + refreshCodeMirrorEditors"
                     ></CodeMirrorEditor>
@@ -174,6 +186,8 @@
                         v-model="activeTab.body.text"
                         lang="json"
                         :env-variables="collectionItemEnvironmentResolved"
+                        :autocompletions="tagAutocompletions"
+                        @tagClick="onTagClick"
                         class="code-editor"
                         :key="'code-mirror-editor-' + activeTab._id + '-' + refreshCodeMirrorEditors"
                         ref="jsonEditor"
@@ -188,6 +202,8 @@
                             v-model="graphql.query"
                             lang="graphql"
                             :env-variables="collectionItemEnvironmentResolved"
+                            :autocompletions="tagAutocompletions"
+                            @tagClick="onTagClick"
                             class="code-editor"
                             :key="'code-mirror-editor1-' + activeTab._id + '-' + refreshCodeMirrorEditors"
                             ref="graphqlEditor"
@@ -200,6 +216,8 @@
                                 v-model="graphql.variables"
                                 lang="json"
                                 :env-variables="collectionItemEnvironmentResolved"
+                                :autocompletions="tagAutocompletions"
+                                @tagClick="onTagClick"
                                 class="code-editor"
                                 :key="'code-mirror-editor2-' + activeTab._id + '-' + refreshCodeMirrorEditors"
                                 ref="jsonEditor"
@@ -245,6 +263,8 @@
                                 v-model="param.name"
                                 placeholder="name"
                                 :env-variables="collectionItemEnvironmentResolved"
+                                :autocompletions="tagAutocompletions"
+                                @tagClick="onTagClick"
                                 :input-text-compatible="true"
                                 :disabled="param.disabled"
                                 :key="'query-param-name-' + index"
@@ -256,6 +276,8 @@
                                 v-model="param.value"
                                 placeholder="value"
                                 :env-variables="collectionItemEnvironmentResolved"
+                                :autocompletions="tagAutocompletions"
+                                @tagClick="onTagClick"
                                 :input-text-compatible="true"
                                 :disabled="param.disabled"
                                 :key="'query-param-value-' + index"
@@ -288,6 +310,8 @@
                                 v-model="param.name"
                                 placeholder="name"
                                 :env-variables="collectionItemEnvironmentResolved"
+                                :autocompletions="tagAutocompletions"
+                                @tagClick="onTagClick"
                                 :input-text-compatible="true"
                                 :disabled="param.disabled"
                                 :key="'path-param-name-' + index"
@@ -298,6 +322,8 @@
                                 v-model="param.value"
                                 placeholder="value"
                                 :env-variables="collectionItemEnvironmentResolved"
+                                :autocompletions="tagAutocompletions"
+                                @tagClick="onTagClick"
                                 :input-text-compatible="true"
                                 :disabled="param.disabled"
                                 :key="'path-param-value-' + index"
@@ -324,10 +350,18 @@
                 </div>
             </template>
             <template v-if="activeRequestPanelTab === 'Header'">
-                <RequestPanelHeaders :collection-item="activeTab" :collection-item-environment-resolved="collectionItemEnvironmentResolved"></RequestPanelHeaders>
+                <RequestPanelHeaders
+                    :collection-item="activeTab"
+                    :collection-item-environment-resolved="collectionItemEnvironmentResolved"
+                    @tagClick="onTagClick"
+                />
             </template>
             <template v-if="activeRequestPanelTab === 'Auth'">
-                <RequestPanelAuth :collection-item="activeTab" :collection-item-environment-resolved="collectionItemEnvironmentResolved"></RequestPanelAuth>
+                <RequestPanelAuth
+                    :collection-item="activeTab"
+                    :collection-item-environment-resolved="collectionItemEnvironmentResolved"
+                    @tagClick="onTagClick"
+                />
             </template>
             <template v-if="activeRequestPanelTab === 'Script'">
                 <div style="height: 100%; display: grid; grid-template-rows: auto 1fr auto 1fr;">
@@ -392,9 +426,16 @@
         @customHttpMethod="handleCustomHttpMethod"
     />
     <GenerateCodeModal v-model:showModal="generateCodeModalShow" :collection-item="generateCodeModalCollectionItem" />
+    <EditTagModal
+        v-if="editTagModalShow"
+        v-model:showModal="editTagModalShow"
+        :parsed-func="editTagParsedFunc"
+        :update-func="editTagUpdateFunc"
+        :active-tab="activeTab"
+    />
 </template>
 
-<script>
+<script lang="ts">
 import CodeMirrorSingleLine from './CodeMirrorSingleLine.vue'
 import CodeMirrorEditor from '@/components/CodeMirrorEditor.vue'
 import RequestPanelTabTitle from '@/components/RequestPanelTabTitle.vue'
@@ -418,6 +459,7 @@ import { marked } from 'marked'
 import HttpMethodModal from '@/components/modals/HttpMethodModal.vue'
 import GraphQLSchemaFetcher from '@/components/GraphQLSchemaFetcher.vue'
 import GenerateCodeModal from '@/components/modals/GenerateCodeModal.vue'
+import EditTagModal from '@/components/modals/EditTagModal.vue'
 import { formatSdl } from 'format-graphql'
 
 const renderer = new marked.Renderer()
@@ -443,7 +485,8 @@ export default {
         ReferencesButton,
         HttpMethodModal,
         SnippetDropdown,
-        GraphQLSchemaFetcher
+        GraphQLSchemaFetcher,
+        EditTagModal,
     },
     props: {
         activeTab: Object,
@@ -591,6 +634,10 @@ export default {
             generateCodeModalShow: false,
             intervalRequestSending: null,
             delayRequestSending: null,
+            editTagModalShow: false,
+            editTagParsedFunc: null,
+            editTagUpdateFunc: null,
+            urlPreview: '',
         }
     },
     computed: {
@@ -619,22 +666,8 @@ export default {
                 ...constants.AUTOCOMPLETIONS.PLUGIN.RESPONSE_METHODS
             ]
         },
-        urlPreview() {
-            let url = this.activeTab.url ?? ''
-
-            url = substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, url)
-
-            if(this.activeTab.pathParameters) {
-                this.activeTab.pathParameters.filter(item => !item.disabled).forEach(pathParameter => {
-                    url = url.replaceAll(
-                        `:${substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, pathParameter.name)}`, substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, pathParameter.value)
-                    ).replaceAll(
-                        `{${substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, pathParameter.name)}}`, substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, pathParameter.value)
-                    )
-                })
-            }
-
-            return url !== '' && url.trim() !== '' ? url : 'No URL'
+        tagAutocompletions() {
+            return constants.AUTOCOMPLETIONS.TAGS
         },
     },
     watch: {
@@ -658,6 +691,15 @@ export default {
             }
             this.loadGraphql()
         },
+        'activeTab.url'() {
+            this.getUrlPreview()
+        },
+        'activeTab.pathParameters': {
+            handler() {
+                this.getUrlPreview()
+            },
+            deep: true
+        },
         graphql: {
             handler() {
                 if(this.disableGraphqlWatch) {
@@ -1059,7 +1101,29 @@ export default {
                     icon: 'fa fa-refresh'
                 },
             ]
-        }
+        },
+        onTagClick(parsedFunc, updateFunc) {
+            this.editTagParsedFunc = parsedFunc
+            this.editTagUpdateFunc = updateFunc
+            this.editTagModalShow = true
+        },
+        async getUrlPreview() {
+            let url = this.activeTab.url ?? ''
+
+            url = await substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, url, { tagTrigger: false, noError: true })
+
+            if (this.activeTab.pathParameters) {
+                for (const pathParameter of this.activeTab.pathParameters.filter(item => !item.disabled)) {
+                    const paramName = await substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, pathParameter.name, { tagTrigger: false, noError: true })
+                    const paramValue = await substituteEnvironmentVariables(this.collectionItemEnvironmentResolved, pathParameter.value, { tagTrigger: false, noError: true })
+
+                    url = url.replaceAll(`:${paramName}`, paramValue)
+                        .replaceAll(`{${paramName}}`, paramValue)
+                }
+            }
+
+            this.urlPreview = url !== '' && url.trim() !== '' ? url : 'No URL'
+        },
     },
     mounted() {
         emitter.on('response_panel', this.handleResponsePanelEmitter)
@@ -1067,6 +1131,8 @@ export default {
         this.attachRootElementResizeObserver()
 
         this.loadGraphql()
+
+        this.getUrlPreview()
     },
     beforeUnmount() {
         emitter.off('response_panel', this.handleResponsePanelEmitter)
diff --git a/packages/ui/src/components/RequestPanelAuth.vue b/packages/ui/src/components/RequestPanelAuth.vue
index 491e23c0..bfa1447f 100644
--- a/packages/ui/src/components/RequestPanelAuth.vue
+++ b/packages/ui/src/components/RequestPanelAuth.vue
@@ -29,6 +29,8 @@
                         <CodeMirrorSingleLine
                             v-model="collectionItem.authentication.username"
                             :env-variables="collectionItemEnvironmentResolved"
+                            :autocompletions="tagAutocompletions"
+                            @tagClick="onTagClick"
                             :input-text-compatible="true"
                             :disabled="collectionItem.authentication.disabled"
                             :key="'basic-auth-username'"
@@ -45,6 +47,8 @@
                         <CodeMirrorSingleLine
                             v-model="collectionItem.authentication.password"
                             :env-variables="collectionItemEnvironmentResolved"
+                            :autocompletions="tagAutocompletions"
+                            @tagClick="onTagClick"
                             :input-text-compatible="true"
                             :disabled="collectionItem.authentication.disabled"
                             :key="'basic-auth-password'"
@@ -63,6 +67,8 @@
                         <CodeMirrorSingleLine
                             v-model="collectionItem.authentication.token"
                             :env-variables="collectionItemEnvironmentResolved"
+                            :autocompletions="tagAutocompletions"
+                            @tagClick="onTagClick"
                             :input-text-compatible="true"
                             :disabled="collectionItem.authentication.disabled"
                             :key="'bearer-auth-token'"
@@ -79,6 +85,8 @@
                         <CodeMirrorSingleLine
                             v-model="collectionItem.authentication.prefix"
                             :env-variables="collectionItemEnvironmentResolved"
+                            :autocompletions="tagAutocompletions"
+                            @tagClick="onTagClick"
                             :input-text-compatible="true"
                             :disabled="collectionItem.authentication.disabled"
                             :key="'bearer-auth-prefix'"
@@ -99,10 +107,11 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref } from 'vue'
+import { computed, PropType, ref } from 'vue'
 import CodeMirrorSingleLine from './CodeMirrorSingleLine.vue'
 import { CollectionItem } from '@/global'
 import ContextMenu from '@/components/ContextMenu.vue'
+import constants from '@/constants'
 
 const props = defineProps({
     collectionItem: {
@@ -115,6 +124,8 @@ const props = defineProps({
     }
 })
 
+const emit = defineEmits(['tagClick'])
+
 const requestAuthList = ref([
     {
         'type': 'option',
@@ -152,6 +163,10 @@ const showRequestAuthMenu = ref(false)
 const requestAuthMenuX = ref<number | null>(null)
 const requestAuthMenuY = ref<number | null>(null)
 
+const tagAutocompletions = computed(() => {
+    return constants.AUTOCOMPLETIONS.TAGS
+})
+
 function handleRequestAuthMenu(event: any) {
     const containerElement = event.target.closest('.custom-select')
     requestAuthMenuX.value = containerElement.getBoundingClientRect().left
@@ -172,6 +187,10 @@ function toggleAuthEnabled(event: Event) {
         props.collectionItem.authentication.disabled = !target.checked
     }
 }
+
+function onTagClick(...args: any) {
+    emit('tagClick', ...args)
+}
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/components/RequestPanelHeaders.vue b/packages/ui/src/components/RequestPanelHeaders.vue
index 94252958..00a8d0af 100644
--- a/packages/ui/src/components/RequestPanelHeaders.vue
+++ b/packages/ui/src/components/RequestPanelHeaders.vue
@@ -38,6 +38,8 @@
                         v-model="header.name"
                         placeholder="name"
                         :env-variables="collectionItemEnvironmentResolved"
+                        :autocompletions="tagAutocompletions"
+                        @tagClick="onTagClick"
                         :input-text-compatible="true"
                         :disabled="header.disabled"
                         :key="'header-name-' + index"
@@ -48,6 +50,8 @@
                         v-model="header.value"
                         placeholder="value"
                         :env-variables="collectionItemEnvironmentResolved"
+                        :autocompletions="tagAutocompletions"
+                        @tagClick="onTagClick"
                         :input-text-compatible="true"
                         :disabled="header.disabled"
                         :key="'header-value-' + index"
@@ -74,10 +78,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { PropType } from 'vue'
 import CodeMirrorSingleLine from './CodeMirrorSingleLine.vue'
 import { CollectionItem } from '@/global'
+import constants from '@/constants'
 
 const props = defineProps({
     collectionItem: {
@@ -90,12 +95,18 @@ const props = defineProps({
     }
 })
 
+const emit = defineEmits(['tagClick'])
+
 const isBulkEditMode = ref(false)
 const bulkEditText = ref('')
 const isConfirmingDelete = ref(false)
 // eslint-disable-next-line no-undef
 let confirmationTimeout: NodeJS.Timeout | null = null
 
+const tagAutocompletions = computed(() => {
+    return constants.AUTOCOMPLETIONS.TAGS
+})
+
 const toggleBulkEdit = () => {
     isBulkEditMode.value = !isBulkEditMode.value
     if (isBulkEditMode.value && props.collectionItem.headers) {
@@ -157,6 +168,10 @@ function pushItem(object: any, key: string, itemToPush: any) {
     }
     object[key].push(itemToPush)
 }
+
+function onTagClick(...args: any) {
+    emit('tagClick', ...args)
+}
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/components/ResponsePanel.vue b/packages/ui/src/components/ResponsePanel.vue
index 04236e8e..3507eeb1 100644
--- a/packages/ui/src/components/ResponsePanel.vue
+++ b/packages/ui/src/components/ResponsePanel.vue
@@ -58,7 +58,7 @@
                             <CodeMirrorResponsePanelPreview :model-value="responseFilter === '' ? bufferToJSONString(response.buffer) : filterXmlResponse(response.buffer, responseFilter)" @selection-changed="codeMirrorSelectionChanged" />
                         </template>
                         <template v-else-if="responseContentType.startsWith('application/json')">
-                            <CodeMirrorResponsePanelPreview :model-value="responseFilter === '' ? bufferToJSONString(response.buffer) : filterResponse(response.buffer, responseFilter)" @selection-changed="codeMirrorSelectionChanged" />
+                            <CodeMirrorResponsePanelPreview :model-value="responseFilter === '' ? bufferToJSONString(response.buffer) : filterJSONResponse(response.buffer, responseFilter)" @selection-changed="codeMirrorSelectionChanged" />
                         </template>
                         <template v-else>
                             <CodeMirrorResponsePanelPreview :model-value="bufferToJSONString(response.buffer)" @selection-changed="codeMirrorSelectionChanged" />
@@ -66,7 +66,7 @@
                     </template>
                     <div class="content-box" v-else>
                         <div style="white-space: pre-line;">{{ response.error }}</div>
-                        <div style="margin-top: 1.5rem; word-break: break-word;" v-if="response.error !== 'Error: Invalid URL' && response.error !== 'Error: Request Cancelled' && response.error.startsWith('Error in Plugin ') === false">
+                        <div style="margin-top: 1.5rem; word-break: break-word;" v-if="response.error === 'Error: Request failed'">
                             <div style="margin-bottom: 0.5rem">Possible causes for this error:</div>
                             <div style="margin-left: 0.5rem; margin-bottom: 0.4rem; line-height: 1rem;">1) Given request URL is incorrect or invalid</div>
                             <div style="margin-left: 0.5rem; margin-bottom: 0.4rem; line-height: 1rem;">2) The server for the url isn't returning a valid response for the created request</div>
@@ -161,7 +161,7 @@
     <ResponseFilteringHelpModal v-model:showModal="showResponseFilteringHelpModal" v-model:is-xml="isXmlResponse"></ResponseFilteringHelpModal>
 </template>
 
-<script>
+<script lang="ts">
 import { nextTick, toRaw } from 'vue'
 import CodeMirrorResponsePanelPreview from './CodeMirrorResponsePanelPreview.vue'
 import ContextMenu from './ContextMenu.vue'
@@ -176,15 +176,17 @@ import {
     setEnvironmentVariable,
     getAlertConfirmPromptContainer,
     getStatusText,
-    bufferToString,
     timeAgo,
     responseStatusColorMapping,
-    jsonStringify,
 } from '@/helpers'
+import {
+    bufferToJSONString,
+    filterJSONResponse,
+    filterXmlResponse,
+    getResponseContentType,
+} from '@/utils/response'
 import { emitter } from '@/event-bus'
-import {JSONPath} from 'jsonpath-plus'
 import ResponseFilteringHelpModal from '@/components/modals/ResponseFilteringHelpModal.vue'
-import xpath from 'xpath'
 import constants from '@/constants'
 
 export default {
@@ -392,17 +394,7 @@ export default {
             }
         },
         responseContentType() {
-            if(!this.response || this.response.headers === undefined) {
-                return ''
-            }
-
-            const contentTypeHeader = this.response.headers.find(header => header[0].toLowerCase() === 'content-type')
-
-            if(contentTypeHeader) {
-                return contentTypeHeader[1]
-            }
-
-            return ''
+            return getResponseContentType(this.response)
         },
         passedTestCases() {
             if(this.response && 'testResults' in this.response) {
@@ -438,45 +430,9 @@ export default {
     },
     methods: {
         timeAgo,
-        filterResponse(buffer, jsonPath) {
-            try {
-                const responseData = JSON.parse(this.bufferToJSONString(buffer))
-                const filteredData = JSONPath({ json: responseData, path: jsonPath })
-                return JSON.stringify(filteredData, null, 2)
-            } catch (e) {
-                console.log(`Could not filter response due to ${e.message}`)
-                return this.bufferToJSONString(buffer)
-            }
-
-        },
-        filterXmlResponse(buffer, query) {
-            try {
-                const doc = new DOMParser().parseFromString(this.bufferToString(buffer), 'text/xml')
-                const result = xpath.evaluate(query, doc, null, xpath.XPathResult.ANY_TYPE, null)
-                const nodes = []
-                let node = result.iterateNext()
-                while (node) {
-                    nodes.push(new XMLSerializer().serializeToString(node))
-                    node = result.iterateNext()
-                }
-                return nodes.join('\n')
-            } catch (error) {
-                console.error('Error filtering XML:', error.message)
-                return this.bufferToString(buffer)
-            }
-        },
         cancelRequest() {
             this.requestAbortController.abort()
         },
-        bufferToString,
-        bufferToJSONString(buffer) {
-            const responseText = this.bufferToString(buffer)
-            try {
-                return jsonStringify(JSON.parse(responseText))
-            } catch {
-                return responseText
-            }
-        },
         dateFormat,
         humanFriendlyTime,
         humanFriendlySize,
@@ -634,7 +590,10 @@ export default {
                     value: item
                 }
             })
-        }
+        },
+        bufferToJSONString,
+        filterJSONResponse,
+        filterXmlResponse,
     },
     activated() {
         if(this.response && this.scrollableAreaEventListenerAttached && this.scrollableAreaScrollTop !== null) {
diff --git a/packages/ui/src/components/ResponsePanelTimeline.vue b/packages/ui/src/components/ResponsePanelTimeline.vue
index 93f6b096..6c520629 100644
--- a/packages/ui/src/components/ResponsePanelTimeline.vue
+++ b/packages/ui/src/components/ResponsePanelTimeline.vue
@@ -8,7 +8,8 @@
 
 <script>
 import CodeMirrorResponsePanelPreview from '@/components/CodeMirrorResponsePanelPreview.vue'
-import { bufferToString, dateFormat, getStatusText, humanFriendlySize, uriParse } from '@/helpers'
+import { dateFormat, getStatusText, humanFriendlySize, uriParse } from '@/helpers'
+import { bufferToString } from '@/utils/response'
 
 export default {
     components: { CodeMirrorResponsePanelPreview },
diff --git a/packages/ui/src/components/modals/EditTagModal.vue b/packages/ui/src/components/modals/EditTagModal.vue
new file mode 100644
index 00000000..674a4e33
--- /dev/null
+++ b/packages/ui/src/components/modals/EditTagModal.vue
@@ -0,0 +1,305 @@
+<template>
+    <form @submit.prevent="updateTag" v-if="showModalComp">
+        <modal title="Edit Tag" v-model="showModalComp">
+            <div>
+                <label>
+                    <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Function</div>
+                    <select class="full-width-input" v-model="parsedFuncForEdit.functionName" required>
+                        <option v-for="availableFunction in availableFunctions" :value="availableFunction.value">{{ availableFunction.label }}</option>
+                    </select>
+                </label>
+            </div>
+
+            <div v-if="formConfig[parsedFuncForEdit.functionName as keyof typeof formConfig]">
+                <template v-for="field in formConfig[parsedFuncForEdit.functionName as keyof typeof formConfig]">
+                    <div :style="{ marginTop: '1rem' }" v-if="shouldShowField(field)">
+                        <label>
+                            <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">{{ field.label }}</div>
+
+                            <select
+                                v-if="field.type === 'select'"
+                                class="full-width-input"
+                                v-model="parsedFuncForEdit.parameters[field.property]"
+                                :required="field.required"
+                            >
+                                <option v-for="option in options[field.options]" :value="option[field.optionValue]">{{ option[field.optionLabel] }}</option>
+                            </select>
+
+                            <input
+                                v-if="field.type === 'number'"
+                                type="number"
+                                class="full-width-input"
+                                v-model="parsedFuncForEdit.parameters[field.property]"
+                                :required="field.required"
+                                min="1"
+                            >
+
+                            <input
+                                v-if="field.type === 'base64'"
+                                type="text"
+                                class="full-width-input"
+                                :value="decodeBase64(parsedFuncForEdit.parameters[field.property])"
+                                @input="encodeBase64Input($event, field.property)"
+                                :required="field.required"
+                            >
+                        </label>
+                    </div>
+                </template>
+            </div>
+
+            <div style="margin-top: 1rem">
+                <label>
+                    <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Live Preview</div>
+                    <textarea class="full-width-input" :value="preview" readonly></textarea>
+                </label>
+            </div>
+
+            <template #footer>
+                <button class="button">Save</button>
+            </template>
+        </modal>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, PropType, Ref, ref, watch } from 'vue'
+import Modal from '@/components/Modal.vue'
+import type { ParsedResult } from '@/parsers/tag'
+import { toFunctionString } from '@/parsers/tag'
+import { getCollectionForWorkspace } from '@/db'
+import { useStore } from 'vuex'
+import { flattenTree, prependParentTitleToChildTitle, sortTree, substituteEnvironmentVariables, toTree } from '@/helpers'
+import { CollectionItem } from '@/global'
+import { Base64 } from 'js-base64'
+
+const props = defineProps({
+    showModal: {
+        type: Boolean,
+        required: true
+    },
+    parsedFunc: {
+        type: Object as PropType<ParsedResult>,
+        required: true
+    },
+    updateFunc: {
+        type: Function as PropType<(updatedTag: string) => void>,
+        required: true
+    },
+    activeTab: {
+        type: Object as PropType<CollectionItem>,
+        required: true
+    },
+})
+
+const emit = defineEmits(['update:showModal'])
+
+const store = useStore()
+
+const availableFunctions = [
+    {
+        label: `Response – reference values from other request's responses`,
+        value: 'response',
+    },
+]
+
+const availableAttributes = [
+    {
+        label: 'Body – value of response body',
+        value: 'body',
+    },
+    {
+        label: 'Raw Body – entire response body',
+        value: 'raw',
+    },
+    {
+        label: 'Header – value of response header',
+        value: 'header',
+    }
+]
+
+const availableTriggerBehaviors = [
+    {
+        label: 'Never – never send request',
+        value: 'never',
+    },
+    {
+        label: 'No History – send once if there are no available responses',
+        value: 'no-history',
+    },
+    {
+        label: 'When Expired – send the request if current response is older than Max Age seconds',
+        value: 'when-expired',
+    },
+    {
+        label: 'Always – always send the request',
+        value: 'always',
+    },
+]
+
+const formConfig = {
+    response: [
+        {
+            type: 'select',
+            label: 'Request',
+            property: 'request',
+            options: 'collectionItems',
+            optionLabel: 'name',
+            optionValue: '_id',
+            required: true,
+        },
+        {
+            type: 'select',
+            label: 'Attribute',
+            property: 'attribute',
+            options: 'availableAttributes',
+            optionLabel: 'label',
+            optionValue: 'value',
+            required: true,
+            default: 'body',
+        },
+        {
+            type: 'base64',
+            label: 'JSONPath or XPath',
+            property: 'path',
+            required: true,
+            condition: 'attribute == "body"',
+        },
+        {
+            type: 'base64',
+            label: 'Header Name',
+            property: 'path',
+            required: true,
+            condition: 'attribute == "header"',
+        },
+        {
+            type: 'select',
+            label: 'Trigger Behavior',
+            property: 'behavior',
+            options: 'availableTriggerBehaviors',
+            optionLabel: 'label',
+            optionValue: 'value',
+            required: true,
+            default: 'never',
+        },
+        {
+            type: 'number',
+            label: 'Max Age (seconds)',
+            property: 'maxAge',
+            condition: 'behavior == "when-expired"',
+            required: true,
+            default: 60,
+        }
+    ]
+}
+
+const showModalComp = ref(props.showModal)
+
+const collectionItems: Ref<CollectionItem[]> = ref([])
+
+const preview = ref('')
+
+const parsedFuncForEdit = ref(JSON.parse(JSON.stringify(props.parsedFunc)))
+fillDefaultValues()
+generatePreview()
+
+const options = computed(() => {
+    return {
+        collectionItems: collectionItems.value,
+        availableFunctions: availableFunctions,
+        availableAttributes: availableAttributes,
+        availableTriggerBehaviors: availableTriggerBehaviors,
+    }
+})
+
+watch(() => props.showModal, (newVal) => {
+    showModalComp.value = newVal
+    if (newVal) {
+        parsedFuncForEdit.value = JSON.parse(JSON.stringify(props.parsedFunc))
+        fillDefaultValues()
+        generatePreview()
+        getAllRequests()
+    }
+})
+
+watch(() => parsedFuncForEdit.value, () => {
+    generatePreview()
+}, { deep: true })
+
+watch(showModalComp, (newVal) => {
+    emit('update:showModal', newVal)
+})
+
+function updateTag() {
+    props.updateFunc(toFunctionString(parsedFuncForEdit.value))
+    showModalComp.value = false
+}
+
+async function getAllRequests() {
+    let { collection } = await getCollectionForWorkspace(store.state.activeWorkspace._id)
+    collection = toTree(collection)
+    sortTree(collection)
+    prependParentTitleToChildTitle(collection)
+    collection = flattenTree(collection)
+
+    collection = collection.filter((item) => item._type === 'request' && item._id !== props.activeTab._id)
+
+    collectionItems.value = collection
+}
+
+function decodeBase64(input: string) {
+    if (input === undefined) {
+        return ''
+    }
+
+    if (input.startsWith('b64::')) {
+        return Base64.decode(input.slice(5))
+    }
+
+    return input
+}
+
+function encodeBase64Input(event: InputEvent, key: string) {
+    const target = event.target as HTMLInputElement
+    parsedFuncForEdit.value.parameters[key] = 'b64::' + Base64.encode(target.value, true)
+}
+
+function shouldShowField(field: any) {
+    if (!field.condition) {
+        return true
+    }
+
+    const condition = field.condition
+    const [property, operator, value] = condition.split(' ')
+
+    if (operator === '==') {
+        const isString = value.startsWith('"') && value.endsWith('"')
+
+        if (isString) {
+            return parsedFuncForEdit.value.parameters[property] === value.slice(1, -1)
+        } else {
+            return parsedFuncForEdit.value.parameters[property] === value
+        }
+    }
+
+    return true
+}
+
+function fillDefaultValues() {
+    for (const field of formConfig[parsedFuncForEdit.value.functionName as keyof typeof formConfig]) {
+        if (field.default && !parsedFuncForEdit.value.parameters[field.property]) {
+            parsedFuncForEdit.value.parameters[field.property] = field.default
+        }
+    }
+}
+
+async function generatePreview() {
+    preview.value = await substituteEnvironmentVariables({}, `{% ${toFunctionString(parsedFuncForEdit.value)} %}`, {
+        tagTrigger: false,
+        noError: true,
+    })
+}
+
+onBeforeMount(() => {
+    getAllRequests()
+})
+</script>
diff --git a/packages/ui/src/components/modals/formConfig.json b/packages/ui/src/components/modals/formConfig.json
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
index 0dd037d3..5639f23e 100644
--- a/packages/ui/src/constants.ts
+++ b/packages/ui/src/constants.ts
@@ -227,7 +227,15 @@ export default {
                     info: 'Returns the response body as a parsed JSON object'
                 }
             ],
-        }
+        },
+        TAGS: [
+            {
+                label: 'response()',
+                type: 'function',
+                info: 'Response Tag',
+                apply: snippet('{% response() %}')
+            }
+        ],
     },
     MIME_TYPE: {
         FORM_URL_ENCODED: 'application/x-www-form-urlencoded',
diff --git a/packages/ui/src/global.d.ts b/packages/ui/src/global.d.ts
index c66555d6..7941c19a 100644
--- a/packages/ui/src/global.d.ts
+++ b/packages/ui/src/global.d.ts
@@ -11,7 +11,8 @@ declare global {
 
     interface ImportMeta {
         env: {
-            MODE: string
+            MODE: string,
+            PROD: boolean,
         }
     }
 }
diff --git a/packages/ui/src/helpers.spec.ts b/packages/ui/src/helpers.spec.ts
index e4b14761..cb2c630d 100644
--- a/packages/ui/src/helpers.spec.ts
+++ b/packages/ui/src/helpers.spec.ts
@@ -1,3 +1,5 @@
+// @vitest-environment edge-runtime
+
 import { assert, test, describe } from 'vitest'
 import {
     substituteEnvironmentVariables,
@@ -32,7 +34,7 @@ describe(`Function: ${substituteEnvironmentVariables.name}`, () => {
     const extremelyMessyKey = 'extremelyMESSY-K_E_Y ~!@#$%^&*()_+12 34567980{{} :>}notReplaced::{{  num }}::notReplaced"?<, . shouldReplaceThisInFuture::{{  num   }}::replaced /;\'[ ]'
     env[ extremelyMessyKey ] = 'Very messy key :)'
 
-    test('Positive Case', () => {
+    test('Positive Case', async() => {
         const input = `{
             "i": {{i}},
             "_i": {{ i }},
@@ -113,11 +115,11 @@ describe(`Function: ${substituteEnvironmentVariables.name}`, () => {
 
             "messyKey": "${env[extremelyMessyKey]}",
         }`
-        assert.equal(substituteEnvironmentVariables(env, input), expectedOutput)
+        assert.equal(await substituteEnvironmentVariables(env, input), expectedOutput)
 
     })
 
-    test('Negative Case', () => {
+    test('Negative Case', async() => {
         const input = `{
             "": "",
             "{": "}",
@@ -212,12 +214,12 @@ describe(`Function: ${substituteEnvironmentVariables.name}`, () => {
             "str": {{ s t r }},
         }`
 
-        assert.equal(substituteEnvironmentVariables(env, input), input)
-        assert.equal(substituteEnvironmentVariables(env, extraForRegExSpecific), extraForRegExSpecific)
+        assert.equal(await substituteEnvironmentVariables(env, input), input)
+        assert.equal(await substituteEnvironmentVariables(env, extraForRegExSpecific), extraForRegExSpecific)
 
     })
 
-    test('Insomnia support', () => {
+    test('Insomnia support', async() => {
         const input = `{
             "num": {{_.num}},
             "_num": {{ _.num }},
@@ -258,10 +260,10 @@ describe(`Function: ${substituteEnvironmentVariables.name}`, () => {
 
             "messyKey": "${env[extremelyMessyKey]}",
         }`
-        assert.equal(substituteEnvironmentVariables(env, input), expectedOutput)
+        assert.equal(await substituteEnvironmentVariables(env, input), expectedOutput)
     })
 
-    test('Insomnia support will not be used if "_" is present as a key in "environment"', () => {
+    test('Insomnia support will not be used if "_" is present as a key in "environment"', async() => {
         env._ = { someKey: '"_" will be used treated as the key, if its present in the env' }
 
         const input = `{
@@ -286,7 +288,7 @@ describe(`Function: ${substituteEnvironmentVariables.name}`, () => {
             "_.someKey": {{ _.someKey  }},
             "_.someKey": {{  _.someKey  }},
         }`
-        assert.equal(substituteEnvironmentVariables(env, input), expectedOutput)
+        assert.equal(await substituteEnvironmentVariables(env, input), expectedOutput)
     })
 })
 
diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
index a49fa937..910df972 100644
--- a/packages/ui/src/helpers.ts
+++ b/packages/ui/src/helpers.ts
@@ -24,6 +24,7 @@ import {
 import { ActionContext } from 'vuex'
 import { version } from '../../electron/package.json'
 import constants from '@/constants'
+import { handleTags } from '@/utils/tag'
 
 // From: https://stackoverflow.com/a/67802481/4932305
 export function toTree(array: CollectionItem[]): CollectionItem[] {
@@ -68,7 +69,13 @@ export function flattenTree(array: CollectionItem[]) {
     return level
 }
 
-export function substituteEnvironmentVariables(environment: any, string: string) {
+export async function substituteEnvironmentVariables(
+    environment: any,
+    string: string,
+    options: { tagTrigger?: boolean, cacheId?: string, noError?: boolean } = {}
+) {
+    const { tagTrigger = true, cacheId = undefined, noError = false } = options
+
     let substitutedString = String(string)
 
     const possibleEnvironmentObjectPaths = getObjectPaths(environment)
@@ -94,6 +101,8 @@ export function substituteEnvironmentVariables(environment: any, string: string)
         substitutedString = substitutedString.replaceAll(`{{ ${objectPath} }}`, objectPathValue)
     })
 
+    substitutedString = await handleTags(substitutedString, tagTrigger, cacheId, noError)
+
     return substitutedString
 }
 
@@ -310,8 +319,10 @@ export async function createRequestData(
     plugins: Plugin[],
     workspaceLocation: string | null
 ): Promise<CreateRequestDataReturn> {
+    const cacheId = nanoid()
+
     for(const plugin of plugins) {
-        const { expose } = createRequestContextForPlugin(request, environment, setEnvironmentVariable, state.testResults)
+        const { expose } = await createRequestContextForPlugin(cacheId, request, environment, setEnvironmentVariable, state.testResults)
 
         state.currentPlugin = plugin.type === 'script' ? 'Script: Pre Request' : `${plugin.name} (Pre Request)`
 
@@ -331,14 +342,15 @@ export async function createRequestData(
 
     let body: any = null
 
-    if(request.body && request.body.mimeType === 'application/x-www-form-urlencoded') {
-        if('params' in request.body && request.body.params) {
-            const formParams = request.body.params.filter(item => !item.disabled).reduce((acc, item) => {
-                const name = substituteEnvironmentVariables(environment, item.name)
-                const value = substituteEnvironmentVariables(environment, item.value)
-                acc.append(name, value)
-                return acc
-            }, new URLSearchParams())
+    if (request.body && request.body.mimeType === 'application/x-www-form-urlencoded') {
+        if ('params' in request.body && request.body.params) {
+            const formParams = new URLSearchParams()
+
+            for (const item of request.body.params.filter(item => !item.disabled)) {
+                const name = await substituteEnvironmentVariables(environment, item.name, { cacheId })
+                const value = await substituteEnvironmentVariables(environment, item.value, { cacheId })
+                formParams.append(name, value)
+            }
 
             body = formParams.toString()
         }
@@ -348,21 +360,29 @@ export async function createRequestData(
         if(request.body.mimeType === 'multipart/form-data') {
             if('params' in request.body) {
                 const formData = new FormData()
-                request.body.params?.filter(item => !item.disabled).forEach(param => {
-                    if(param.type === 'text') {
-                        formData.append(substituteEnvironmentVariables(environment, param.name), substituteEnvironmentVariables(environment, param.value))
-                    } else if (param.files) {
-                        for(const file of param.files) {
-                            formData.append(substituteEnvironmentVariables(environment, param.name), file as File)
+                if (request.body.params) {
+                    for (const param of request.body.params.filter(item => !item.disabled)) {
+                        if (param.type === 'text') {
+                            formData.append(
+                                await substituteEnvironmentVariables(environment, param.name, { cacheId }),
+                                await substituteEnvironmentVariables(environment, param.value, { cacheId })
+                            )
+                        } else if (param.files) {
+                            for (const file of param.files) {
+                                formData.append(
+                                    await substituteEnvironmentVariables(environment, param.name, { cacheId }),
+                                    file as File
+                                )
+                            }
                         }
                     }
-                })
+                }
                 body = formData
             }
         }
 
         if(request.body.mimeType === 'text/plain' || request.body.mimeType === 'application/json' || request.body.mimeType === 'application/graphql') {
-            body = substituteEnvironmentVariables(environment, request.body.text ?? '')
+            body = await substituteEnvironmentVariables(environment, request.body.text ?? '', { cacheId })
         }
 
         if(request.body.mimeType === 'application/octet-stream' && request.body.fileName instanceof File) {
@@ -370,16 +390,17 @@ export async function createRequestData(
         }
     }
 
-    let urlWithEnvironmentVariablesSubstituted = substituteEnvironmentVariables(environment, request.url!)
+    let urlWithEnvironmentVariablesSubstituted = await substituteEnvironmentVariables(environment, request.url!, { cacheId })
 
     if(request.pathParameters) {
-        request.pathParameters.filter(item => !item.disabled).forEach(pathParameter => {
-            urlWithEnvironmentVariablesSubstituted = urlWithEnvironmentVariablesSubstituted.replaceAll(
-                `:${substituteEnvironmentVariables(environment, pathParameter.name)}`, substituteEnvironmentVariables(environment, pathParameter.value)
-            ).replaceAll(
-                `{${substituteEnvironmentVariables(environment, pathParameter.name)}}`, substituteEnvironmentVariables(environment, pathParameter.value)
-            )
-        })
+        for (const pathParameter of request.pathParameters.filter(item => !item.disabled)) {
+            const paramName = await substituteEnvironmentVariables(environment, pathParameter.name, { cacheId })
+            const paramValue = await substituteEnvironmentVariables(environment, pathParameter.value, { cacheId })
+
+            urlWithEnvironmentVariablesSubstituted = urlWithEnvironmentVariablesSubstituted
+                .replaceAll(`:${paramName}`, paramValue)
+                .replaceAll(`{${paramName}}`, paramValue)
+        }
     }
 
     const url = new URL(urlWithEnvironmentVariablesSubstituted)
@@ -387,22 +408,22 @@ export async function createRequestData(
     if('parameters' in request && request.parameters) {
         url.search = ''
 
-        request.parameters.filter(item => !item.disabled).forEach(param => {
-            const paramName = substituteEnvironmentVariables(environment, param.name)
-            const paramValue = substituteEnvironmentVariables(environment, param.value)
+        for (const param of request.parameters.filter(item => !item.disabled)) {
+            const paramName = await substituteEnvironmentVariables(environment, param.name, { cacheId })
+            const paramValue = await substituteEnvironmentVariables(environment, param.value, { cacheId })
 
             url.searchParams.append(
                 paramName,
                 decodeURIComponent(paramValue)
             )
-        })
+        }
     }
 
     const headers: Record<string, string | any> = {}
 
-    Object.keys(parentHeaders).forEach(header => {
-        headers[substituteEnvironmentVariables(environment, header.toLowerCase())] = substituteEnvironmentVariables(environment, parentHeaders[header])
-    })
+    for (const header of Object.keys(parentHeaders)) {
+        headers[await substituteEnvironmentVariables(environment, header.toLowerCase(), { cacheId })] = await substituteEnvironmentVariables(environment, parentHeaders[header], { cacheId })
+    }
 
     if('GLOBAL_HEADERS' in environment) {
         Object.keys(environment.GLOBAL_HEADERS).forEach(header => {
@@ -413,8 +434,8 @@ export async function createRequestData(
     if('headers' in request && request.headers !== undefined) {
         const enabledHeaders = request.headers.filter(header => !header.disabled)
         for(const header of enabledHeaders) {
-            const headerName = substituteEnvironmentVariables(environment, header.name.toLowerCase())
-            const headerValue = substituteEnvironmentVariables(environment, header.value)
+            const headerName = await substituteEnvironmentVariables(environment, header.name.toLowerCase(), { cacheId })
+            const headerValue = await substituteEnvironmentVariables(environment, header.value, { cacheId })
 
             if(body instanceof FormData && headerName === 'content-type') { // exclude content-type header for multipart/form-data
                 continue
@@ -426,16 +447,16 @@ export async function createRequestData(
         }
     }
 
-    const setAuthentication = (authentication: RequestAuthentication) => {
-        headers['Authorization'] = resolveAuthentication(authentication, environment)
+    const setAuthentication = async(authentication: RequestAuthentication) => {
+        headers['Authorization'] = await resolveAuthentication(cacheId, authentication, environment)
     }
 
     if(request.authentication && request.authentication.type !== 'No Auth' && !request.authentication.disabled) {
-        setAuthentication(request.authentication)
+        await setAuthentication(request.authentication)
     }
 
     if(parentAuthentication && parentAuthentication.type !== 'No Auth' && !parentAuthentication.disabled && (request.authentication === undefined || request.authentication.type === 'No Auth')) {
-        setAuthentication(parentAuthentication)
+        await setAuthentication(parentAuthentication)
     }
 
     return {
@@ -582,6 +603,10 @@ export async function handleRequest(
             if(e.message === 'Unable to parse plugin') {
                 error = `Error in Plugin "${state.currentPlugin}"${e.lineNumber !== '' ? ' at line number ' + e.lineNumber : ''}\n\n${e.originalError.name}: ${e.originalError.message}`
             }
+
+            if(e.cause === 'display-error') {
+                error = `Error: ${e.message}`
+            }
         }
 
         return {
@@ -1361,11 +1386,6 @@ export function getStatusText(statusCode: number): string {
     return constants.STATUS_CODE_TEXT_MAPPING[statusCode.toString()]
 }
 
-export function bufferToString(buffer: BufferSource) {
-    const textDecoder = new TextDecoder('utf-8')
-    return textDecoder.decode(buffer)
-}
-
 export function timeAgo(timestamp: number) {
     const now: any = new Date()
     const date: any = new Date(timestamp)
@@ -1464,18 +1484,18 @@ export async function initStoragePersistence() {
     }
 }
 
-export function resolveAuthentication(authentication: RequestAuthentication, environment: any) {
+export async function resolveAuthentication(cacheId: string, authentication: RequestAuthentication, environment: any) {
     if(authentication.type === 'basic') {
         return generateBasicAuthString(
-            substituteEnvironmentVariables(environment, authentication.username ?? ''),
-            substituteEnvironmentVariables(environment, authentication.password ?? '')
+            await substituteEnvironmentVariables(environment, authentication.username ?? '', { cacheId }),
+            await substituteEnvironmentVariables(environment, authentication.password ?? '', { cacheId })
         )
     }
 
     if(authentication.type === 'bearer') {
         const authenticationBearerPrefix = authentication.prefix !== undefined && authentication.prefix !== '' ? authentication.prefix : 'Bearer'
         const authenticationBearerToken = authentication.token !== undefined ? authentication.token : ''
-        return `${substituteEnvironmentVariables(environment, authenticationBearerPrefix)} ${substituteEnvironmentVariables(environment, authenticationBearerToken)}`
+        return `${await substituteEnvironmentVariables(environment, authenticationBearerPrefix, { cacheId })} ${await substituteEnvironmentVariables(environment, authenticationBearerToken, { cacheId })}`
     }
 }
 
diff --git a/packages/ui/src/parsers/postman.spec.ts b/packages/ui/src/parsers/postman.spec.ts
index 5e76c18b..22b581d8 100644
--- a/packages/ui/src/parsers/postman.spec.ts
+++ b/packages/ui/src/parsers/postman.spec.ts
@@ -1,3 +1,5 @@
+// @vitest-environment edge-runtime
+
 import { test, expect } from 'vitest'
 import { readFile, writeFile } from 'node:fs/promises'
 import path from 'node:path'
diff --git a/packages/ui/src/parsers/tag.spec.ts b/packages/ui/src/parsers/tag.spec.ts
new file mode 100644
index 00000000..f3cf2736
--- /dev/null
+++ b/packages/ui/src/parsers/tag.spec.ts
@@ -0,0 +1,49 @@
+import { test, expect } from 'vitest'
+import { parseFunction, toFunctionString } from './tag'
+
+const sumInput = 'sum(a=1, b=2)'
+const sumParsedResult = {
+    functionName: 'sum',
+    parameters: {
+        a: 1,
+        b: 2,
+    },
+}
+
+test('parseFunction: sum', async() => {
+    const input = sumInput
+    const expectedOutput = sumParsedResult
+    const output = parseFunction(input)
+    expect(output).toEqual(expectedOutput)
+})
+
+test('toFunctionString: sum', async() => {
+    const input = sumParsedResult
+    const expectedOutput = sumInput
+    const output = toFunctionString(input)
+    expect(output).toBe(expectedOutput)
+})
+
+const responseInput = `response(request='xyz', path='abc', behavior='always')`
+const responseParsedResult = {
+    functionName: 'response',
+    parameters: {
+        request: 'xyz',
+        path: 'abc',
+        behavior: 'always',
+    },
+}
+
+test('parseFunction: response', async() => {
+    const input = responseInput
+    const expectedOutput = responseParsedResult
+    const output = parseFunction(input)
+    expect(output).toEqual(expectedOutput)
+})
+
+test('toFunctionString: response', async() => {
+    const input = responseParsedResult
+    const expectedOutput = responseInput
+    const output = toFunctionString(input)
+    expect(output).toBe(expectedOutput)
+})
diff --git a/packages/ui/src/parsers/tag.ts b/packages/ui/src/parsers/tag.ts
new file mode 100644
index 00000000..5ec7c927
--- /dev/null
+++ b/packages/ui/src/parsers/tag.ts
@@ -0,0 +1,74 @@
+import { Base64 } from 'js-base64'
+
+export type ParsedResult = {
+    functionName: string
+    parameters: Record<string, string | number>
+}
+
+/**
+* Parses a function invocation string into a ParsedResult object.
+*
+* @param input - The function invocation string to parse.
+* @returns The parsed result as a ParsedResult object.
+*/
+export function parseFunction(input: string, decodeBase64 = false): ParsedResult {
+    const functionPattern = /^(\w+)\((.*)\)$/
+    const paramPattern = /(\w+)=('([^']*)'|(\d+))/g
+
+    const functionMatch = input.match(functionPattern)
+    if (!functionMatch) {
+        throw new Error('Input format is not valid')
+    }
+
+    const functionName = functionMatch[1]
+    const paramsPart = functionMatch[2]
+    const parameters: Record<string, string | number> = {}
+
+    let paramMatch: RegExpExecArray | null
+    while ((paramMatch = paramPattern.exec(paramsPart)) !== null) {
+        const paramName = paramMatch[1]
+
+        let paramValue: string | number
+
+        if (paramMatch[3] !== undefined) {
+            paramValue = paramMatch[3]
+
+            if (decodeBase64) {
+                if (paramValue.startsWith('b64::')) {
+                    paramValue = Base64.decode(paramValue.slice(5))
+                }
+            }
+        } else {
+            paramValue = Number(paramMatch[4])
+        }
+
+        parameters[paramName] = paramValue
+    }
+
+    return {
+        functionName,
+        parameters,
+    }
+}
+
+/**
+* Converts a ParsedResult object back into a function invocation string.
+*
+* @param parsedResult - The ParsedResult object to convert.
+* @returns The function invocation string.
+*/
+export function toFunctionString(parsedResult: ParsedResult): string {
+    const { functionName, parameters } = parsedResult
+    const paramsArray: string[] = []
+
+    for (const [key, value] of Object.entries(parameters)) {
+        if (typeof value === 'string') {
+            paramsArray.push(`${key}='${value}'`)
+        } else {
+            paramsArray.push(`${key}=${value}`)
+        }
+    }
+
+    const paramsString = paramsArray.join(', ')
+    return `${functionName}(${paramsString})`
+}
diff --git a/packages/ui/src/plugin.spec.ts b/packages/ui/src/plugin.spec.ts
index 3d80b415..d8e8bb01 100644
--- a/packages/ui/src/plugin.spec.ts
+++ b/packages/ui/src/plugin.spec.ts
@@ -3,8 +3,9 @@
 import { test, expect } from 'vitest'
 import { createRequestContextForPlugin, createResponseContextForPlugin, usePlugin } from './plugin'
 import { CollectionItem, RequestFinalResponse, RequestParam } from './global'
+import { nanoid } from 'nanoid'
 
-function createExpose({ parameters = [] }: { parameters?: RequestParam[] } = {}) {
+async function createExpose({ parameters = [] }: { parameters?: RequestParam[] } = {}) {
     const request: CollectionItem = {
         _id: 'test',
         _type: 'request',
@@ -21,7 +22,9 @@ function createExpose({ parameters = [] }: { parameters?: RequestParam[] } = {})
         testResults: []
     }
 
-    const { expose } = createRequestContextForPlugin(request, environment, setEnvironmentVariable, state.testResults)
+    const cacheId = nanoid()
+
+    const { expose } = await createRequestContextForPlugin(cacheId, request, environment, setEnvironmentVariable, state.testResults)
 
     return { expose, environment }
 }
@@ -57,7 +60,7 @@ function createResponseExpose(responseBuffer: ArrayBuffer) {
 }
 
 test('import crypto-js from esm.sh', async() => {
-    const { expose, environment } = createExpose()
+    const { expose, environment } = await createExpose()
 
     await usePlugin(expose, {
         name: 'Test Plugin',
@@ -82,7 +85,7 @@ test('import crypto-js from esm.sh', async() => {
 })
 
 test('import pako from unpkg.com', async() => {
-    const { expose, environment } = createExpose()
+    const { expose, environment } = await createExpose()
 
     const code = JSON.parse(JSON.stringify(`
         import pako from 'https://unpkg.com/pako@2.1.0/dist/pako.esm.mjs?module'
@@ -105,7 +108,7 @@ test('import pako from unpkg.com', async() => {
 test('Setting query params over existing query params', async() => {
     {
         const parameters: RequestParam[] = [{ name: 'testKey', value: 'testValue' }]
-        const { expose, environment } = createExpose({ parameters })
+        const { expose, environment } = await createExpose({ parameters })
 
         await usePlugin(expose, {
             name: 'Query Params Plugin',
@@ -127,7 +130,7 @@ test('Setting query params over existing query params', async() => {
     // tests for the case mentioned at https://github.com/flawiddsouza/Restfox/issues/110#issue-2218114329, now working:
     {
         const parameters: RequestParam[] = [{ name: 'testKey', value: 'testValue' }]
-        const { expose, environment } = createExpose({ parameters })
+        const { expose, environment } = await createExpose({ parameters })
 
         await usePlugin(expose, {
             name: 'Query Params Plugin',
diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts
index 6a433689..8e0d7b36 100644
--- a/packages/ui/src/plugin.ts
+++ b/packages/ui/src/plugin.ts
@@ -61,7 +61,7 @@ const generalContextMethodsBase = {
     },
 }
 
-export function createRequestContextForPlugin(request: CollectionItem, environment: any, setEnvironmentVariable: ((name: string, value: string) => void) | null, testResults: PluginTestResult[]): { expose: PluginExpose } {
+export async function createRequestContextForPlugin(cacheId: string, request: CollectionItem, environment: any, setEnvironmentVariable: ((name: string, value: string) => void) | null, testResults: PluginTestResult[]): Promise<{ expose: PluginExpose }> {
     const state: CollectionItem = JSON.parse(JSON.stringify(request))
 
     if(state.body === undefined) {
@@ -86,6 +86,8 @@ export function createRequestContextForPlugin(request: CollectionItem, environme
         state.body.fileName = request.body.fileName
     }
 
+    const headerCache: Record<string, string | undefined> = {}
+
     const generalContextMethods = {
         ...generalContextMethodsBase,
         getEnvVar(objectPath: string) {
@@ -98,14 +100,21 @@ export function createRequestContextForPlugin(request: CollectionItem, environme
         },
     }
 
+    if (state.headers) {
+        for (const header of state.headers) {
+            substituteEnvironmentVariables(environment, header.value, { cacheId }).then(substitutedValue => {
+                headerCache[header.name.toLowerCase()] = substitutedValue
+            })
+        }
+    }
+
+    const substitutedUrl = state.url !== undefined ? await substituteEnvironmentVariables(environment, state.url, { cacheId }) : undefined
+
     const context: PluginExposeContext = {
         ...generalContextMethods,
         request: {
             getURL() {
-                if (state.url === undefined) {
-                    return undefined
-                }
-                return substituteEnvironmentVariables(environment, state.url)
+                return substitutedUrl
             },
             getMethod() {
                 return state.method
@@ -133,7 +142,7 @@ export function createRequestContextForPlugin(request: CollectionItem, environme
                     state.headers = []
                 }
                 const header = state.headers.find((header) => header.name.toLowerCase() == headerName.toLowerCase())
-                return header ? substituteEnvironmentVariables(environment, header.value) : undefined
+                return header ? headerCache[headerName.toLowerCase()] : undefined
             },
             setHeader(headerName: string, value: string) {
                 if(state.headers === undefined) {
diff --git a/packages/ui/src/store.ts b/packages/ui/src/store.ts
index 85ce1a60..932e12ef 100644
--- a/packages/ui/src/store.ts
+++ b/packages/ui/src/store.ts
@@ -160,7 +160,7 @@ async function getEnvironmentForRequest(requestWorkspace: Workspace, requestPare
             environment[varName] = dotEnv[key]
         })
         // substitute process.env variables in workspace environment
-        environment = JSON.parse(substituteEnvironmentVariables(environment, JSON.stringify(environment)))
+        environment = JSON.parse(await substituteEnvironmentVariables(environment, JSON.stringify(environment)))
     }
 
     const headers: Record<string, string> = {}
@@ -169,7 +169,7 @@ async function getEnvironmentForRequest(requestWorkspace: Workspace, requestPare
     for(const parent of requestParentArray) {
         if(parent.environment) {
             let tempEnvironment = JSON.stringify(parent.environment)
-            tempEnvironment = substituteEnvironmentVariables(environment, tempEnvironment)
+            tempEnvironment = await substituteEnvironmentVariables(environment, tempEnvironment)
             tempEnvironment = JSON.parse(tempEnvironment)
             Object.assign(environment, tempEnvironment)
         }
@@ -305,7 +305,7 @@ async function persistActiveWorkspaceTabs(state: State) {
     })
 }
 
-const store = createStore<State>({
+export const store = createStore<State>({
     devtools: true,
     state() {
         return {
@@ -621,18 +621,6 @@ const store = createStore<State>({
                 state.plugins.workspace = state.plugins.workspace.filter(plugin => plugin._id !== pluginId)
             }
         },
-        async saveResponse(state, { workspaceId, collectionId, response }) {
-            if(response._id) {
-                const responseToSave = structuredClone(toRaw(response))
-                state.responses[collectionId].unshift(responseToSave)
-                if(state.responses[collectionId].length > constants.DEFAULT_LIMITS.RESPONSE_HISTORY) {
-                    const responsesToDelete = state.responses[collectionId].splice(constants.DEFAULT_LIMITS.RESPONSE_HISTORY)
-                    const responseIdsToDelete = responsesToDelete.map(responseItem => responseItem._id)
-                    await deleteResponsesByIds(workspaceId, responsesToDelete[0].collectionId, responseIdsToDelete)
-                }
-                await createResponse(workspaceId, structuredClone(responseToSave))
-            }
-        },
         async clearResponseHistory(state) {
             await deleteResponsesByCollectionId(state.activeTab.workspaceId, state.activeTab._id)
             state.responses[state.activeTab._id] = []
@@ -1061,6 +1049,23 @@ const store = createStore<State>({
 
             return { environment, parentHeaders, parentAuthentication, requestParentArray }
         },
+        async saveResponse(context, { workspaceId, collectionId, response }) {
+            if(response._id) {
+                const responseToSave = structuredClone(toRaw(response))
+
+                if(collectionId in context.state.responses === false) {
+                    await loadResponses(context.state, collectionId)
+                }
+
+                context.state.responses[collectionId].unshift(responseToSave)
+                if(context.state.responses[collectionId].length > constants.DEFAULT_LIMITS.RESPONSE_HISTORY) {
+                    const responsesToDelete = context.state.responses[collectionId].splice(constants.DEFAULT_LIMITS.RESPONSE_HISTORY)
+                    const responseIdsToDelete = responsesToDelete.map(responseItem => responseItem._id)
+                    await deleteResponsesByIds(workspaceId, responsesToDelete[0].collectionId, responseIdsToDelete)
+                }
+                await createResponse(workspaceId, structuredClone(responseToSave))
+            }
+        },
         async sendRequest(context, activeTab: CollectionItem) {
             if(context.state.activeWorkspace === null) {
                 throw new Error('activeWorkspace is null')
@@ -1112,11 +1117,13 @@ const store = createStore<State>({
 
             context.state.requestAbortController[activeTab._id] = new AbortController()
             const response = await handleRequest(activeTab, environment, parentHeaders, parentAuthentication, setEnvironmentVariableWrapper, enabledPlugins, context.state.activeWorkspace.location ?? null, context.state.requestAbortController[activeTab._id].signal, context.state.flags)
-            context.commit('saveResponse', {
+
+            await context.dispatch('saveResponse', {
                 workspaceId: activeTab.workspaceId,
                 collectionId: activeTab._id,
                 response
             })
+
             context.state.requestResponses[activeTab._id] = response
             context.state.requestResponseStatus[activeTab._id] = 'loaded'
         },
diff --git a/packages/ui/src/styles/main.css b/packages/ui/src/styles/main.css
index d89dec58..b49d8569 100644
--- a/packages/ui/src/styles/main.css
+++ b/packages/ui/src/styles/main.css
@@ -403,7 +403,9 @@ input:disabled {
     border: 1px solid var(--input-disabled-border-color);
 }
 
-input.full-width-input, select.full-width-input {
+input.full-width-input,
+select.full-width-input,
+textarea.full-width-input {
     width: 100%;
     border: 1px solid var(--input-border-color);
     border-radius: var(--default-border-radius);
@@ -417,6 +419,11 @@ input.full-width-input {
     background: var(--modal-background-color);
 }
 
+textarea.full-width-input {
+   resize: vertical;
+   min-height: 4rem;
+}
+
 .code-block {
     background-color: var(--background-color);
     color: var(--text-color);
@@ -554,6 +561,18 @@ button.button:hover, input[type="file"]::file-selector-button:hover {
     color: var(--invalid-env-highlight-color) !important;
 }
 
+.cm-editor .tag {
+    border-radius: 3px;
+    padding: 2px 4px;
+    background-color: #dae1ff;
+    color: black;
+    cursor: pointer;
+}
+
+.cm-editor .tag:hover {
+    background-color: #c4d1ff;
+}
+
 .cm-editor :not(.cm-focused) .cm-selectionBackground,
 .cm-editor &.cm-focused .cm-selectionBackground {
     background-color: var(--cm-selection-background-color) !important;
diff --git a/packages/ui/src/utils/generate-code.spec.ts b/packages/ui/src/utils/generate-code.spec.ts
index f7a5e798..511bc6f7 100644
--- a/packages/ui/src/utils/generate-code.spec.ts
+++ b/packages/ui/src/utils/generate-code.spec.ts
@@ -1,3 +1,5 @@
+// @vitest-environment edge-runtime
+
 import { assert, test, describe } from 'vitest'
 import { generateCode } from './generate-code'
 
diff --git a/packages/ui/src/utils/generate-code.ts b/packages/ui/src/utils/generate-code.ts
index ed03ff10..aac1abdb 100644
--- a/packages/ui/src/utils/generate-code.ts
+++ b/packages/ui/src/utils/generate-code.ts
@@ -39,27 +39,29 @@ export async function generateCode(
         }
 
         if(har.postData.mimeType === 'application/x-www-form-urlencoded') {
-            har.postData.params = har.postData.params?.map((item: RequestParam) => {
+            const params = har.postData.params?.map(async(item: RequestParam) => {
                 return {
-                    name: substituteEnvironmentVariables(environment, item.name),
-                    value: substituteEnvironmentVariables(environment, item.value)
+                    name: await substituteEnvironmentVariables(environment, item.name),
+                    value: await substituteEnvironmentVariables(environment, item.value)
                 }
             })
+
+            har.postData.params = params ? await Promise.all(params) : []
         }
 
         if(har.postData.mimeType === 'multipart/form-data') {
-            har.postData.params?.forEach(param => {
+            for(const param of har.postData.params?.filter((param: RequestParam) => !param.disabled) ?? []) {
                 if(param.type === 'text') {
-                    param.name = substituteEnvironmentVariables(environment, param.name)
-                    param.value = substituteEnvironmentVariables(environment, param.value)
+                    param.name = await substituteEnvironmentVariables(environment, param.name)
+                    param.value = await substituteEnvironmentVariables(environment, param.value)
                 } else {
-                    param.name = substituteEnvironmentVariables(environment, param.name)
+                    param.name = await substituteEnvironmentVariables(environment, param.name)
                 }
-            })
+            }
         }
 
         if(har.postData.mimeType === 'text/plain' || har.postData.mimeType === 'application/json' || har.postData.mimeType === 'application/graphql') {
-            har.postData.text = substituteEnvironmentVariables(environment, har.postData.text ?? '')
+            har.postData.text = await substituteEnvironmentVariables(environment, har.postData.text ?? '')
         }
     }
 
diff --git a/packages/ui/src/utils/query-params-sync.spec.ts b/packages/ui/src/utils/query-params-sync.spec.ts
index b7b27ecf..6222cbce 100644
--- a/packages/ui/src/utils/query-params-sync.spec.ts
+++ b/packages/ui/src/utils/query-params-sync.spec.ts
@@ -534,3 +534,21 @@ test('Path Params Sync - mac:addresses:should:not:be:treated as a path param', (
 
     assert.deepEqual(activeTab.pathParameters, [])
 })
+
+test('Path Params Sync - response tag should not be treated as a path param', () => {
+    const activeTab: CollectionItem = {
+        _id: 'test',
+        _type: 'request',
+        parentId: 'test',
+        workspaceId: 'test',
+        name: 'test',
+        url: '',
+        pathParameters: []
+    }
+
+    activeTab.url = '{% response() %}'
+
+    assert.equal(onUrlChange(activeTab), true)
+
+    assert.deepEqual(activeTab.pathParameters, [])
+})
diff --git a/packages/ui/src/utils/query-params-sync.ts b/packages/ui/src/utils/query-params-sync.ts
index 797499ea..c162f3e0 100644
--- a/packages/ui/src/utils/query-params-sync.ts
+++ b/packages/ui/src/utils/query-params-sync.ts
@@ -20,7 +20,7 @@ function newTextToNewJsonPathParams(newText: string, pathParameters: RequestPara
             const param = splitAtFirstMatch(part, ':')
 
             if(param[1] === undefined || param[1] === '') {
-                const extractedParams = /(?<!{){([^{}]+)}(?!})/.exec(param[0]) ?? ''
+                const extractedParams = /(?<!{){(?=[^%])([^{}]+)(?<!%)}(?!})/.exec(param[0]) ?? ''
                 if(extractedParams) {
                     param[1] = extractedParams[1]
                     paramType = 'openapi'
diff --git a/packages/ui/src/utils/response.ts b/packages/ui/src/utils/response.ts
new file mode 100644
index 00000000..cc7b027a
--- /dev/null
+++ b/packages/ui/src/utils/response.ts
@@ -0,0 +1,67 @@
+import { RequestFinalResponse } from '@/global'
+import { jsonStringify } from '@/helpers'
+import { JSONPath } from 'jsonpath-plus'
+import xpath from 'xpath'
+
+export function bufferToString(buffer: BufferSource) {
+    const textDecoder = new TextDecoder('utf-8')
+    return textDecoder.decode(buffer)
+}
+
+export function bufferToJSONString(buffer: BufferSource) {
+    const responseText = bufferToString(buffer)
+    try {
+        return jsonStringify(JSON.parse(responseText))
+    } catch {
+        return responseText
+    }
+}
+
+export function filterJSONResponse(buffer: BufferSource, jsonPath: string, dontStringify = false) {
+    try {
+        const responseData = JSON.parse(bufferToJSONString(buffer))
+        const filteredData = JSONPath({ json: responseData, path: jsonPath })
+
+        if (dontStringify) {
+            return filteredData
+        }
+
+        return jsonStringify(filteredData)
+    } catch (e: any) {
+        console.log(`Could not filter response due to ${e.message}`)
+        return bufferToJSONString(buffer)
+    }
+
+}
+
+export function filterXmlResponse(buffer: BufferSource, query: string) {
+    try {
+        const doc = new DOMParser().parseFromString(bufferToString(buffer), 'text/xml')
+        // @ts-expect-error - Types are incorrect
+        const result = xpath.evaluate(query, doc, null, xpath.XPathResult.ANY_TYPE, null)
+        const nodes = []
+        let node = result.iterateNext()
+        while (node) {
+            nodes.push(new XMLSerializer().serializeToString(node))
+            node = result.iterateNext()
+        }
+        return nodes.join('\n')
+    } catch (error: any) {
+        console.error('Error filtering XML:', error.message)
+        return bufferToString(buffer)
+    }
+}
+
+export function getResponseContentType(response: RequestFinalResponse) {
+    if(!response || response.headers === undefined) {
+        return ''
+    }
+
+    const contentTypeHeader = response.headers.find(header => header[0].toLowerCase() === 'content-type')
+
+    if(contentTypeHeader) {
+        return contentTypeHeader[1]
+    }
+
+    return ''
+}
diff --git a/packages/ui/src/utils/tag.ts b/packages/ui/src/utils/tag.ts
new file mode 100644
index 00000000..62883e36
--- /dev/null
+++ b/packages/ui/src/utils/tag.ts
@@ -0,0 +1,163 @@
+import * as tagParser from '@/parsers/tag'
+import { store } from '@/store'
+import { getResponsesByCollectionId } from '@/db'
+import { bufferToString, filterJSONResponse, filterXmlResponse, getResponseContentType } from './response'
+import { RequestFinalResponse } from '@/global'
+import { jsonStringify } from '@/helpers'
+
+const cache = new Map<string, any>()
+
+async function getResponseForRequest(
+    collectionId: string,
+    tagTrigger: boolean,
+    behavior: 'never' | 'no-history' | 'when-expired' | 'always',
+    maxAgeInSeconds: number,
+    noError: boolean,
+) {
+    const request = store.state.collection.find(collectionItem => collectionItem._id === collectionId)
+
+    if (!request) {
+        if (noError) {
+            return undefined
+        }
+
+        throw new Error(`Request with ID ${collectionId} not found`)
+    }
+
+    if (!tagTrigger) {
+        behavior = 'never'
+    }
+
+    if (behavior === 'always') {
+        // send request
+        await store.dispatch('sendRequest', request)
+    }
+
+    let responses = await getResponsesByCollectionId(request.workspaceId, collectionId)
+    let latestResponse = responses[0]
+
+    let refetchResponses = false
+
+    if (behavior === 'no-history' && responses.length === 0) {
+        // send request
+        refetchResponses = true
+    }
+
+    if (behavior === 'when-expired') {
+        if (!latestResponse) {
+            // send request
+            refetchResponses = true
+        } else {
+            const now = new Date().getTime()
+            const responseTime = new Date(latestResponse.createdAt).getTime()
+            const age = now - responseTime
+
+            if (age > (maxAgeInSeconds * 1000)) {
+                // send request
+                refetchResponses = true
+            }
+        }
+    }
+
+    if (refetchResponses) {
+        await store.dispatch('sendRequest', request)
+        responses = await getResponsesByCollectionId(request.workspaceId, collectionId)
+        latestResponse = responses[responses.length - 1]
+    }
+
+    return latestResponse
+}
+
+async function handleResponseTag(parsedTag: tagParser.ParsedResult, tagTrigger: boolean, cacheId: string | undefined, noError: boolean) {
+    let returnValue = undefined
+
+    const cacheKey = cacheId + JSON.stringify(parsedTag)
+
+    let response: RequestFinalResponse | undefined
+
+    if (cacheId && cache.has(cacheKey)) {
+        response = cache.get(cacheKey)
+    } else {
+        response = await getResponseForRequest(
+            parsedTag.parameters.request as string,
+            tagTrigger,
+            parsedTag.parameters.behavior as 'never' | 'no-history' | 'when-expired' | 'always',
+            parsedTag.parameters.maxAge as number,
+            noError,
+        )
+    }
+
+    if (cacheId) {
+        cache.set(cacheKey, response)
+    }
+
+    if (response) {
+        if (parsedTag.parameters.attribute === 'body') {
+            const contentType = getResponseContentType(response)
+
+            if (contentType === 'application/json') {
+                returnValue = filterJSONResponse(response.buffer, parsedTag.parameters.path as string, true)
+
+                if (returnValue.length === 1) {
+                    returnValue = returnValue[0]
+                }
+
+                if (typeof returnValue === 'object') {
+                    returnValue = jsonStringify(returnValue)
+                }
+            }
+
+            if (contentType === 'application/xml') {
+                returnValue = filterXmlResponse(response.buffer, parsedTag.parameters.query as string)
+            }
+        }
+
+        if (parsedTag.parameters.attribute === 'raw') {
+            returnValue = bufferToString(response.buffer)
+        }
+
+        if (parsedTag.parameters.attribute === 'header') {
+            const headerNameToFind = parsedTag.parameters.path as string
+            returnValue = response.headers.find(header => header[0].toLowerCase() === headerNameToFind.toLowerCase())?.[1]
+        }
+    }
+
+    return returnValue
+}
+
+export async function handleTags(string: string, tagTrigger: boolean, cacheId: string | undefined, noError: boolean) {
+    const regex = /{% (.+?) %}/g
+    const matches = [...string.matchAll(regex)]
+
+    for(const match of matches) {
+        const fullMatch = match[0]
+        const start = match.index!
+        const end = start + fullMatch.length
+
+        // console.log(`Match: ${fullMatch}, Start: ${start}, End: ${end}`)
+
+        const parsedTag = tagParser.parseFunction(match[1], true)
+
+        let replacement = undefined
+
+        if (parsedTag.functionName === 'response') {
+            replacement = await handleResponseTag(parsedTag, tagTrigger, cacheId, noError)
+        }
+
+        if (replacement === undefined) {
+            if (noError) {
+                replacement = '<no value found>'
+            } else {
+                const at = `${string.slice(0, start)}━>${parsedTag.functionName}(...)<━${string.slice(end)}`
+
+                throw new Error(`Could not resolve tag\n\n${tagParser.toFunctionString(parsedTag)}\n\nat ${at}`, {
+                    cause: 'display-error'
+                })
+            }
+        }
+
+        string = string.slice(0, start) + replacement + string.slice(end)
+    }
+
+    return string
+}