diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index a12423b..57c38f2 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,12 +1,9 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Alpine",
+	"name": "Node.js & TypeScript",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/base:alpine-3.18",
-	"features": {
-		"ghcr.io/devcontainers/features/node:1": {}
-	},
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
 	"customizations": {
 		"vscode": {
 			"extensions": [
@@ -28,7 +25,7 @@
 	// "forwardPorts": [],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "uname -a",
+	// "postCreateCommand": "yarn install",
 
 	// Configure tool-specific properties.
 	// "customizations": {},
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 2d9ca2f..229f53f 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -1,71 +1,72 @@
-import starlight from '@astrojs/starlight';
-import { defineConfig } from 'astro/config';
-import { generateTypeDoc } from 'starlight-typedoc';
+import react from "@astrojs/react";
+import starlight from "@astrojs/starlight";
+import { defineConfig } from "astro/config";
+import { generateTypeDoc } from "starlight-typedoc";
 
 const apiSidebarGroup = await generateTypeDoc({
-	output: "reference/vanilla",
-	sidebar: {
-		label: "Vanilla Reference",
-		collapsed: true
-	},
+  output: "reference/vanilla",
+  sidebar: {
+    label: "Vanilla Reference",
+    collapsed: true,
+  },
 
-	entryPoints: ['../src/vanilla/index.ts'],
-	tsconfig: '../src/vanilla/tsconfig.docs.json',
-})
+  entryPoints: ["../src/vanilla/index.ts"],
+  tsconfig: "../src/vanilla/tsconfig.docs.json",
+});
 
 const reactSidebar = await generateTypeDoc({
-	output: "reference/react",
-	sidebar: {
-		label: "React Reference",
-		collapsed: true
-	},
-	entryPoints: ['../src/react/index.ts'],
-	tsconfig: '../src/react/tsconfig.docs.json',
-})
+  output: "reference/react",
+  sidebar: {
+    label: "React Reference",
+    collapsed: true,
+  },
+  entryPoints: ["../src/react/index.ts"],
+  tsconfig: "../src/react/tsconfig.docs.json",
+});
 const vueSidebar = await generateTypeDoc({
-	output: "reference/vue",
-	sidebar: {
-		label: "Vue Reference",
-		collapsed: true
-	},
-	entryPoints: ['../src/vue/index.ts'],
-	tsconfig: '../src/vue/tsconfig.docs.json',
-})
-
+  output: "reference/vue",
+  sidebar: {
+    label: "Vue Reference",
+    collapsed: true,
+  },
+  entryPoints: ["../src/vue/index.ts"],
+  tsconfig: "../src/vue/tsconfig.docs.json",
+});
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [
-		starlight({
-			title: 'Bunshi',
-			favicon: "./public/favicon.ico",
-			logo: {
-				src: "./src/assets/bunshi.svg",
-			},
-			customCss: [
-				// Relative path to your custom CSS file
-				'./src/styles/custom.css',
-			],
-			social: {
-				github: 'https://github.com/saasquatch/bunshi',
-			},
-			sidebar: [
-				{
-					label: 'Concepts',
-					autogenerate: { directory: 'concepts' },
-				},
-				{
-					label: 'Integrations',
-					autogenerate: { directory: 'integrations' },
-				},
-				{
-					label: 'Advanced',
-					autogenerate: { directory: 'advanced' },
-				},
-				reactSidebar,
-				vueSidebar,
-				apiSidebarGroup,
-			],
-		}),
-	],
+  integrations: [
+    react(),
+    starlight({
+      title: "Bunshi",
+      favicon: "./public/favicon.ico",
+      logo: {
+        src: "./src/assets/bunshi.svg",
+      },
+      customCss: [
+        // Relative path to your custom CSS file
+        "./src/styles/custom.css",
+      ],
+      social: {
+        github: "https://github.com/saasquatch/bunshi",
+      },
+      sidebar: [
+        {
+          label: "Concepts",
+          autogenerate: { directory: "concepts" },
+        },
+        {
+          label: "Integrations",
+          autogenerate: { directory: "integrations" },
+        },
+        {
+          label: "Advanced",
+          autogenerate: { directory: "advanced" },
+        },
+        reactSidebar,
+        vueSidebar,
+        apiSidebarGroup,
+      ],
+    }),
+  ],
 });
diff --git a/website/package-lock.json b/website/package-lock.json
index 4126785..87eeefc 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -13,6 +13,8 @@
         "sharp": "^0.32.5"
       },
       "devDependencies": {
+        "@astrojs/react": "^3.0.4",
+        "@codesandbox/sandpack-react": "^2.9.0",
         "@vue/tsconfig": "^0.4.0",
         "starlight-typedoc": "^0.5.0",
         "typedoc": "^0.25.1",
@@ -103,6 +105,25 @@
         "node": ">=18.14.1"
       }
     },
+    "node_modules/@astrojs/react": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-3.0.4.tgz",
+      "integrity": "sha512-v+qltrm5nfqqm8C5ymYDBxrGlvNouRr+iCLcUWvNX65abVz8GzUqquhPQjmCTDXphn1Qc558Uxzc4s79l02skw==",
+      "dev": true,
+      "dependencies": {
+        "@vitejs/plugin-react": "^4.0.4",
+        "ultrahtml": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.50 || ^18.0.21",
+        "@types/react-dom": "^17.0.17 || ^18.0.6",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/@astrojs/sitemap": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.0.0.tgz",
@@ -176,21 +197,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.17.tgz",
-      "integrity": "sha512-2EENLmhpwplDux5PSsZnSbnSkB3tZ6QTksgO25xwEL7pIDcNOMhF5v/s6RzwjMZzZzw9Ofc30gHv5ChCC8pifQ==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz",
+      "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.22.15",
+        "@babel/generator": "^7.23.0",
         "@babel/helper-compilation-targets": "^7.22.15",
-        "@babel/helper-module-transforms": "^7.22.17",
-        "@babel/helpers": "^7.22.15",
-        "@babel/parser": "^7.22.16",
+        "@babel/helper-module-transforms": "^7.23.0",
+        "@babel/helpers": "^7.23.2",
+        "@babel/parser": "^7.23.0",
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.22.17",
-        "@babel/types": "^7.22.17",
-        "convert-source-map": "^1.7.0",
+        "@babel/traverse": "^7.23.2",
+        "@babel/types": "^7.23.0",
+        "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.3",
@@ -213,11 +234,11 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.15.tgz",
-      "integrity": "sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
       "dependencies": {
-        "@babel/types": "^7.22.15",
+        "@babel/types": "^7.23.0",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -261,20 +282,20 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -303,15 +324,15 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.17.tgz",
-      "integrity": "sha512-XouDDhQESrLHTpnBtCKExJdyY4gJCdrvH2Pyv8r8kovX2U8G0dRUOT45T9XlbLtuu9CLXP15eusnkprhoPV5iQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz",
+      "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
         "@babel/helper-simple-access": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/helper-validator-identifier": "^7.22.15"
+        "@babel/helper-validator-identifier": "^7.22.20"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -359,9 +380,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz",
-      "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -375,13 +396,13 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.15.tgz",
-      "integrity": "sha512-7pAjK0aSdxOwR+CcYAqgWOGy5dcfvzsTIfFTb2odQqW47MDfv14UaJDY6eng8ylM2EaeKXdxaSWESbkmaQHTmw==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
+      "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
       "dependencies": {
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/traverse": "^7.23.2",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -401,9 +422,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.16",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -443,6 +464,36 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.22.5.tgz",
+      "integrity": "sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz",
+      "integrity": "sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -457,18 +508,18 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.17.tgz",
-      "integrity": "sha512-xK4Uwm0JnAMvxYZxOVecss85WxTEIbTa7bnGyf/+EgCL5Zt3U7htUpEOWv9detPlamGKuRzCqw74xVglDWpPdg==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
       "dependencies": {
         "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.22.15",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.22.16",
-        "@babel/types": "^7.22.17",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -477,18 +528,190 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.22.17",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.17.tgz",
-      "integrity": "sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.15",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.10.2.tgz",
+      "integrity": "sha512-3dCL7b0j2GdtZzWN5j7HDpRAJ26ip07R4NGYz7QYthIYMiX8I4E4TNrYcdTayPJGeVQtd/xe7lWU4XL7THFb/w==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.0.tgz",
+      "integrity": "sha512-tFfcxRIlOWiQDFhjBSWJ10MxcvbCIsRr6V64SgrcaY0MwNk32cUOcCuNlWo8VjV4qRQCgNgUAnIeo0svkk4R5Q==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz",
+      "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.6.tgz",
+      "integrity": "sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.1.tgz",
+      "integrity": "sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.2.tgz",
+      "integrity": "sha512-QGTQXSpAKDIzaSE96zNK1UfIUhPgkT1CLjh1N5qVzZuxgsEOhz5RqaN8QCIdyOQklGLx3MgHd9YrE3X3+Pl1ow==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz",
+      "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.1.tgz",
+      "integrity": "sha512-88e4HhMtKJyw6fKprGaN/yZfiaoGYOi2nM45YCUC6R/kex9sxFWBDGatS1vk4lMgnWmdIIB9tk8Gj1LmL8YfvA==",
+      "dev": true
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.21.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.4.tgz",
+      "integrity": "sha512-WKVZ7nvN0lwWPfAf05WxWqTpwjC8YN3q5goj3CsSig7//DD81LULgOx3nBegqpqP0iygBqRmW8z0KSc2QTAdAg==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/state": "^6.1.4",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@codesandbox/nodebox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz",
+      "integrity": "sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==",
+      "dev": true,
+      "dependencies": {
+        "outvariant": "^1.4.0",
+        "strict-event-emitter": "^0.4.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-client": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.9.0.tgz",
+      "integrity": "sha512-KkG/YusBsL0RnI3P079cckHrRleLaGQVM5Plzn6xWOPM04Dce52MMkr6XIU77ZMjZm/zZ5pmgXLW7M6HoyIy/A==",
+      "dev": true,
+      "dependencies": {
+        "@codesandbox/nodebox": "0.1.8",
+        "buffer": "^6.0.3",
+        "dequal": "^2.0.2",
+        "outvariant": "1.4.0",
+        "static-browser-server": "1.0.3"
+      }
+    },
+    "node_modules/@codesandbox/sandpack-react": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.9.0.tgz",
+      "integrity": "sha512-A0quGugVyWbRktpdq2Nc6W1+XV0QnHq1lbqDCHAs2ijfWxvhhNaqMr6lWDaG/NTUGRNLUNETbipcNaBeC0dxhw==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.4.0",
+        "@codemirror/commands": "^6.1.3",
+        "@codemirror/lang-css": "^6.0.1",
+        "@codemirror/lang-html": "^6.4.0",
+        "@codemirror/lang-javascript": "^6.1.2",
+        "@codemirror/language": "^6.3.2",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.7.1",
+        "@codesandbox/sandpack-client": "^2.9.0",
+        "@lezer/highlight": "^1.1.3",
+        "@react-hook/intersection-observer": "^3.1.1",
+        "@stitches/core": "^1.2.6",
+        "anser": "^2.1.1",
+        "clean-set": "^1.1.2",
+        "codesandbox-import-util-types": "^2.2.3",
+        "dequal": "^2.0.2",
+        "escape-carriage": "^1.3.1",
+        "lz-string": "^1.4.4",
+        "react-devtools-inline": "4.4.0",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.2.tgz",
@@ -862,6 +1085,61 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.0.tgz",
+      "integrity": "sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw==",
+      "dev": true
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.3.tgz",
+      "integrity": "sha512-SjSM4pkQnQdJDVc80LYzEaMiNy9txsFbI7HsMgeVF28NdLaAdHNtQ+kB/QqDUzRBV/75NTXjJ/R5IdC8QQGxMg==",
+      "dev": true,
+      "dependencies": {
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
+      "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+      "dev": true,
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.6.tgz",
+      "integrity": "sha512-Kk9HJARZTc0bAnMQUqbtuhFVsB4AnteR2BFUWfZV7L/x1H0aAKz6YabrfJ2gk/BEgjh9L3hg5O4y2IDZRBdzuQ==",
+      "dev": true,
+      "dependencies": {
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.8.tgz",
+      "integrity": "sha512-QRmw/5xrcyRLyWr3JT3KCzn2XZr5NYNqQMGsqnYy+FghbQn9DZPuj6JDkE6uSXvfMLpdapu8KBIaeoJFaR4QVw==",
+      "dev": true,
+      "dependencies": {
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.13.tgz",
+      "integrity": "sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==",
+      "dev": true,
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@@ -922,6 +1200,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "dev": true
+    },
     "node_modules/@pagefind/darwin-arm64": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.0.0-beta.2.tgz",
@@ -987,6 +1271,34 @@
         "win32"
       ]
     },
+    "node_modules/@react-hook/intersection-observer": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz",
+      "integrity": "sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==",
+      "dev": true,
+      "dependencies": {
+        "@react-hook/passive-layout-effect": "^1.2.0",
+        "intersection-observer": "^0.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@react-hook/passive-layout-effect": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
+      "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@stitches/core": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz",
+      "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==",
+      "dev": true
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -996,9 +1308,9 @@
       }
     },
     "node_modules/@types/babel__core": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
-      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
+      "version": "7.20.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
+      "integrity": "sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==",
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -1102,6 +1414,35 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
       "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.9",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz",
+      "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.33",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
+      "integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
+      "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -1115,11 +1456,37 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.5",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
+      "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@types/unist": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.8.tgz",
       "integrity": "sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw=="
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz",
+      "integrity": "sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.22.20",
+        "@babel/plugin-transform-react-jsx-self": "^7.22.5",
+        "@babel/plugin-transform-react-jsx-source": "^7.22.5",
+        "@types/babel__core": "^7.20.2",
+        "react-refresh": "^0.14.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0"
+      }
+    },
     "node_modules/@vue/tsconfig": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.4.0.tgz",
@@ -1145,6 +1512,12 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/anser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/anser/-/anser-2.1.1.tgz",
+      "integrity": "sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==",
+      "dev": true
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -1736,6 +2109,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/clean-set": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz",
+      "integrity": "sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==",
+      "dev": true
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -1780,6 +2159,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/codesandbox-import-util-types": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz",
+      "integrity": "sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==",
+      "dev": true
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1845,9 +2230,9 @@
       "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w=="
     },
     "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -1857,6 +2242,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "dev": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1875,6 +2266,23 @@
       "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz",
       "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g=="
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dev": true,
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1971,6 +2379,18 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/dset": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.2.tgz",
@@ -2007,6 +2427,42 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.1.tgz",
       "integrity": "sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q=="
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dev": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dev": true,
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.2.tgz",
@@ -2051,6 +2507,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-carriage": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz",
+      "integrity": "sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==",
+      "dev": true
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -2171,6 +2633,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dev": true,
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
+      "dev": true
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2638,6 +3115,12 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "node_modules/intersection-observer": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz",
+      "integrity": "sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==",
+      "dev": true
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -3005,6 +3488,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3019,6 +3515,15 @@
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
       "dev": true
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
@@ -4098,6 +4603,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -4183,6 +4697,12 @@
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
       "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "dev": true
+    },
     "node_modules/nlcst-to-string": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/nlcst-to-string/-/nlcst-to-string-3.1.1.tgz",
@@ -4320,6 +4840,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
+      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
+      "dev": true
+    },
     "node_modules/p-limit": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
@@ -4774,6 +5300,57 @@
         "rc": "cli.js"
       }
     },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-devtools-inline": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz",
+      "integrity": "sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==",
+      "dev": true,
+      "dependencies": {
+        "es6-symbol": "^3"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -5134,6 +5711,16 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -5361,6 +5948,18 @@
         "typedoc-plugin-markdown": ">=4.0.0-next.20"
       }
     },
+    "node_modules/static-browser-server": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz",
+      "integrity": "sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==",
+      "dev": true,
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.1.0",
+        "dotenv": "^16.0.3",
+        "mime-db": "^1.52.0",
+        "outvariant": "^1.3.0"
+      }
+    },
     "node_modules/stdin-discarder": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
@@ -5392,6 +5991,12 @@
         "queue-tick": "^1.0.1"
       }
     },
+    "node_modules/strict-event-emitter": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
+      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
+      "dev": true
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -5478,6 +6083,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+      "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==",
+      "dev": true
+    },
     "node_modules/style-to-object": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.2.tgz",
@@ -5603,6 +6214,12 @@
         "node": "*"
       }
     },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+      "dev": true
+    },
     "node_modules/type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
@@ -5658,6 +6275,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ultrahtml": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.2.tgz",
+      "integrity": "sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==",
+      "dev": true
+    },
     "node_modules/undici": {
       "version": "5.24.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-5.24.0.tgz",
@@ -6367,6 +6990,12 @@
       "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
       "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "dev": true
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
diff --git a/website/package.json b/website/package.json
index 0d2f2ff..c31b4f5 100644
--- a/website/package.json
+++ b/website/package.json
@@ -15,10 +15,12 @@
     "sharp": "^0.32.5"
   },
   "devDependencies": {
+    "@astrojs/react": "^3.0.4",
+    "@codesandbox/sandpack-react": "^2.9.0",
     "@vue/tsconfig": "^0.4.0",
     "starlight-typedoc": "^0.5.0",
     "typedoc": "^0.25.1",
     "typedoc-plugin-markdown": "^4.0.0-next.20"
   },
-  "prettier":{}
+  "prettier": {}
 }
diff --git a/website/src/components/CodeEditor.astro b/website/src/components/CodeEditor.astro
new file mode 100644
index 0000000..823c438
--- /dev/null
+++ b/website/src/components/CodeEditor.astro
@@ -0,0 +1,36 @@
+---
+import { getSandpackCssText, type SandpackSetup } from "@codesandbox/sandpack-react";
+import { CodeEditor as ReactCodeEditor } from "./CodeEditor";
+
+import type { ComponentProps } from "react";
+
+type SandpackProps = ComponentProps<typeof ReactCodeEditor>;
+type Props = {
+  template?: SandpackProps["template"];
+  files?: SandpackProps["files"];
+  dependencies?: SandpackSetup["dependencies"];
+};
+
+const styles = getSandpackCssText();
+const { template, files, dependencies } = Astro.props;
+
+// See docs: https://sandpack.codesandbox.io/docs/getting-started/usage#templates
+---
+<style id="sandpack" is:global set:html={styles} />
+
+<!-- This wrapper ensures the default Atro Starlight theme doesn't add stupid margins
+to all the elements in Sandpack's UI -->
+<div class="not-content">
+  <ReactCodeEditor
+    template={template ?? "react-ts"}
+    client:load
+    customSetup={{
+      dependencies: {
+        ...dependencies,
+        // Must exist
+        bunshi: "2.0.1",
+      },
+    }}
+    files={files}
+  />
+</div>
diff --git a/website/src/components/CodeEditor.tsx b/website/src/components/CodeEditor.tsx
new file mode 100644
index 0000000..bcd6ae9
--- /dev/null
+++ b/website/src/components/CodeEditor.tsx
@@ -0,0 +1,10 @@
+import { Sandpack } from "@codesandbox/sandpack-react";
+import React, { type ComponentProps } from "react";
+import { useTheme } from "./useTheme";
+
+type SandpackProps = ComponentProps<typeof Sandpack>;
+
+export function CodeEditor(props: Omit<SandpackProps, "theme">) {
+  const theme = useTheme();
+  return <Sandpack {...props} theme={theme as any} />;
+}
diff --git a/website/src/components/useTheme.tsx b/website/src/components/useTheme.tsx
new file mode 100644
index 0000000..2db9230
--- /dev/null
+++ b/website/src/components/useTheme.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+const EVENT_NAME = "starlight-theme-update";
+
+export function useTheme() {
+  const [theme, setTheme] = useState("auto");
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    /* prevents hydration error so that state is only initialized after server is defined */
+    setTheme(getStoredTheme());
+  }, []);
+  useEffect(() => {
+    const listener = (e: Event) => {
+      setTheme((e as CustomEvent).detail);
+    };
+    addEventListener(EVENT_NAME, listener);
+    () => removeEventListener(EVENT_NAME, listener);
+  }, [setTheme]);
+  return theme;
+}
+function getStoredTheme() {
+  if (typeof document === "undefined") return "light";
+  const storedTheme =
+    typeof localStorage !== "undefined" &&
+    localStorage.getItem("starlight-theme");
+  const theme =
+    storedTheme ||
+    (window.matchMedia("(prefers-color-scheme: light)").matches
+      ? "light"
+      : "dark");
+  return theme;
+}
+
+/**
+ * Send events to listen to global theme change.
+ *
+ * Replaces the global `StarlightThemeProvider`
+ *
+ * Polyfill for
+ *  - https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeProvider.astro
+ *  - https://github.com/withastro/starlight/blob/main/packages/starlight/components/ThemeSelect.astro
+ *
+ */
+function polyfill() {
+  function sendGlobalEvents(theme?: string) {
+    window.dispatchEvent(
+      new CustomEvent(EVENT_NAME, {
+        bubbles: true,
+        detail: theme,
+      })
+    );
+  }
+  // @ts-ignore;
+  const old = window["StarlightThemeProvider"];
+  const replacement = {
+    updatePickers(theme?: string) {
+      sendGlobalEvents(theme);
+      old.updatePickers(theme);
+    },
+  };
+  // @ts-ignore
+  window["StarlightThemeProvider"] = replacement;
+}
+
+if (typeof document !== "undefined") polyfill();
diff --git a/website/src/content/docs/concepts/quickstart.mdx b/website/src/content/docs/concepts/quickstart.mdx
index b66ea32..fa30f79 100644
--- a/website/src/content/docs/concepts/quickstart.mdx
+++ b/website/src/content/docs/concepts/quickstart.mdx
@@ -5,10 +5,12 @@ sidebar:
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
+import CodeEditor from "~/components/CodeEditor.astro";
+import { quickstart } from "~/source-examples/sources";
 
 ## Installation
 
-Bunshi is distributed on NPM as both a CommonJS and ES Module. It comes with type definitions for Typescript support.
+Bunshi is distributed on NPM as both a CommonJS and ES Module. It supports both Javscript and Typescript.
 
 ```sh
 npm i -D bunshi
@@ -16,90 +18,118 @@ npm i -D bunshi
 
 ## Create a Molecule
 
-Molecules are the core building block of bunshi. They are functions that return a value.
+Molecules are the core building block of bunshi. They are functions that return a value. Use molecules when you want to create a stable
+object to share with the rest of your application. For this example, a `jotai` atom.
 
 ```ts
 import { molecule } from "bunshi";
+import { atom } from "jotai/vanilla";
 
-export const ResizeMolecule = molecule(
-  () => new ResizeObserver((e) => console.log("Resize", e))
-);
+export const CountMolecule = molecule(() => atom(0));
 ```
 
-> When this `ResizeMolecule` is used it will always return the same ResizeObserver. The value is memoized and cached.
+> When this `CountMolecule` is used it will always return the same `atom`. The value is memoized and cached.
 
 ## Use a Molecule
 
-To use a molecule, pass it to `useMolecule` in your framework integration (React or Vue).
+To use a molecule, pass it to `useMolecule` in your framework integration (React or Vue). An instance of `atom` will be automatically created once and shared across the application in every call to `useMolecule`.
 
 <Tabs>
-	<TabItem label="React">
-
-```tsx
-import { useMolecule } from "bunshi/react";
-import { ResizeMolecule } from "../molecules";
-
-export const Resized = () => {
-  const observer = useMolecule(ResizeMolecule);
-  return (
-    <div ref={(el) => observer.observe(el)}>My size is being watched.</div>
-  );
-};
-```
-
-    </TabItem>
-    <TabItem label="Vue">
-
-```vue
-<script setup>
-import { useMolecule } from "bunshi/vue";
-import { ResizeMolecule } from "../molecules";
-
-const observer = useMolecule(ResizeMolecule);
-
-mounted(() => observer.observe(this.$el));
-unmounted(() => observer.unobserve(this.$el));
-</script>
-
-<template>
-  <div>My size is being watched.</div>
-</template>
-```
-
-</TabItem>
+  <TabItem label="React">
+    <CodeEditor
+      files={{
+        "App.tsx": quickstart.ReactApp,
+        "molecules.ts": quickstart.molecules,
+      }}
+      dependencies={{
+        jotai: "^2.5",
+      }}
+    />
+  </TabItem>
+  <TabItem label="Vue">
+    <CodeEditor
+      files={{
+        "src/App.vue": quickstart.VueApp,
+        "src/Counter.vue": quickstart.VueCounter,
+        "src/molecules.ts": quickstart.molecules,
+      }}
+      dependencies={{
+        jotai: "^2.5",
+        "jotai-vue": "^0.1",
+      }}
+      template="vite-vue"
+    />
+  </TabItem>
 </Tabs>
 
-An instance of `ResizeObserver` will be automatically created once and shared across the application in every call to `useMolecule`.
-
 ## Scope a Molecule
 
-Molecules can also be [scoped](/concepts/scopes) instead of global. In the above example the `ResizeObserver` was shared globally across the app.
-Instead, let's make each component have it's own resize observer. We can do this using the special `ComponentScope` that comes with Bunshi.
+Molecules can be [scoped](/concepts/scopes). Scoped molecules provide a single value per scope, instead of a single value globally.
+In the above example the `atom` was shared globally across the app. Instead, let's make each component have it's own state
+using the built-in `ComponentScope`.
 
 ```ts
-import { molecule, ComponentScope } from "bunshi";
+import { ComponentScope, molecule } from "bunshi";
+import { atom } from "jotai/vanilla";
 
-export const ResizeMolecule = molecule((_, scope) => {
+export const CountMolecule = molecule((_, scope) => {
+  // Because `scope` was called here, this molecule is component scoped
   scope(ComponentScope);
-  return new ResizeObserver((e) => console.log("Resize", e));
+  return atom(0);
 });
 ```
 
 Scoping is declarative. By calling `scope(ComponentScope)` the molecule will automatically be scoped.
 
+<Tabs>
+  <TabItem label="React">
+    <CodeEditor
+      files={{
+        "App.tsx": quickstart.ReactApp,
+        "molecules.ts": quickstart.molecules2react,
+      }}
+      dependencies={{
+        jotai: "^2.5",
+      }}
+    />
+  </TabItem>
+  <TabItem label="Vue">
+    <CodeEditor
+      files={{
+        "src/App.vue": quickstart.VueApp,
+        "src/Counter.vue": quickstart.VueCounter,
+        "src/molecules.ts": quickstart.molecules2,
+      }}
+      dependencies={{
+        jotai: "^2.5",
+        "jotai-vue": "^0.1",
+      }}
+      template="vite-vue"
+    />
+  </TabItem>
+</Tabs>
+
+> Important: See how the source for `Counter` didn't change? This shows how Bunshi lets you pull state up, or
+> push state down. No component changes needed, only molecule changes.
+
 ## Use a custom scope
 
-Sometimes state needs to be shared, but not globally, and not per-component. It needs to exists somewhere in the middle. Bunshi supports creating custom scopes.
+Sometimes state needs to be shared, not globally or per-component, but somewhere in the middle like a Form. Bunshi has `createScope` for this.
 There are a lot of use cases for [scopes](/concepts/scopes) for sharing data across pages, sections, forms, or even rows or columns in a table.
 
+Here let's share our state for all counters in the same form.
+
 ```ts
-import { molecule, createScope } from "bunshi";
+import { createScope, molecule } from "bunshi";
+import { atom } from "jotai/vanilla";
 
+// FormScope will be used for provided a string value to forms
 export const FormScope = createScope("none");
 
-export const ResizeMolecule = molecule((,scope) => {
-    scope(FormScope);
-    return new ResizeObserver((e)=>console.log("Resize",e))
+export const CountMolecule = molecule((_, scope) => {
+  // Since `scope` is called here, it makes `CountMolecule` scoped to the form
+  scope(FormScope);
+  return atom(0);
 });
 ```
 
@@ -108,60 +138,46 @@ export const ResizeMolecule = molecule((,scope) => {
 Custom scopes need to be provided using the framework-specific API. Bunshi comes with integrations into React and Vue to provide scope implicitly.
 
 <Tabs>
-	<TabItem label="React">
-
-```tsx
-import { ScopeProvider } from "bunshi/react";
-import { FormScope } from "../molecules";
-
-export const Form = ({ name, children }) => {
-  return (
-    <form>
-      Form {name}
-      <ScopeProvider scope={FormScope} value={name}>
-        {children}
-      </ScopeProvider>
-    </form>
-  );
-};
-```
-
-    </TabItem>
-    <TabItem label="Vue">
-
-```vue
-<script setup>
-import { provideScope } from "bunshi/vue";
-import { FormScope } from "../molecules";
-
-const {name} = defineProps(['name'])
-
-provideScope([FormScope,name])
-
-</script>
-
-<template>
-  <form>
-    Form: {{name}}
-    <slot></slot>
-  <form>
-</template>
-
-```
-
-</TabItem>
+  <TabItem label="React">
+    For React use a `ScopeProvider` as a wrapping component, and all children can implicitly use that scope.
+    <CodeEditor
+      files={{
+        "App.tsx": quickstart.ReactFormApp,
+        "molecules.ts": quickstart.molecules3,
+      }}
+      dependencies={{
+        jotai: "^2.5",
+      }}
+    />
+  </TabItem>
+  <TabItem label="Vue">
+    For Vue use `provideScope` to provide scope implicitly to all children in the `slot`.
+    <CodeEditor
+      files={{
+        "src/App.vue": quickstart.VueFormApp,
+        "src/Counter.vue": quickstart.VueCounter,
+        "src/Form.vue": quickstart.VueForm,
+        "src/molecules.ts": quickstart.molecules3,
+      }}
+      dependencies={{
+        jotai: "^2.5",
+        "jotai-vue": "^0.1",
+      }}
+      template="vite-vue"
+    />
+  </TabItem>
 </Tabs>
 
-In this example everything inside of the `<Form>` component will be share a `ResizeObserver`, it won't be unique per component
+In this example everything inside of the `<Form>` component will be share an `atom`, it won't be unique per component
 or shared across the entire application.
 
 ## Conclusion - Decoupled and Lazy
 
 The code that you wrote is decoupled and lazy.
 
-- **Decoupled**: You can refactor the `ResizeMolecule` without affecting the thing that depend on it.
-- **Lazy**: A resize observer is only created lazily when it's needed. It's not eagerly created and sitting around in a variable.
+- **Decoupled**: You can refactor the `CountMolecule` without affecting the thing that depend on it.
+- **Lazy**: An atom is only created lazily when it's needed. It's not eagerly created and sitting around in a variable.
 
 When your write code with molecules, you can pull state up or push state down, without having to refactor your components.
 
-We completed an example of scoping the `ResizeObserver` to be global, scoped to a component, or shared inside of a form.
+We completed an example of scoping the `atom` to be global, scoped to a component, or shared inside of a form.
\ No newline at end of file
diff --git a/website/src/source-examples/quickstart/App.tsx b/website/src/source-examples/quickstart/App.tsx
new file mode 100644
index 0000000..6870154
--- /dev/null
+++ b/website/src/source-examples/quickstart/App.tsx
@@ -0,0 +1,25 @@
+import { useMolecule } from "bunshi/react";
+import { useAtom } from "jotai";
+import React from "react";
+import { CountMolecule } from "./molecules";
+
+function Counter() {
+  const countAtom = useMolecule(CountMolecule);
+  const [count, setCount] = useAtom(countAtom);
+
+  return (
+    <div>
+      <p>Times clicked: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <div>
+      <Counter />
+      <Counter />
+    </div>
+  );
+}
diff --git a/website/src/source-examples/quickstart/App.vue b/website/src/source-examples/quickstart/App.vue
new file mode 100644
index 0000000..bdaf73e
--- /dev/null
+++ b/website/src/source-examples/quickstart/App.vue
@@ -0,0 +1,7 @@
+<script setup>
+import Counter from "./Counter.vue";
+</script>
+<template>
+  <Counter />
+  <Counter />
+</template>
diff --git a/website/src/source-examples/quickstart/Counter.vue b/website/src/source-examples/quickstart/Counter.vue
new file mode 100644
index 0000000..0c4e608
--- /dev/null
+++ b/website/src/source-examples/quickstart/Counter.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { useMolecule } from "bunshi/vue";
+import { CountMolecule } from "./molecules";
+import { useAtom } from "jotai-vue";
+
+const countAtom = useMolecule(CountMolecule);
+const [count, setCount] = useAtom(countAtom);
+</script>
+
+<template>
+  <div>
+    <p>Times clicked: {{ count }}</p>
+    <button @click="setCount((prev) => prev + 1)">increment</button>
+  </div>
+</template>
diff --git a/website/src/source-examples/quickstart/Form.vue b/website/src/source-examples/quickstart/Form.vue
new file mode 100644
index 0000000..bccdd7a
--- /dev/null
+++ b/website/src/source-examples/quickstart/Form.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { provideScope } from "bunshi/vue";
+import { FormScope } from "./molecules";
+
+const {name} = defineProps(['name'])
+
+provideScope([FormScope,name])
+
+</script>
+
+<template>
+  <div>
+    Form: {{name}}
+    <slot></slot>
+  </div>
+</template>
\ No newline at end of file
diff --git a/website/src/source-examples/quickstart/FormApp.tsx b/website/src/source-examples/quickstart/FormApp.tsx
new file mode 100644
index 0000000..d21ba21
--- /dev/null
+++ b/website/src/source-examples/quickstart/FormApp.tsx
@@ -0,0 +1,45 @@
+import { ScopeProvider, useMolecule } from "bunshi/react";
+import { useAtom } from "jotai";
+import React from "react";
+import { CountMolecule, FormScope } from "./molecules";
+
+export default function App() {
+  return (
+    <div>
+      <Form name="One">
+        <Counter />
+        <Counter />
+      </Form>
+      <Form name="Two">
+        <Counter />
+        <Counter />
+      </Form>
+    </div>
+  );
+}
+
+const Form: React.FC<{ name: string; children: React.ReactNode }> = ({
+  name,
+  children,
+}) => {
+  return (
+    <div>
+      Form {name}
+      <ScopeProvider scope={FormScope} value={name}>
+        {children}
+      </ScopeProvider>
+    </div>
+  );
+};
+
+function Counter() {
+  const countAtom = useMolecule(CountMolecule);
+  const [count, setCount] = useAtom(countAtom);
+
+  return (
+    <div>
+      <p>Times clicked: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+    </div>
+  );
+}
diff --git a/website/src/source-examples/quickstart/FormApp.vue b/website/src/source-examples/quickstart/FormApp.vue
new file mode 100644
index 0000000..8e0e7b1
--- /dev/null
+++ b/website/src/source-examples/quickstart/FormApp.vue
@@ -0,0 +1,18 @@
+<script setup>
+import Counter from "./Counter.vue";
+import Form from "./Form.vue";
+</script>
+<template>
+  <div>
+    <Form name="one"
+      >
+      <Counter />
+      <Counter />
+    </Form>
+    <Form name="two"
+      >
+      <Counter />
+      <Counter />
+    </Form>
+  </div>
+</template>
diff --git a/website/src/source-examples/quickstart/molecules.ts b/website/src/source-examples/quickstart/molecules.ts
new file mode 100644
index 0000000..29c62b4
--- /dev/null
+++ b/website/src/source-examples/quickstart/molecules.ts
@@ -0,0 +1,4 @@
+import { molecule } from "bunshi";
+import { atom } from "jotai/vanilla";
+
+export const CountMolecule = molecule(() => atom(0));
diff --git a/website/src/source-examples/quickstart/molecules2.ts b/website/src/source-examples/quickstart/molecules2.ts
new file mode 100644
index 0000000..2301f63
--- /dev/null
+++ b/website/src/source-examples/quickstart/molecules2.ts
@@ -0,0 +1,7 @@
+import { ComponentScope, molecule } from "bunshi";
+import { atom } from "jotai/vanilla";
+
+export const CountMolecule = molecule((_, scope) => {
+  scope(ComponentScope);
+  return atom(0);
+});
diff --git a/website/src/source-examples/quickstart/molecules2react.ts b/website/src/source-examples/quickstart/molecules2react.ts
new file mode 100644
index 0000000..f1ff3c4
--- /dev/null
+++ b/website/src/source-examples/quickstart/molecules2react.ts
@@ -0,0 +1,7 @@
+import { ComponentScope, molecule } from "bunshi/react";
+import { atom } from "jotai/vanilla";
+
+export const CountMolecule = molecule((_, scope) => {
+  scope(ComponentScope);
+  return atom(0);
+});
diff --git a/website/src/source-examples/quickstart/molecules3.ts b/website/src/source-examples/quickstart/molecules3.ts
new file mode 100644
index 0000000..d3b579d
--- /dev/null
+++ b/website/src/source-examples/quickstart/molecules3.ts
@@ -0,0 +1,11 @@
+import { createScope, molecule } from "bunshi";
+import { atom } from "jotai/vanilla";
+
+// FormScope will be used for provided a string value to forms
+export const FormScope = createScope("none");
+
+export const CountMolecule = molecule((_, scope) => {
+  // Since `scope` is called here, it makes `CountMolecule` scoped to the form
+  scope(FormScope);
+  return atom(0);
+});
diff --git a/website/src/source-examples/quickstart/sources.ts b/website/src/source-examples/quickstart/sources.ts
new file mode 100644
index 0000000..d8faa47
--- /dev/null
+++ b/website/src/source-examples/quickstart/sources.ts
@@ -0,0 +1,33 @@
+import ReactApp from "./App.tsx?raw";
+import VueApp from "./App.vue?raw";
+import VueCounter from "./Counter.vue?raw";
+import molecules from "./molecules.ts?raw";
+
+// Component scoped
+import molecules2 from "./molecules2.ts?raw";
+import molecules2react from "./molecules2react.ts?raw";
+
+// Form scoped
+import molecules3 from "./molecules3.ts?raw";
+import ReactFormApp from "./FormApp.tsx?raw";
+import VueFormApp from "./FormApp.vue?raw";
+import VueForm from "./Form.vue?raw";
+
+const quickstart = {
+  molecules,
+  molecules2,
+  VueApp,
+  VueCounter,
+  ReactApp,
+
+  // Component scoped
+  molecules2react,
+
+  // Form scoped 
+  molecules3,
+  ReactFormApp,
+  VueFormApp,
+  VueForm
+};
+
+export default quickstart;
diff --git a/website/src/source-examples/sources.ts b/website/src/source-examples/sources.ts
new file mode 100644
index 0000000..ae4a4af
--- /dev/null
+++ b/website/src/source-examples/sources.ts
@@ -0,0 +1 @@
+export { default as quickstart } from "./quickstart/sources";
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 77da9dd..a14a4df 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,3 +1,10 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
\ No newline at end of file
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  }
+}