diff --git a/spring-graphql-docs/modules/ROOT/pages/graphiql.adoc b/spring-graphql-docs/modules/ROOT/pages/graphiql.adoc
index 78013ab0..0eedc195 100644
--- a/spring-graphql-docs/modules/ROOT/pages/graphiql.adoc
+++ b/spring-graphql-docs/modules/ROOT/pages/graphiql.adoc
@@ -6,7 +6,7 @@ It is very popular amongst developers as it makes it easy to explore and interac
 During development, a stock GraphiQL integration is often enough to help developers work on an API.
 In production, applications can require a custom GraphiQL build, that ships with a company logo or specific authentication support.
 
-Spring for GraphQL ships with https://github.com/spring-projects/spring-graphql/blob/main/spring-graphql/src/main/resources/graphiql/index.html[a stock GraphiQL `index.html` page] that uses static resources hosted on the unpkg.com CDN.
+Spring for GraphQL ships with https://github.com/spring-projects/spring-graphql/blob/main/spring-graphql/src/main/resources/graphiql/index.html[a stock GraphiQL `index.html` page] that uses static resources hosted on the esm.sh CDN.
 Spring Boot applications can easily {spring-boot-ref-docs}/reference/web/spring-graphql.html#web.graphql.graphiql[enable this page with a configuration property].
 
 Your application may need a custom GraphiQL build if it requires a setup that doesn't rely on a CDN, or if you wish to customize the user interface.
diff --git a/spring-graphql/src/main/resources/graphiql/index.html b/spring-graphql/src/main/resources/graphiql/index.html
index 7daaf658..9fe053e7 100644
--- a/spring-graphql/src/main/resources/graphiql/index.html
+++ b/spring-graphql/src/main/resources/graphiql/index.html
@@ -4,47 +4,72 @@
     <title>GraphiQL</title>
     <style>
         body {
-            height: 100%;
             margin: 0;
-            width: 100%;
             overflow: hidden;
         }
-
         #graphiql {
-            height: 100vh;
+            height: 100dvh;
+        }
+        .loading {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 4rem;
         }
     </style>
-    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
-    <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
-    <script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
-    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"/>
+    <link rel="stylesheet" href="https://esm.sh/graphiql@4.0.0/dist/style.css"/>
+    <link rel="stylesheet" href="https://esm.sh/@graphiql/plugin-explorer@4.0.0/dist/style.css"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "react": "https://esm.sh/react@19.1.0",
+            "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
+            "react-dom": "https://esm.sh/react-dom@19.1.0",
+            "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
+            "graphiql": "https://esm.sh/graphiql@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
+            "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
+            "@graphiql/react": "https://esm.sh/@graphiql/react@0.30.0?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
+            "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.2?standalone&external=graphql",
+            "graphql": "https://esm.sh/graphql@16.11.0"
+          }
+        }
+    </script>
+    <script type="module">
+        import React from 'react';
+        import ReactDOM from 'react-dom/client';
+        import { GraphiQL } from 'graphiql';
+        import { createGraphiQLFetcher } from '@graphiql/toolkit';
+        import { explorerPlugin } from '@graphiql/plugin-explorer';
+
+        const params = new URLSearchParams(window.location.search);
+        const path = params.get("path") || "/graphql";
+        const url = `${location.protocol}//${location.host}${path}`;
+        const wsPath = params.get("wsPath") || "/graphql";
+        const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
+        const gqlFetcher = createGraphiQLFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
+        const explorer = explorerPlugin();
+        const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
+        const headers = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
+
+        function App() {
+            return React.createElement(GraphiQL, {
+                fetcher: gqlFetcher,
+                defaultVariableEditorOpen: true,
+                headerEditorEnabled: true,
+                shouldPersistHeaders: true,
+                headers: headers,
+                plugins: [explorer],
+            });
+        }
+
+        const container = document.getElementById('graphiql');
+        const root = ReactDOM.createRoot(container);
+        root.render(React.createElement(App));
+    </script>
 </head>
 <body>
-<div id="graphiql">Loading...</div>
-<script>
-    const params = new URLSearchParams(window.location.search);
-    const path = params.get("path") || "/graphql";
-    const url = `${location.protocol}//${location.host}${path}`;
-    const wsPath = params.get("wsPath") || "/graphql";
-    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;
-    const gqlFetcher = GraphiQL.createFetcher({'url': url, 'subscriptionUrl': subscriptionUrl});
-    const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
-    const xsrfToken = document.cookie.match(new RegExp('(?:^| )XSRF-TOKEN=([^;]+)'));
-    const headers = xsrfToken ? `{ "X-XSRF-TOKEN" : "${ xsrfToken[1] }" }` : `{}`;
-    ReactDOM.render(
-        React.createElement(GraphiQL, {
-            fetcher: gqlFetcher,
-            defaultVariableEditorOpen: true,
-            headerEditorEnabled: true,
-            shouldPersistHeaders: true,
-            headers: headers,
-            plugins: [explorerPlugin]
-        }),
-        document.getElementById('graphiql'),
-    );
-</script>
+<div id="graphiql"><div class="loading">Loading...</div></div>
 </body>
 </html>