# WebSpatial

> WebSpatial is a set of spatial APIs and ready-to-use SDK that extend the standard 2D Web ecosystem to support spatial computing across platforms. It enables the entire HTML/CSS-based Web world to step into the spatial era, gaining spatial power on par with native apps (like visionOS apps) while keeping the advantages they already have.

This file is a curated index of the latest English WebSpatial documentation for LLMs and coding agents.
It excludes legacy 1.0.x docs and localized copies. Follow the linked Markdown pages for the authoritative source.

## Introduction

- [Getting Started](https://webspatial.dev/docs/introduction/getting-started.md): Understand what WebSpatial adds to the Web, how the SDK works, and how to integrate it into a React project.

## Concepts

- [Concepts overview](https://webspatial.dev/docs/concepts.md): Core concepts behind WebSpatial, spatial computing, scenes, interactions, and 2D + 3D composition.
- [Spatial Computing](https://webspatial.dev/docs/concepts/spatial-computing.md): Learn how spatial computing differs from traditional XR, including spatial apps, runtimes, and unified rendering.
- [WebSpatial App](https://webspatial.dev/docs/concepts/webspatial-app.md): See how a standard Web App becomes a WebSpatial App, including the roles of the runtime and packaged app.
- [Spatial Scenes](https://webspatial.dev/docs/concepts/spatial-scenes.md): Understand Spatial Scene containers, scene types, initialization, and how WebSpatial apps open multiple scenes.
- [Spatialized HTML Elements](https://webspatial.dev/docs/concepts/spatialized-html-elements.md): Learn how ordinary HTML elements become spatialized surfaces with Z-axis layout, transforms, and spatial state.
- [3D Content Containers](https://webspatial.dev/docs/concepts/3d-content-containers.md): Explore the 2D containing 3D model, static and dynamic 3D containers, and the local 3D spaces they create.
- [Natural Interactions](https://webspatial.dev/docs/concepts/natural-interactions.md): Understand gaze, pinch, touch, and the spatial events WebSpatial exposes for natural interaction.

## How-to

- [How-to overview](https://webspatial.dev/docs/how-to.md): Practical setup guides for PWA requirements, JSX runtime configuration, SSR, Xcode, and app-store workflows.
- [How to meet the minimum PWA requirements](https://webspatial.dev/docs/how-to/minimal-pwa.md): Prepare the minimum manifest, icons, and installability requirements needed for WebSpatial and packaged app workflows.
- [How to configure the JSX runtime in non-TypeScript projects](https://webspatial.dev/docs/how-to/non-ts.md): Configure the WebSpatial JSX runtime in JavaScript-based React projects without TypeScript support.
- [How to configure the JSX runtime in Rspack-based projects](https://webspatial.dev/docs/how-to/rspack.md): Set up the WebSpatial JSX runtime in Rspack or Rsbuild projects through swc-loader configuration.
- [How to enable WebSpatial in SSR-enabled projects](https://webspatial.dev/docs/how-to/ssr.md): Enable WebSpatial in SSR projects by wrapping the app with SSRProvider and preserving the client-runtime split.
- [How to install Xcode and visionOS-related components](https://webspatial.dev/docs/how-to/xcode.md): Install Xcode, simulators, and visionOS platform components required to run Packaged WebSpatial Apps locally.
- [How to test on visionOS devices and submit to the App Store](https://webspatial.dev/docs/how-to/app-store-connect.md): Test Packaged WebSpatial Apps on visionOS devices and submit builds through App Store Connect.

## API

- [API overview](https://webspatial.dev/docs/api.md): Reference docs for WebSpatial Builder and the WebSpatial React SDK.
- [React SDK overview](https://webspatial.dev/docs/api/react-sdk.md): Reference docs for React components, CSS APIs, DOM APIs, events, JS APIs, and scene configuration.
- [React SDK / React Components overview](https://webspatial.dev/docs/api/react-sdk/react-components.md): React components and JSX markers for rendering 3D and spatial content.
- [React SDK / React Components / JSX Markers](https://webspatial.dev/docs/api/react-sdk/react-components/jsx-marker.md): Mark JSX elements so the WebSpatial SDK can turn them into spatialized HTML elements.
- [React SDK / React Components / `<Model>`](https://webspatial.dev/docs/api/react-sdk/react-components/Model.md): Render a static 3D model inside a spatialized container using the Web-standard-inspired `<model>` API.
- [React SDK / React Components / `<Reality>`](https://webspatial.dev/docs/api/react-sdk/react-components/Reality.md): Render dynamic 3D content inside a spatialized container with the unified-rendering engine API.
- [React SDK / CSS API overview](https://webspatial.dev/docs/api/react-sdk/css-api.md): CSS properties for spatial layout, depth, transforms, and material surfaces.
- [React SDK / CSS API / `back`](https://webspatial.dev/docs/api/react-sdk/css-api/back.md): Lift an HTML element along the Z axis and position it in front of the page plane.
- [React SDK / CSS API / Spatial Transform](https://webspatial.dev/docs/api/react-sdk/css-api/transform.md): Apply true 3D translation, rotation, and scale to spatialized HTML elements and 3D containers.
- [React SDK / CSS API / `background-material`](https://webspatial.dev/docs/api/react-sdk/css-api/background-material.md): Give scene and element backplates a transparent or real-time translucent material background.
- [React SDK / CSS API / `depth`](https://webspatial.dev/docs/api/react-sdk/css-api/depth.md): Set the depth of 3D container elements so they render with real thickness in space.
- [React SDK / DOM API overview](https://webspatial.dev/docs/api/react-sdk/dom-api.md): DOM properties for depth, back offset, and runtime environment detection.
- [React SDK / DOM API / `userAgent`](https://webspatial.dev/docs/api/react-sdk/dom-api/userAgent.md): Inspect the current device, operating system, and whether the app is running in WebSpatial mode.
- [React SDK / DOM API / `offsetBack`](https://webspatial.dev/docs/api/react-sdk/dom-api/offsetBack.md): Read how far a spatialized HTML element has moved forward from its original 2D position.
- [React SDK / DOM API / `clientDepth`](https://webspatial.dev/docs/api/react-sdk/dom-api/clientDepth.md): Read the current rendered depth of a 3D container element in pixels.
- [React SDK / DOM API / `innerDepth`](https://webspatial.dev/docs/api/react-sdk/dom-api/innerDepth.md): Read the current depth of a volume Spatial Scene through the DOM interface.
- [React SDK / Event API overview](https://webspatial.dev/docs/api/react-sdk/event-api.md): Spatial interaction events for tap, drag, magnify, and rotate gestures.
- [React SDK / Event API / Spatial Tap](https://webspatial.dev/docs/api/react-sdk/event-api/spatial-tap.md): Handle completed tap interactions on spatialized elements and 3D content.
- [React SDK / Event API / Spatial Drag](https://webspatial.dev/docs/api/react-sdk/event-api/spatial-drag.md): Handle spatial drag gestures, including their phases and position payload.
- [React SDK / Event API / Spatial Magnify](https://webspatial.dev/docs/api/react-sdk/event-api/spatial-magnify.md): Handle two-handed magnify gestures and read the scale factor produced by the interaction.
- [React SDK / Event API / Spatial Rotate](https://webspatial.dev/docs/api/react-sdk/event-api/spatial-rotate.md): Handle two-handed rotate gestures and read the rotation produced in 3D space.
- [React SDK / JS API overview](https://webspatial.dev/docs/api/react-sdk/js-api.md): JavaScript APIs for scene setup, metrics, and coordinate conversion.
- [React SDK / JS API / `initScene`](https://webspatial.dev/docs/api/react-sdk/js-api/initScene.md): Configure initialization options for a new Spatial Scene before it opens.
- [React SDK / JS API / `useMetrics`](https://webspatial.dev/docs/api/react-sdk/js-api/useMetrics.md): Convert between 2D pixel units and real-world meter units inside WebSpatial layouts.
- [React SDK / JS API / `convertCoordinate`](https://webspatial.dev/docs/api/react-sdk/js-api/convertCoordinate.md): Convert points between the local and global coordinate systems used by scenes and spatial content.
- [React SDK / Manifest Options overview](https://webspatial.dev/docs/api/react-sdk/manifest-options.md): Manifest options for configuring the main scene of a WebSpatial app.
- [React SDK / Manifest Options / `main_scene`](https://webspatial.dev/docs/api/react-sdk/manifest-options/main-scene.md): Configure the Start Scene from the Web App Manifest before any page code runs.
- [React SDK / Scene Options overview](https://webspatial.dev/docs/api/react-sdk/scene-options.md): Scene configuration options for sizing, scaling, alignment, and window behavior.
- [React SDK / Scene Options / `type`](https://webspatial.dev/docs/api/react-sdk/scene-options/type.md): Choose whether a new Spatial Scene behaves like a window or a volume.
- [React SDK / Scene Options / `defaultSize`](https://webspatial.dev/docs/api/react-sdk/scene-options/defaultSize.md): Set the initial width, height, and depth a Spatial Scene requests when it is created.
- [React SDK / Scene Options / `resizability`](https://webspatial.dev/docs/api/react-sdk/scene-options/resizability.md): Limit how far users can resize a Spatial Scene after it opens.
- [React SDK / Scene Options / `worldScaling`](https://webspatial.dev/docs/api/react-sdk/scene-options/worldScaling.md): Control whether a Spatial Scene keeps a constant apparent size or scales with distance.
- [React SDK / Scene Options / `worldAlignment`](https://webspatial.dev/docs/api/react-sdk/scene-options/worldAlignment.md): Control whether a Spatial Scene stays upright, faces the user, or behaves more like a real object.
- [React SDK / Scene Options / `baseplateVisibility`](https://webspatial.dev/docs/api/react-sdk/scene-options/baseplateVisibility.md): Show or hide the baseplate under a volume Spatial Scene.
- [Builder overview](https://webspatial.dev/docs/api/builder.md): Command reference for previewing, building, and publishing packaged WebSpatial apps.
- [Builder / `webspatial-builder run`](https://webspatial.dev/docs/api/builder/run.md): Launch a Packaged WebSpatial App in the simulator for local preview and debugging.
- [Builder / `webspatial-builder build`](https://webspatial.dev/docs/api/builder/build.md): Build a Packaged WebSpatial App that can be installed on test devices or prepared for release workflows.
- [Builder / `webspatial-builder publish`](https://webspatial.dev/docs/api/builder/publish.md): Upload a built Packaged WebSpatial App to App Store Connect for TestFlight or App Store submission.

## Optional

- [Full merged latest English docs](https://webspatial.dev/llms-full.txt): Single-file Markdown context with the full contents of the latest English docs merged inline.