1 of 18

WebSpatial

2 of 18

Agenda

Demo

API

SDK

Background

1

2

3

4

3 of 18

Unified Rendering Engine

OS understands content structure (not just final pixels)

Works in Shared Space (multi-app coexistence)

Contrast: WebXR takes full exclusive view

Extend Mainstream HTML/CSS

React, Vue, Next.js gain spatial features

Existing websites transition without breaking 2D use

Progressive enhancement: same code, screen or spatial

Minimal, Systematic API Extension

Build on existing CSS/HTML/JS patterns

Keep 2D mindset, add Z-axis capabilities

Similar to SwiftUI's visionOS additions

Unified Rendering means the OS renders spatial content, not individual apps. Browser's job is to describe structure - 'this div is here with glass material' - and the platform renders it correctly.

Web content looks as good as native - proper glass effects, consistent lighting"

"Works in Shared Space alongside other apps"
"Leverages platform capabilities that already exist"

"WebXR takes exclusive control and renders via WebGL. This participates in Shared Space by letting the OS understand and render content. Different use cases."

"We extend HTML and CSS - the standards millions of developers already know - rather than creating a separate 'spatial web' stack. Same React, same Vue, same build tools, now with spatial capabilities."

"Yesterday's question was 'how do we make simple things simple?' This is how. A junior dev can add back: 0.5m to existing CSS and float a button. No DOM restructuring, no learning a new framework, no separate codebase."

4 of 18

5 of 18

6 of 18

7 of 18

8 of 18

Take a look at this example: https://github.com/webspatial/sample-techshop

Change Material

Add Depthl

9 of 18

API Proposal

2

Spatial Transform

1

Depth Layout

Material Background

4

Spatial Events

5

Install-Free PWAs

6

Spatial Scenes

7

3D Containers

3

10 of 18

API Proposal

1

Depth Layout

Layout along Z-axis, not just stacking order
element.offsetBack in JS (like offsetTop/offsetLeft)
"Cube model" not just "box model"

11 of 18

API Proposal

2

Spatial Transform

Opt-in to true 3D transforms (preserves existing behavior)
Works with existing transform syntax

12 of 18

API Proposal

3

Material Background

background-material: translucent

background-material: transparent

background-material: regular | assist

background-material: thick | embed

background-material: thin | highlight

13 of 18

API Proposal

4

Spatial Events

High-level events: spatialclick, spatialdrag, spatialrotate, spatialmagnify

14 of 18

API Proposal

6

Spatial Scenes

15 of 18

API Proposal

7

3D Containers

16 of 18

API Proposal

5

Install-free PWA

Spatial features work in browser tab OR installed PWA

Extends existing Web App Manifest (no new standard)
Browser decides presentation (tab with spatial, or standalone)
Developer writes one codebase

Result: Keep URL-based, no-install access

17 of 18

SDK: Open Source Implementation

We built cross-platform SDK to:

Let developers use APIs TODAY (don't wait for standards)
Gather real usage data for standards discussion
Test implementation approaches across platforms

18 of 18

SDK: Open Source Implementation

What's Working Now

Platform support:

✅ visionOS (shipping apps in App Store)
🚧 Android XR (in progress)
📋 Quest (planned)

Framework integration:

✅ React + Next.js, Remix, etc.
✅ Works with existing web build tools (Vite, Webpack)
📋 Vue, Svelte (planned)

API implementation status:

✅ Depth Layout, Spatial Transform, Material Background
✅ Spatial Scenes (Window, Volume)
✅ 3D Containers (<reality>, <entity>)
🚧 Spatial Events (in testing)
📋 Full Stage scenes (planned)