Start here
Reality Toolkit WebXR is a set of four TypeScript families for building WebXR apps that are not locked to one engine. Each family ships an engine-free core and a thin adapter per engine. Your interaction, UI and environment logic then runs on three.js, Meta's IWSDK, Google's XR Blocks or Babylon.js, where a family supports it.
The four families
| Family | What it owns | Core package | Adapters | Status |
|---|---|---|---|---|
| WebXR-Input | Input contracts: normalised input sources, capability negotiation, the provider interface | @realitycollective/webxr-input | none - consumed through the other families' adapters | Released, 0.1.4 on npm |
| WebXR-Interactions | Interactivity: interactables, interactors, behaviours, targeting and feedback intents | @realitycollective/webxr-interactions | threejs-interactions, babylon-interactions, iwsdk-interactions, xrblocks-interactions | Released, 0.1.0 on npm |
| WebXR-UIExtensions | Spatial UI: windows, docking, layout regions and controls | @realitycollective/webxr-uiextensions | iwsdk-uiextensions, xrblocks-uiextensions | Released, 0.1.0 on npm |
| WebXR-Environment | The setting around the player - sky, fog, light - and the playback of sound | @realitycollective/webxr-environment | threejs-environment, iwsdk-environment, xrblocks-environment | Released, 0.1.0 on npm |
A fifth package, the Service Framework, provides dependency injection and the runtime session that these four families build on, and it is documented on its own site.
Pick your engine
Each family ships an engine-free core and a thin adapter per engine, so this table tells you which adapter to install once you know your engine.
| Family | three.js | Babylon.js | Meta IWSDK | Google XR Blocks |
|---|---|---|---|---|
| WebXR-Input | none (contracts only) | none (contracts only) | none (contracts only) | none (contracts only) |
| WebXR-Interactions | yes | yes, not yet run against a real Babylon app | yes | experimental |
| WebXR-UIExtensions | experimental (shares the XR Blocks adapter) | none | yes | experimental |
| WebXR-Environment | yes | pending | yes | experimental |
Install matrix
WebXR-Input is never installed directly - every adapter below re-exports it. All four families are released on npm, so a bare npm install resolves the stable version of each adapter.
# WebXR-Interactions
npm install @realitycollective/threejs-interactions
npm install @realitycollective/babylon-interactions
npm install @realitycollective/iwsdk-interactions
npm install @realitycollective/xrblocks-interactions
# WebXR-UIExtensions
npm install @realitycollective/iwsdk-uiextensions
npm install @realitycollective/xrblocks-uiextensions
# WebXR-Environment
npm install @realitycollective/threejs-environment
npm install @realitycollective/iwsdk-environment
npm install @realitycollective/xrblocks-environment
Live demos
Every family with a demo has two Cloudflare Pages deploys: a preview build of the development branch and a live build of the last stable release.
Every playground links to its production deploy.
| Demo | Family | Preview build | Live | What it shows |
|---|---|---|---|---|
| Interaction playground | Interactions | webxr-interactions-test.pages.dev (not yet serving) | webxr-interactions.pages.dev | Seven stations from one descriptor: push button, gaze dwell, wall and table levers, dial, pulley, scoop and toss. |
| Environment playground | Environment | webxr-environment-test.pages.dev (not yet serving) | webxr-environment.pages.dev | Preset transitions, a passthrough toggle that restores the sky exactly, live bus and master sliders. |
| UI Extensions showcase | UI Extensions | webxr-uiextensions-test.pages.dev | webxr-uiextensions.pages.dev | Six windows and two dock regions: registration form, event log, hand menu, gallery, player status. |
| Multiplatform lab | UI Extensions | webxr-uix-lab-test.pages.dev | webxr-uix-lab.pages.dev | The same scene through the IWSDK, XR Blocks and desktop pipelines, picked from a launch screen. |
Where to go next
Want something running on a headset first? Walkthrough: your first scene on Meta IWSDK goes from an empty folder to a UI panel and a sphere in front of you. The Reality Toolkit WebXR quick start then extends the same project to every family and the Service Framework: a pressable sphere, a sky and a sound.
Read The layering rule to see how an app, an adapter, a core and the input contracts fit together, then open the family you need: Interactions, UI Extensions, Environment or Input.
Each family is documented the same way as the Service Framework for the web: a Welcome page, then Basics, Features, Host integrations and Examples.