diff --git a/docs/getting-started/introduction-basic-sandpack/App.tsx b/docs/getting-started/introduction-basic-sandpack/App.tsx
new file mode 100644
index 00000000..00505a2c
--- /dev/null
+++ b/docs/getting-started/introduction-basic-sandpack/App.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { XR, createXRStore } from '@react-three/xr'
+
+const store = createXRStore()
+
+export default function App() {
+  const [red, setRed] = useState(false)
+  return (
+    <>
+      <button onClick={() => store.enterAR()}>Enter AR</button>
+      <Canvas>
+        <XR store={store}>
+          <mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
+            <boxGeometry />
+            <meshBasicMaterial color={red ? 'red' : 'blue'} />
+          </mesh>
+        </XR>
+      </Canvas>
+    </>
+  )
+}
diff --git a/docs/getting-started/introduction-basic-sandpack/package.json b/docs/getting-started/introduction-basic-sandpack/package.json
new file mode 100644
index 00000000..58d283ae
--- /dev/null
+++ b/docs/getting-started/introduction-basic-sandpack/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "three": "latest",
+    "@react-three/fiber": "latest",
+    "@react-three/xr": "latest"
+  }
+}
diff --git a/docs/getting-started/introduction-basic-sandpack/styles.css b/docs/getting-started/introduction-basic-sandpack/styles.css
new file mode 100644
index 00000000..cc4a8790
--- /dev/null
+++ b/docs/getting-started/introduction-basic-sandpack/styles.css
@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: unset;
+}
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.mdx
similarity index 75%
rename from docs/getting-started/introduction.md
rename to docs/getting-started/introduction.mdx
index dcab5a24..b21579f3 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.mdx
@@ -13,28 +13,18 @@ npm install three @react-three/fiber @react-three/xr@latest
 | A simple scene with a mesh that toggles its material color between `"red"` and `"blue"` when clicked through touching or pointing. | ![recording of interacting with the code below](./basic-example.gif) |
 |-|-|
 
-```tsx
-import { Canvas } from '@react-three/fiber'
-import { XR, createXRStore } from '@react-three/xr'
-import { useState } from 'react'
-
-const store = createXRStore()
-
-export function App() {
-  const [red, setRed] = useState(false)
-  return <>
-    <button onClick={() => store.enterAR()}>Enter AR</button>
-    <Canvas>
-      <XR store={store}>
-        <mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
-          <boxGeometry />
-          <meshBasicMaterial color={red ? 'red' : 'blue'} />
-        </mesh>
-      </XR>
-    </Canvas>
-  </>
-}
-```
+<Sandpack
+  template="react-ts"
+  folder="introduction-basic-sandpack"
+  files={{
+    '/App.tsx': {
+      active: true,
+    },
+    '/styles.css': {
+      readOnly: true
+    }
+  }}
+/>
 
 ### Turn any @react-three/fiber app into an XR experience