diff --git a/index.md b/index.md
index d96b27a..2d44d51 100644
--- a/index.md
+++ b/index.md
@@ -163,6 +163,314 @@ Learn more in the [WebXR Explainer on GitHub](https://github.com/immersive-web/w
+
+
+## Getting Started with WebXR Development
+
+WebXR is a relatively low-level API: it handles immersive sessions, tracking and input, while scene management and rendering are generally handled by your application.
+
+Many developers use a 3D framework, library or engine to take care of this additional setup. Below are minimal starter scenes for a few widely used tools, listed alphabetically.
+
+Each scene shows a lit, rotating cube and provides a way to enter immersive AR or VR, depending on what the device and browser support. You can save one of these examples as an `.html` file, serve it from a secure context—for example, over HTTPS or from `http://localhost` during local development—and open it in a browser that supports WebXR.
+
+Browsers require immersive WebXR sessions to be requested in response to user activation, such as clicking a button. Each example below handles this user-initiated entry in its own way.
+
+
+A-Frame
+
+A-Frame's `` element sets up the renderer, camera, lights and WebXR support automatically.
+
+Its built-in UI shows Enter VR and/or Enter AR controls depending on what the browser supports, while `hide-on-enter-ar` hides the plane and sky in AR so they do not obscure the real-world view.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+[Full A-Frame guide →](https://aframe.io/docs/1.8.0/introduction/)
+
+
+
+
+Babylon.js
+
+Babylon.js provides a default XR experience helper sets up the XR camera, input handling, common interactions and enter-XR UI in a single call.
+
+This example checks for `immersive-ar` support first and configures the helper for `immersive-vr` otherwise.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+[Full Babylon.js WebXR guide →](https://doc.babylonjs.com/features/featuresDeepDive/webXR/introToWebXR)
+
+
+
+
+PlayCanvas
+
+PlayCanvas can be used through its collaborative online editor or, as here, directly as a JavaScript engine.
+
+Starting a session is an explicit `app.xr.start()` call, made inside a click handler.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+[Full PlayCanvas WebXR guide →](https://developer.playcanvas.com/user-manual/xr/)
+
+
+
+
+Three.js
+
+three.js exposes WebXR through its renderer: enable `renderer.xr`, drive rendering with `setAnimationLoop` and add the `XRButton` helper, which offers `immersive-ar` where supported and falls back to `immersive-vr` otherwise.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+[Full three.js WebXR guide →](https://threejs.org/manual/#en/webxr-basics)
+
+
+
+These four are only a small sample of a much larger ecosystem—many other libraries, engines and tools support WebXR, and the ones above are shown for illustration rather than endorsement.
+
+Check out the community maintained [Awesome WebXR](https://github.com/msub2/awesome-webxr) repo for more options. If you would rather work with the WebXR Device API directly, the [WebXR Samples](https://immersive-web.github.io/webxr-samples/) page demonstrates direct API usage, while the [WebXR explainer](https://github.com/immersive-web/webxr/blob/main/explainer.md) covers the underlying concepts.
+
+
+
## Try WebXR
diff --git a/main.css b/main.css
index 04dbd71..52e50b5 100644
--- a/main.css
+++ b/main.css
@@ -359,6 +359,45 @@ section {
vertical-align: middle;
}
+/* -- Getting started -------------------------------------------------------- */
+
+#getting-started details {
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
+ background: var(--bg-raised);
+ margin-block: var(--space-sm);
+
+ & summary {
+ cursor: pointer;
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-md);
+ transition: color 0.15s ease;
+
+ &:hover { color: var(--link-hover); }
+
+ &::marker { color: var(--cyan); }
+ }
+
+ &[open] > summary {
+ border-bottom: 1px solid var(--border);
+ border-end-start-radius: 0;
+ border-end-end-radius: 0;
+ margin-bottom: var(--space-sm);
+ }
+
+ & > :not(summary) {
+ margin-inline: var(--space-md);
+ }
+
+ & > :last-child:not(summary) {
+ margin-bottom: var(--space-md);
+ }
+
+ & pre {
+ background: var(--bg);
+ }
+}
+
/* -- Footer ----------------------------------------------------------------- */
.site-footer {