diff --git a/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html b/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html
index 7fe26368..78111d14 100644
--- a/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html
+++ b/graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html
@@ -101,6 +101,16 @@
 
   var headers = ${headers}
 
+  function onEditHeaders(newHeaders) {
+    try {
+      headers = JSON.parse(newHeaders)
+      console.log("Headers successfully updated.")
+    } catch(e) {
+       console.warn("The content of the request headers tab is not a valid json: " + e.message)
+       headers = {}
+    }
+  }
+
   // Defines a GraphQL fetcher using the fetch API. You're not required to
   // use fetch, and could instead implement graphQLFetcher however you like,
   // as long as it returns a Promise or Observable.
@@ -153,6 +163,7 @@
   props.onEditQuery = onEditQuery
   props.onEditVariables = onEditVariables
   props.onEditOperationName = onEditOperationName
+  props.onEditHeaders = onEditHeaders
 
   console.debug(props)
   // Render <GraphiQL /> into the body.