3 files changed, 48 insertions, 0 deletions
diff --git a/playground/index.html b/playground/index.html
new file mode 100644
index 0000000..7487569
--- /dev/null
+++ b/playground/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>@eeeooolll/graphiql · playground</title>
+    <style>
+      html, body, #app { height: 100%; margin: 0; }
+      body { background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, SFMono-Regular, monospace; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/src/App.svelte b/playground/src/App.svelte
new file mode 100644
index 0000000..82a8c9d
--- /dev/null
+++ b/playground/src/App.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  /*** IMPORT ------------------------------------------- ***/
+
+  import { createHttpFetcher } from "../../source/library/index.ts";
+  import GraphiQL from "../../source/library/GraphiQL.svelte";
+
+  /*** UTILITY ------------------------------------------ ***/
+
+  const fetcher = createHttpFetcher({
+    url: "https://countries.trevorblades.com/"
+  });
+
+  const initialQuery = `query Countries {
+  countries {
+    code
+    name
+    emoji
+  }
+}
+`;
+</script>
+
+<GraphiQL {fetcher} {initialQuery}/>
diff --git a/playground/src/main.ts b/playground/src/main.ts
new file mode 100644
index 0000000..bf39df9
--- /dev/null
+++ b/playground/src/main.ts
@@ -0,0 +1,9 @@
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const target = document.getElementById("app");
+
+if (!target)
+  throw new Error("missing #app target");
+
+mount(App, { target });