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.
- Open standard vision: Extends existing HTML/CSS/JS with minimal new spatial APIs
- 2D Developer friendly: Extending the existing web development ecosystem and 2D web development mindset
- Zero-rewrite adoption – Drop the SDK into an existing React project and with zero intrusion or additional cost
- Cross-platform – desktops, mobiles, and spatial-computing platfroms share one codebase.
Before SDK integration
|
After SDK integration
|
See the https://webspatial.dev/ for the docs.
It’s recommended to read the docs in order, especially the first three chapters:
- Introduction: Introduces the problems WebSpatial solves and the benefits it brings.
- Quick Example: Use a minimal example to get a quick feel for the actual results and development experience of the WebSpatial SDK.
- Core Concepts: Learn the fundamental concepts of Spatial Apps and the WebSpatial SDK.
The fourth chapter provides comprehensive and detailed Development Guide.
The guide is sequential but also supports targeted lookup.
The guide has three parts:
- What web projects can use WebSpatial API.
- How to add the WebSpatial SDK to your web projects, use WebSpatial Builder for visionOS testing (simulator or device), and how to bring spatial features to your site while still keeping it a standard, cross-platform website.
- How to use the WebSpatial API (Spatialization, Material, Elevation, Scenes, 3D) in web projects where the SDK is already integrated.
There are currently two sample projects:
- One is the Quick Example itself, which you can build it from scratch, or just grab the ready-made version from the repo. There's also a video showing the full setup process.
- The other is the "techshop" demo, showcases more realistic spatial UI design and also demonstrates cross-platform functionality.
Warning
The WebSpatial SDK is newly open-sourced and may have bugs or missing docs/examples. If you run into issues, don't spend too much time trying to fix them yourself, just share sample code with us on Discord or GitHub Issues. That way, we can quickly assess the problem and offer a solution, suggestion, or hotfix.
We welcome contributions! Please see our Contributing Guide for details.
This project is licensed under the MIT License. See the LICENSE file for details.