A-Frame

A-Frame
Information
Type	Web framework
Industry	Virtual Reality, Augmented Reality
Developer	Supermedium, Mozilla VR team (original)
Written In	JavaScript
Operating System	Cross-platform (web browser)
License	MIT License
Supported Devices	WebXR-capable browsers on desktop, mobile, and VR/AR headsets
Release Date	December 16, 2015
Website	https://aframe.io

A-Frame is an open-source web framework for building three-dimensional, virtual reality, and augmented reality experiences that run in a web browser. It is built on top of the three.js graphics library and lets developers describe a 3D scene with custom HTML elements, using an entity-component-system (ECS) pattern rather than writing low-level WebGL code.

A-Frame was created within the Mozilla VR team (MozVR) and released to the public on December 16, 2015. Its stated goal was to let web developers, designers, and 3D artists author VR content with the same skills used to build web pages, without requiring deep knowledge of WebGL or three.js. Since the original Mozilla team moved on, the framework has been maintained by the VR company Supermedium, whose co-founders Diego Marcos and Kevin Ngo had led A-Frame at Mozilla, together with Don McCurdy; Google has funded Supermedium's work on the project's WebXR support.

History

A-Frame was developed inside Mozilla's WebVR team during 2015, with its first public version released on December 16, 2015. Early versions targeted the WebVR browser API and worked across desktop, Oculus Rift, and smartphone viewers such as Google Cardboard.

When the WebVR API was superseded by the newer WebXR standard, A-Frame followed. Version 0.9.0, released on February 11, 2019, added introductory WebXR support alongside performance work and a refactored visual Inspector, while WebVR remained the default at that stage. Version 1.0.0, released on December 16, 2019 (four years after the first release), moved to full WebXR support in place of the deprecated WebVR API and added an out-of-the-box AR mode for browsers that support Google's ARCore and Apple's ARKit. The 1.0.0 announcement cited more than 300 contributors and over 10,000 GitHub stars at that point.

The project has continued under semantic versioning. Version 1.7.0, released on February 20, 2025, modernized the build by replacing CommonJS with ES modules and adding import map support, along with post-processing and experimental WebGPU and Three.js Shading Language (TSL) support. The current stable release is version 1.7.1, published on April 1, 2025. A-Frame is released under the MIT License and is written almost entirely in JavaScript.

How it works

A-Frame brings the entity-component-system pattern, common in game engines, to the browser's Document Object Model (DOM). A scene is declared with an <a-scene> element, and 3D objects are written as HTML elements such as <a-box>, <a-sphere>, or the generic <a-entity>. Each entity is a container with no appearance or behavior of its own; functionality is added by attaching reusable components (for geometry, material, position, animation, physics, and so on) as HTML attributes. Developers compose objects by mixing components together rather than through class inheritance.

Because A-Frame is a layer over three.js, anything in a scene can also be reached through the underlying three.js objects and WebGL when finer control is needed, so the HTML interface and lower-level graphics code can be used together.

A-Frame ships with a built-in visual editor, the A-Frame Inspector, which can be opened on any A-Frame scene with the keyboard shortcut Ctrl+Alt+I. It lets a developer select, move, rotate, scale, and clone entities, edit their components and properties through widgets, view the scene as a tree-based scene graph, and export the result back to HTML.

WebXR and AR support

Through the WebXR Device API, A-Frame scenes run across platforms from a single codebase, including desktop browsers, mobile devices, and dedicated VR and AR headsets, provided the browser supports WebXR. On a 2D screen a scene renders as an interactive 3D view; on a compatible headset the user can enter immersive VR, and on AR-capable mobile browsers the scene can be placed in the real world through the device camera. Google provided funding to Supermedium specifically to develop and maintain A-Frame's WebXR support.

Relationship to WebVR and WebXR

A-Frame began as a tool for the WebVR API, one of the first widely used ways to bring VR to the open web, and it was among the more prominent frameworks built on that API. As browser vendors deprecated WebVR in favor of WebXR, A-Frame migrated to the newer standard, completing the transition in version 1.0.0. The framework is often discussed alongside three.js (which it wraps) and other web 3D engines as a way to author for the open metaverse using web technologies.

Adoption

A-Frame has been used for browser-based VR experiences, demos, and social applications. Mozilla's Hubs, a social VR chat platform delivered entirely through the browser, was built using A-Frame, with the companion library networked-aframe adding the real-time multiuser layer. The social VR platform AltspaceVR published guidance on building experiences with A-Frame.

External resources

Official documentation and guides are published at the A-Frame website. Community demonstrations built with A-Frame include the painting tool A-Painter and the game demo A-Invaders, both hosted on the project's GitHub organization.