diff --git a/.changeset/two-ends-fetch.md b/.changeset/two-ends-fetch.md
new file mode 100644
index 00000000..d464a2d4
--- /dev/null
+++ b/.changeset/two-ends-fetch.md
@@ -0,0 +1,5 @@
+---
+'@hono/graphql-server': minor
+---
+
+feat: upgrade GraphiQL
diff --git a/packages/graphql-server/src/index.ts b/packages/graphql-server/src/index.ts
index c76e10b9..188d85ae 100644
--- a/packages/graphql-server/src/index.ts
+++ b/packages/graphql-server/src/index.ts
@@ -233,85 +233,95 @@ export const errorMessages = (
 }
 
 export const respondWithGraphiQL = (c: Context) => {
-  // https://github.com/graphql/graphiql/blob/85edb9e0505db8ff963c9ad4674bc8fa2e02a35a/examples/graphiql-cdn/index.html
+  // https://github.com/graphql/graphiql/blob/03171d5614c61fb345763636d120da2b536d54a0/examples/graphiql-cdn/index.html
   return c.html(`<!--
-*  Copyright (c) 2021 GraphQL Contributors
-*  All rights reserved.
-*
-*  This source code is licensed under the license found in the
-*  LICENSE file in the root directory of this source tree.
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
 -->
 <!doctype html>
 <html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GraphiQL</title>
     <style>
       body {
-        height: 100%;
         margin: 0;
-        width: 100%;
-        overflow: hidden;
+        overflow: hidden; /* in Firefox */
       }
 
       #graphiql {
-        height: 100vh;
+        height: 100dvh;
+      }
+
+      .loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 4rem;
       }
     </style>
-    <!--
-      This GraphiQL example depends on Promise and fetch, which are available in
-      modern browsers, but can be "polyfilled" for older browsers.
-      GraphiQL itself depends on React DOM.
-      If you do not want to rely on a CDN, you can host these files locally or
-      include them directly in your favored resource bundler.
-    -->
-    <script
-      crossorigin
-      src="https://unpkg.com/react@18/umd/react.development.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/react-dom@18/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.
-    -->
-    <script
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-      type="application/javascript"
-    ></script>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
-    <!--
-      These are imports for the GraphIQL Explorer plugin.
-    -->
-    <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"
+      href="https://esm.sh/graphiql@4.0.0/dist/style.css"
     />
-  </head>
+    <link
+      rel="stylesheet"
+      href="https://esm.sh/@graphiql/plugin-explorer@4.0.0/dist/style.css"
+    />
+    <!-- Note: the ?standalone flag bundles the module along with all of its \`dependencies\`, excluding \`peerDependencies\`, into a single JavaScript file. -->
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@19.1.0",
+          "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
 
-  <body>
-    <div id="graphiql">Loading...</div>
-    <script>
-      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-      const fetcher = GraphiQL.createFetcher({
+          "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 and ReactDOM
+      import React from 'react';
+      import ReactDOM from 'react-dom/client';
+      // Import GraphiQL and the Explorer plugin
+      import { GraphiQL } from 'graphiql';
+      import { createGraphiQLFetcher } from '@graphiql/toolkit';
+      import { explorerPlugin } from '@graphiql/plugin-explorer';
+
+      const fetcher = createGraphiQLFetcher({
         url: '${c.req.path}',
       });
-      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
-      root.render(
-        React.createElement(GraphiQL, {
+      const explorer = explorerPlugin();
+
+      function App() {
+        return React.createElement(GraphiQL, {
           fetcher,
-          defaultEditorToolsVisibility: true,
-          plugins: [explorerPlugin],
-        }),
-      );
+          plugins: [explorer],
+        });
+      }
+
+      const container = document.getElementById('graphiql');
+      const root = ReactDOM.createRoot(container);
+      root.render(React.createElement(App));
     </script>
+  </head>
+  <body>
+    <div id="graphiql">
+      <div class="loading">Loading…</div>
+    </div>
   </body>
 </html>
 `)
