diff --git a/Sources/GraphiQLVapor/GraphiQLVapor.swift b/Sources/GraphiQLVapor/GraphiQLVapor.swift
index 93bbf26..25d2c51 100644
--- a/Sources/GraphiQLVapor/GraphiQLVapor.swift
+++ b/Sources/GraphiQLVapor/GraphiQLVapor.swift
@@ -24,7 +24,7 @@ var graphQLServerPath: PathComponent = "/graphql"
 
 let grahphiQLHTML = """
 <!--
- *  Copyright (c) Facebook, Inc.
+ *  Copyright (c) 2021 GraphQL Contributors
  *  All rights reserved.
  *
  *  This source code is licensed under the license found in the
@@ -32,17 +32,18 @@ let grahphiQLHTML = """
 -->
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
     <style>
-        body {
-            height: 100%;
-            margin: 0;
-            width: 100%;
-            overflow: hidden;
-        }
-        #graphiql {
-            height: 100vh;
-        }
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
     </style>
 
     <!--
@@ -52,133 +53,58 @@ let grahphiQLHTML = """
       If you do not want to rely on a CDN, you can host these files locally or
       include them directly in your favored resource bunder.
     -->
-    <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
-    <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
-    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
-    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
-
-    <!-- Uncomment for websocket support -->
-    <!--<script src="//unpkg.com/subscriptions-transport-ws@0.9.15/browser/client.js"></script>-->
-    <!--<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>-->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@16/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+    ></script>
 
     <!--
       These two files can be found in the npm module, however you may wish to
       copy them directly into your environment, or perhaps include them in your
       favored resource bundler.
      -->
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphiql@0.11.2/graphiql.css" />
-    <script src="//cdn.jsdelivr.net/npm/graphiql@0.13.0/graphiql.js"></script>
-
-</head>
-<body>
-<div id="graphiql">Loading...</div>
-<script>
-
-    /**
-     * This GraphiQL example illustrates how to use some of GraphiQL's props
-     * in order to enable reading and updating the URL parameters, making
-     * link sharing of queries a little bit easier.
-     *
-     * This is only one example of this kind of feature, GraphiQL exposes
-     * various React params to enable interesting integrations.
-     */
-
-        // Parse the search string to get url parameters.
-    var search = window.location.search;
-    var parameters = {};
-    search.substr(1).split('&').forEach(function (entry) {
-        var eq = entry.indexOf('=');
-        if (eq >= 0) {
-            parameters[decodeURIComponent(entry.slice(0, eq))] =
-                decodeURIComponent(entry.slice(eq + 1));
-        }
-    });
-
-    // if variables was provided, try to format it.
-    if (parameters.variables) {
-        try {
-            parameters.variables =
-                JSON.stringify(JSON.parse(parameters.variables), null, 2);
-        } catch (e) {
-            // Do nothing, we want to display the invalid JSON as a string, rather
-            // than present an error.
-        }
-    }
-
-    // When the query and variables string is edited, update the URL bar so
-    // that it can be easily shared
-    function onEditQuery(newQuery) {
-        parameters.query = newQuery;
-        updateURL();
-    }
-
-    function onEditVariables(newVariables) {
-        parameters.variables = newVariables;
-        updateURL();
-    }
-
-    function onEditOperationName(newOperationName) {
-        parameters.operationName = newOperationName;
-        updateURL();
-    }
-
-    function updateURL() {
-        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
-            return Boolean(parameters[key]);
-        }).map(function (key) {
-            return encodeURIComponent(key) + '=' +
-                encodeURIComponent(parameters[key]);
-        }).join('&');
-        history.replaceState(null, null, newSearch);
-    }
-
-    // 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.
-    function graphQLFetcher(graphQLParams) {
-        // This example expects a GraphQL server at the path /graphql.
-        // Change this to point wherever you host your GraphQL server.
-        return fetch('\(graphQLServerPath)', {
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <script src="/renderExample.js" type="application/javascript"></script>
+    <script>
+      function graphQLFetcher(graphQLParams) {
+        return fetch(
+          '\(graphQLServerPath)',
+          {
             method: 'post',
             headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json',
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
             },
             body: JSON.stringify(graphQLParams),
-            credentials: 'include',
-        }).then(function (response) {
+            credentials: 'omit',
+          },
+        ).then(function (response) {
+          return response.json().catch(function () {
             return response.text();
-        }).then(function (responseBody) {
-            try {
-                return JSON.parse(responseBody);
-            } catch (error) {
-                return responseBody;
-            }
+          });
         });
-    }
-
-    // Uncomment for websockets support
-    // var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('ws://localhost:8080/subscriptions', { reconnect: true });
-    // var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
+      }
 
-    // Render <GraphiQL /> into the body.
-    // See the README in the top level of this module to learn more about
-    // how you can customize GraphiQL by providing different values or
-    // additional child elements.
-    ReactDOM.render(
+      ReactDOM.render(
         React.createElement(GraphiQL, {
-            fetcher: graphQLFetcher,
-            // fetcher: subscriptionsFetcher,
-            query: parameters.query,
-            variables: parameters.variables,
-            operationName: parameters.operationName,
-            onEditQuery: onEditQuery,
-            onEditVariables: onEditVariables,
-            onEditOperationName: onEditOperationName
+          fetcher: graphQLFetcher,
+          defaultVariableEditorOpen: true,
         }),
-        document.getElementById('graphiql')
-    );
-</script>
-</body>
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
 </html>
 """
