diff --git a/packages/insomnia-app/app/ui/components/templating/variable-editor.js b/packages/insomnia-app/app/ui/components/templating/variable-editor.js
index f500d724e..b325e0760 100644
--- a/packages/insomnia-app/app/ui/components/templating/variable-editor.js
+++ b/packages/insomnia-app/app/ui/components/templating/variable-editor.js
@@ -6,7 +6,7 @@ import autobind from 'autobind-decorator';
 class VariableEditor extends PureComponent {
   constructor(props) {
     super(props);
-
+    this.textAreaRef = React.createRef();
     const inner = props.defaultValue.replace(/\s*}}$/, '').replace(/^{{\s*/, '');
 
     this.state = {
@@ -19,6 +19,11 @@ class VariableEditor extends PureComponent {
 
   componentDidMount() {
     this._update(this.state.value, true);
+    this._resize();
+  }
+
+  componentDidUpdate() {
+    this._resize();
   }
 
   _handleChange(e) {
@@ -26,6 +31,14 @@ class VariableEditor extends PureComponent {
     this._update(name);
   }
 
+  _resize() {
+    setTimeout(() => {
+      const element = this.textAreaRef.current;
+      element.style.cssText = 'height: auto, padding: 0';
+      element.style.cssText = `height:${element.scrollHeight}px`;
+    }, 100);
+  }
+
   _setSelectRef(n) {
     this._select = n;
 
@@ -95,7 +108,7 @@ class VariableEditor extends PureComponent {
             {error ? (
               <textarea className="danger" value={error || 'Error'} readOnly />
             ) : (
-              <textarea value={preview || ''} readOnly />
+              <textarea ref={this.textAreaRef} value={preview || ''} readOnly />
             )}
           </label>
         </div>