graphql-kit
diff --git a/‎demo/index.html
+48 b/‎demo/index.html
+48
diff --git a/‎demo/index.ts
-53 b/‎demo/index.ts
-53
diff --git a/‎demo/presets.ts
-14 b/‎demo/presets.ts
-14
@@ -107,8 +107,56 @@
         }
       }
     </style>
+    <link rel="stylesheet" href="./voyager.css" />
+    <script src="./voyager.standalone.js"></script>
   </head>
   <body>
+    <script type="module">
+      // FIXME: switch to import
+      const { renderVoyager, voyagerIntrospectionQuery } = GraphQLVoyager;
+      const PRESETS = {
+        'Star Wars': await fetchPreset('swapi'),
+        Yelp: await fetchPreset('yelp'),
+        'Shopify Storefront': await fetchPreset('shopify'),
+        GitHub: await fetchPreset('github'),
+      };
+
+      const defaultPreset = PRESETS['Star Wars'];
+
+      const currentUrl = new URL(window.location.href);
+      const url = currentUrl.searchParams.get('url');
+      const withCredentials = currentUrl.searchParams.get('withCredentials');
+
+      const introspection =
+        url != null ? fetchIntrospection(url, withCredentials) : defaultPreset;
+
+      renderVoyager(document.getElementById('root'), {
+        introspection,
+        introspectionPresets: PRESETS,
+        allowToChangeSchema: true,
+        hideVoyagerLogo: false,
+      });
+
+      async function fetchPreset(name) {
+        const response = await fetch(`./presets/${name}_introspection.json`);
+        return response.json();
+      }
+
+      async function fetchIntrospection(url, withCredentials) {
+        const response = await fetch(url, {
+          method: 'post',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ query: voyagerIntrospectionQuery }),
+          ...(withCredentials === 'true'
+            ? { credentials: 'include', mode: 'cors' }
+            : {}),
+        });
+        return response.json();
+      }
+    </script>
     <main id="root">
       <h1 style="text-align: center; color: #5d7e86">Loading...</h1>
     </main>