diff --git a/components/history.vue b/components/history.vue
index d32faa51..9a2dbf43 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -12,6 +12,7 @@
       </li>
     </ul>
     <ul>
+      <li style="max-width: 44px"></li>
       <li @click="sort_by_label()">
         <label class="flex-wrap">
           Label
@@ -50,6 +51,12 @@
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+        <li style="width: 44px">
+          <button v-if="entry.usesScripts"
+            v-tooltip="'This entry used pre-request scripts.'"
+            class="icon"
+          ><i class="material-icons" style="z-index: 10050;">code</i></button>
+        </li>
         <li>
           <input
             aria-label="Label"
diff --git a/functions/preRequest.js b/functions/preRequest.js
new file mode 100644
index 00000000..eed6fd82
--- /dev/null
+++ b/functions/preRequest.js
@@ -0,0 +1,17 @@
+export default function getEnvironmentVariablesFromScript(script) {
+  let _variables = {};
+
+  // the pw object is the proxy by which pre-request scripts can pass variables to the request.
+  // for security and control purposes, this is the only way a pre-request script should modify variables.
+  let pw = {
+    environment: {
+      set: (key, value) => _variables[key] = value,
+    },
+    // globals that the script is allowed to have access to.
+  };
+
+  // run pre-request script within this function so that it has access to the pw object.
+  (new Function('pw', script))(pw);
+
+  return _variables;
+}
diff --git a/functions/templating.js b/functions/templating.js
new file mode 100644
index 00000000..68a69d61
--- /dev/null
+++ b/functions/templating.js
@@ -0,0 +1,7 @@
+export default function parseTemplateString(string, variables) {
+    if(!variables || !string) {
+      return string;
+    }
+    const searchTerm = /<<([^>]*)>>/g; // "<<myVariable>>"
+    return string.replace(searchTerm, (match, p1) => variables[p1] || '');
+}
diff --git a/pages/index.vue b/pages/index.vue
index 5df34eae..0d028bfa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,6 +5,7 @@
       v-on:hide-model="hideRequestModal"
       v-bind:editing-request="editRequest"
     ></save-request-as>
+
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -39,6 +40,10 @@
       </div>
     </pw-modal>
 
+    <pw-section v-if="showPreRequestScript" class="orange" icon="code" label="Pre-Request • β (experimental)" ref="preRequest">
+      <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="rawParams" spellcheck="false"></textarea>
+    </pw-section>
+
     <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
       <ul>
         <li>
@@ -198,8 +203,17 @@
             :disabled="!isValidURL"
             v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code'}"
           >
-            <i class="material-icons" v-if="isHidden">visibility</i>
-            <i class="material-icons" v-if="!isHidden">visibility_off</i>
+            <i class="material-icons" v-if="isHidden">flash_on</i>
+            <i class="material-icons" v-if="!isHidden">flash_off</i>
+          </button>
+          <button
+            :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+            id="preRequestScriptButton"
+            v-tooltip.bottom="{ content: !showPreRequestScript ? 'Show Pre-Request Script' : 'Hide Pre-Request Script'}"
+            @click="showPreRequestScript = !showPreRequestScript"
+          >
+            <i class="material-icons" :class="showPreRequestScript" v-if="!showPreRequestScript">code</i>
+            <i class="material-icons" :class="showPreRequestScript" v-if="showPreRequestScript">close</i>
           </button>
         </div>
         <div style="text-align: center;">
@@ -229,7 +243,8 @@
         </div>
       </div>
     </pw-section>
-    <pw-section class="yellow" icon="code" label="Code" ref="requestCode" v-if="!isHidden">
+
+    <pw-section class="yellow" icon="flash_on" label="Code" ref="requestCode" v-if="!isHidden">
       <ul>
         <li>
           <label for="requestType">Request Type</label>
@@ -540,6 +555,8 @@ import saveRequestAs from "../components/collections/saveRequestAs";
 import parseCurlCommand from "../assets/js/curlparser.js";
 import hljs from "highlight.js";
 import "highlight.js/styles/dracula.css";
+import getEnvironmentVariablesFromScript from "../functions/preRequest";
+import parseTemplateString from '../functions/templating'
 
 const statusCategories = [
   {
@@ -608,6 +625,8 @@ export default {
   data () {
     return {
       showModal: false,
+      showPreRequestScript: false,
+      preRequestScript: '',
       copyButton: '<i class="material-icons">file_copy</i>',
       copiedButton: '<i class="material-icons">done</i>',
       isHidden: true,
@@ -816,6 +835,10 @@ export default {
       return findStatusGroup(this.response.status);
     },
     isValidURL() {
+      if (this.showPreRequestScript) {
+        // we cannot determine if a URL is valid because the full string is not known ahead of time
+        return true;
+      }
       const protocol = "^(https?:\\/\\/)?";
       const validIP = new RegExp(
         protocol +
@@ -1017,7 +1040,13 @@ export default {
         behavior: "smooth"
       });
     },
-    async makeRequest(auth, headers, requestBody) {
+    getVariablesFromPreRequestScript() {
+      if(!this.preRequestScript) {
+        return {};
+      }
+      return getEnvironmentVariablesFromScript(this.preRequestScript);
+    },
+    async makeRequest(auth, headers, requestBody, preRequestScript) {
       const requestOptions = {
         method: this.method,
         url: this.url + this.pathName + this.queryString,
@@ -1025,7 +1054,21 @@ export default {
         headers,
         data: requestBody ? requestBody.toString() : null
       };
+      if (preRequestScript) {
+        const environmentVariables = getEnvironmentVariablesFromScript(preRequestScript);
+        requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables);
+        requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables);
+        for (let k in requestOptions.headers) {
+          const kParsed = parseTemplateString(k, environmentVariables);
+          const valParsed = parseTemplateString(requestOptions.headers[k], environmentVariables);
+          delete requestOptions.headers[k];
+          requestOptions.headers[kParsed] = valParsed;
+        }
 
+      }
+      if (typeof requestOptions.data === 'string') {
+        requestOptions.data = parseTemplateString(requestOptions.data);
+      }
       const config = this.$store.state.postwoman.settings.PROXY_ENABLED
         ? {
             method: "POST",
@@ -1114,7 +1157,7 @@ export default {
       try {
         const startTime = Date.now();
 
-        const payload = await this.makeRequest(auth, headers, requestBody);
+        const payload = await this.makeRequest(auth, headers, requestBody, this.showPreRequestScript && this.preRequestScript);
 
         const duration = Date.now() - startTime;
         this.$toast.info(`Finished in ${duration}ms`, {
@@ -1139,7 +1182,8 @@ export default {
             time,
             method: this.method,
             url: this.url,
-            path: this.path
+            path: this.path,
+            usesScripts: Boolean(this.preRequestScript)
           };
           this.$refs.historyComponent.addEntry(entry);
         })();
@@ -1158,7 +1202,8 @@ export default {
             time: new Date().toLocaleTimeString(),
             method: this.method,
             url: this.url,
-            path: this.path
+            path: this.path,
+            usesScripts: Boolean(this.preRequestScript)
           };
           this.$refs.historyComponent.addEntry(entry);
           return;