diff --git a/src/htmx.js b/src/htmx.js
index 73585d8ab..ad1549d56 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -3724,7 +3724,8 @@ var htmx = (function() {
         str = str.substr(3)
         evaluateValue = true
       }
-      if (str.indexOf('{') !== 0) {
+      var needsBraces = ((!evaluateValue || attr === 'hx-vars') && str.indexOf('{') !== 0)
+      if (needsBraces) {
         str = '{' + str + '}'
       }
       let varsValues
diff --git a/test/attributes/hx-headers.js b/test/attributes/hx-headers.js
index b6b3f095b..748d9d3bf 100644
--- a/test/attributes/hx-headers.js
+++ b/test/attributes/hx-headers.js
@@ -83,7 +83,7 @@ describe('hx-headers attribute', function() {
       xhr.requestHeaders.i1.should.equal('test')
       xhr.respond(200, {}, 'Clicked!')
     })
-    var div = make('<div hx-post="/vars" hx-headers="javascript:i1:\'test\'"></div>')
+    var div = make('<div hx-post="/vars" hx-headers="javascript:(function(){return {i1: \'test\'}})()"></div>')
     div.click()
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
@@ -106,7 +106,7 @@ describe('hx-headers attribute', function() {
       xhr.requestHeaders.v2.should.equal('42')
       xhr.respond(200, {}, 'Clicked!')
     })
-    var div = make('<div hx-post="/vars" hx-headers="javascript:v1:\'test\', v2:42"></div>')
+    var div = make('<div hx-post="/vars" hx-headers="javascript:{v1: (function(){return \'test\'})(), v2: (function(){return 42})()}"></div>')
     div.click()
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
@@ -117,7 +117,7 @@ describe('hx-headers attribute', function() {
       xhr.requestHeaders.i1.should.equal('test')
       xhr.respond(200, {}, 'Clicked!')
     })
-    make('<div hx-headers="javascript:i1:\'test\'"><div id="d1" hx-post="/vars"></div></div>')
+    make('<div hx-headers="javascript:{i1:\'test\'}"><div id="d1" hx-post="/vars"></div></div>')
     var div = byId('d1')
     div.click()
     this.server.respond()
@@ -129,7 +129,7 @@ describe('hx-headers attribute', function() {
       xhr.requestHeaders.i1.should.equal('best')
       xhr.respond(200, {}, 'Clicked!')
     })
-    make('<div hx-headers="javascript:i1:\'test\'"><div id="d1" hx-headers="javascript:i1:\'best\'" hx-post="/vars"></div></div>')
+    make('<div hx-headers="javascript:{i1:\'test\'}"><div id="d1" hx-headers="javascript:{i1:\'best\'}" hx-post="/vars"></div></div>')
     var div = byId('d1')
     div.click()
     this.server.respond()
@@ -141,7 +141,7 @@ describe('hx-headers attribute', function() {
       xhr.requestHeaders.i1.should.equal('best')
       xhr.respond(200, {}, 'Clicked!')
     })
-    var div = make('<div hx-target="this"><input hx-post="/include" hx-headers="javascript:i1:\'best\'" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
+    var div = make('<div hx-target="this"><input hx-post="/include" hx-headers="javascript:{i1:\'best\'}" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
     var input = byId('i1')
     input.click()
     this.server.respond()
diff --git a/test/attributes/hx-vals.js b/test/attributes/hx-vals.js
index b2399647f..84ed1b7d4 100644
--- a/test/attributes/hx-vals.js
+++ b/test/attributes/hx-vals.js
@@ -102,7 +102,7 @@ describe('hx-vals attribute', function() {
       params.i1.should.equal('test')
       xhr.respond(200, {}, 'Clicked!')
     })
-    var div = make('<div hx-post="/vars" hx-vals="javascript:i1:\'test\'"></div>')
+    var div = make('<div hx-post="/vars" hx-vals="javascript:(function(){return {i1: \'test\'}})()"></div>')
     div.click()
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
@@ -127,7 +127,7 @@ describe('hx-vals attribute', function() {
       params.v2.should.equal('42')
       xhr.respond(200, {}, 'Clicked!')
     })
-    var div = make('<div hx-post="/vars" hx-vals="javascript:v1:\'test\', v2:42"></div>')
+    var div = make('<div hx-post="/vars" hx-vals="javascript:{v1: (function(){return \'test\'})(), v2: (function(){return 42})()}"></div>')
     div.click()
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
@@ -139,7 +139,7 @@ describe('hx-vals attribute', function() {
       params.i1.should.equal('test')
       xhr.respond(200, {}, 'Clicked!')
     })
-    make('<div hx-vals="javascript:i1:\'test\'"><div id="d1" hx-post="/vars"></div></div>')
+    make('<div hx-vals="javascript:{i1:\'test\'}"><div id="d1" hx-post="/vars"></div></div>')
     var div = byId('d1')
     div.click()
     this.server.respond()
@@ -152,7 +152,7 @@ describe('hx-vals attribute', function() {
       params.i1.should.equal('best')
       xhr.respond(200, {}, 'Clicked!')
     })
-    make('<div hx-vals="javascript:i1:\'test\'"><div id="d1" hx-vals="javascript:i1:\'best\'" hx-post="/vars"></div></div>')
+    make('<div hx-vals="javascript:{i1:\'test\'}"><div id="d1" hx-vals="javascript:{i1:\'best\'}" hx-post="/vars"></div></div>')
     var div = byId('d1')
     div.click()
     this.server.respond()
@@ -165,7 +165,7 @@ describe('hx-vals attribute', function() {
       params.i1.should.equal('best')
       xhr.respond(200, {}, 'Clicked!')
     })
-    var div = make('<div hx-target="this"><input hx-post="/include" hx-vals="javascript:i1:\'best\'" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
+    var div = make('<div hx-target="this"><input hx-post="/include" hx-vals="javascript:{i1:\'best\'}" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
     var input = byId('i1')
     input.click()
     this.server.respond()
diff --git a/www/content/attributes/hx-headers.md b/www/content/attributes/hx-headers.md
index a1f139617..70ef4153d 100644
--- a/www/content/attributes/hx-headers.md
+++ b/www/content/attributes/hx-headers.md
@@ -11,6 +11,8 @@ If you wish for `hx-headers` to *evaluate* the values given, you can prefix the
 
 ```html
   <div hx-get="/example" hx-headers='{"myHeader": "My Value"}'>Get Some HTML, Including A Custom Header in the Request</div>
+
+  <div hx-get="/example" hx-vals='js:{myVal: calculateValue()}'>Get Some HTML, Including a Dynamic Header from Javascript in the Request</div>
 ```
 
 ## Security Considerations