# aframevr/aframe architecture

> Architecture diagram of the GitHub repository aframevr/aframe, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aframevr/aframe
- Repository: https://github.com/aframevr/aframe

## Overview

A-Frame is a browser framework for authoring declarative 3D, AR, and VR scenes in HTML and extending them with JavaScript components. The main workflow is loading the framework, turning scene and entity markup into component-driven objects, and rendering an interactive experience; built-in geometry, materials, models, input controls, and WebXR broaden that workflow. The README documents the inspector and AR/VR support. The graph uses the tree and sampled entry, entity, scene, and controller sources; unsampled subsystem links are omitted where call ownership is unclear.

Main entry points: [`src/index.js`](https://github.com/aframevr/aframe/blob/master/src/index.js) (A-Frame Entry), [`src/core/scene/a-scene.js`](https://github.com/aframevr/aframe/blob/master/src/core/scene/a-scene.js) (Scene Element), [`src/components/index.js`](https://github.com/aframevr/aframe/blob/master/src/components/index.js) (Built-in Components), [`src/extras/primitives/primitives.js`](https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives.js) (HTML Primitives)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Scene Authoring"]
  node_markup["HTML Primitives<br/>[primitives.js]"]
  node_assets["Asset Elements<br/>[a-assets.js]"]
  node_primitives["Primitive Definitions<br/>[a-gltf-model.js]"]
end

subgraph group_runtime["Entity Runtime"]
  node_entry["A-Frame Entry<br/>[index.js]"]
  node_scene["Scene Element<br/>[a-scene.js]"]
  node_entity["Entity Element<br/>[a-entity.js]"]
  node_core["Component System<br/>[component.js]"]
  node_systems["Runtime Systems<br/>[index.js]"]
end

subgraph group_features["Scene Features"]
  node_components["Built-in Components<br/>[index.js]"]
  node_geometry["Geometry Registry<br/>[index.js]"]
  node_scene_features["Scene Utilities<br/>[inspector.js]"]
  node_input["Controller Input"]
end

subgraph group_render["Rendering"]
  node_shaders["Shader Registry<br/>[index.js]"]
end

subgraph group_platform["Platform I/O"]
  node_webxr["WebXR Runtime<br/>[webxr.js]"]
end

node_author(("Scene Author"))
node_scene_output(("Rendered Experience"))
node_three["three.js Engine"]
node_browser["Browser APIs"]

node_author -->|"loads framework"| node_entry
node_author -->|"authors markup"| node_markup
node_entry -->|"registers components"| node_core
node_entry -->|"registers features"| node_components
node_entry -->|"registers geometry"| node_geometry
node_entry -->|"registers shaders"| node_shaders
node_entry -->|"registers systems"| node_systems
node_entry -->|"exposes scene"| node_scene
node_entry -->|"registers primitives"| node_markup
node_markup -->|"creates entities"| node_entity
node_scene -->|"inherits runtime"| node_entity
node_entity -->|"initializes components"| node_core
node_scene -->|"uses systems"| node_systems
node_entry -->|"registers assets"| node_assets
node_entry -->|"loads model primitive"| node_primitives
node_scene -->|"sets up canvas"| node_browser
node_scene -->|"creates renderer"| node_three
node_systems -->|"configures rendering"| node_three
node_components -->|"registers controls"| node_input
node_components -->|"registers inspector"| node_scene_features
node_scene -->|"uses WebXR system"| node_webxr
node_webxr -->|"requests XR APIs"| node_browser
node_three -->|"renders scene"| node_scene_output
node_browser -->|"presents experience"| node_scene_output

click node_entry "https://github.com/aframevr/aframe/blob/master/src/index.js"
click node_scene "https://github.com/aframevr/aframe/blob/master/src/core/scene/a-scene.js"
click node_entity "https://github.com/aframevr/aframe/blob/master/src/core/a-entity.js"
click node_core "https://github.com/aframevr/aframe/blob/master/src/core/component.js"
click node_markup "https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives.js"
click node_components "https://github.com/aframevr/aframe/blob/master/src/components/index.js"
click node_geometry "https://github.com/aframevr/aframe/blob/master/src/geometries/index.js"
click node_shaders "https://github.com/aframevr/aframe/blob/master/src/shaders/index.js"
click node_systems "https://github.com/aframevr/aframe/blob/master/src/systems/index.js"
click node_assets "https://github.com/aframevr/aframe/blob/master/src/core/a-assets.js"
click node_primitives "https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives/a-gltf-model.js"
click node_scene_features "https://github.com/aframevr/aframe/blob/master/src/components/scene/inspector.js"
click node_input "https://github.com/aframevr/aframe/blob/master/src/components/generic-tracked-controller-controls.js"
click node_webxr "https://github.com/aframevr/aframe/blob/master/src/systems/webxr.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_markup,node_assets,node_primitives,node_browser toneBlue
class node_entry,node_scene,node_entity,node_core,node_systems toneAmber
class node_components,node_geometry,node_scene_features,node_input toneMint
class node_shaders toneRose
class node_webxr,node_author,node_scene_output,node_three toneIndigo
```

## Components

### Scene Authoring

- [HTML Primitives](https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives.js): `src/extras/primitives/primitives.js`
- [Asset Elements](https://github.com/aframevr/aframe/blob/master/src/core/a-assets.js): `src/core/a-assets.js`
- [Primitive Definitions](https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives/a-gltf-model.js): `src/extras/primitives/primitives/a-gltf-model.js`

### Entity Runtime

- [A-Frame Entry](https://github.com/aframevr/aframe/blob/master/src/index.js): `src/index.js`
- [Scene Element](https://github.com/aframevr/aframe/blob/master/src/core/scene/a-scene.js): `src/core/scene/a-scene.js`
- [Entity Element](https://github.com/aframevr/aframe/blob/master/src/core/a-entity.js): `src/core/a-entity.js`
- [Component System](https://github.com/aframevr/aframe/blob/master/src/core/component.js): `src/core/component.js`
- [Runtime Systems](https://github.com/aframevr/aframe/blob/master/src/systems/index.js): `src/systems/index.js`

### Scene Features

- [Built-in Components](https://github.com/aframevr/aframe/blob/master/src/components/index.js): `src/components/index.js`
- [Geometry Registry](https://github.com/aframevr/aframe/blob/master/src/geometries/index.js): `src/geometries/index.js`
- [Scene Utilities](https://github.com/aframevr/aframe/blob/master/src/components/scene/inspector.js): `src/components/scene/inspector.js`
- [Controller Input](https://github.com/aframevr/aframe/blob/master/src/components/generic-tracked-controller-controls.js): `src/components/generic-tracked-controller-controls.js`

### Rendering

- [Shader Registry](https://github.com/aframevr/aframe/blob/master/src/shaders/index.js): `src/shaders/index.js`

### Platform I/O

- [WebXR Runtime](https://github.com/aframevr/aframe/blob/master/src/systems/webxr.js): `src/systems/webxr.js`

### Other components

- **Scene Author**
- **Rendered Experience**
- **three.js Engine**
- **Browser APIs**

## Connections

- Scene Author → A-Frame Entry: loads framework
- Scene Author → HTML Primitives: authors markup
- A-Frame Entry → Component System: registers components
- A-Frame Entry → Built-in Components: registers features
- A-Frame Entry → Geometry Registry: registers geometry
- A-Frame Entry → Shader Registry: registers shaders
- A-Frame Entry → Runtime Systems: registers systems
- A-Frame Entry → Scene Element: exposes scene
- A-Frame Entry → HTML Primitives: registers primitives
- HTML Primitives → Entity Element: creates entities
- Scene Element → Entity Element: inherits runtime
- Entity Element → Component System: initializes components
- Scene Element → Runtime Systems: uses systems
- A-Frame Entry → Asset Elements: registers assets
- A-Frame Entry → Primitive Definitions: loads model primitive
- Scene Element → Browser APIs: sets up canvas
- Scene Element → three.js Engine: creates renderer
- Runtime Systems → three.js Engine: configures rendering
- Built-in Components → Controller Input: registers controls
- Built-in Components → Scene Utilities: registers inspector
- Scene Element → WebXR Runtime: uses WebXR system
- WebXR Runtime → Browser APIs: requests XR APIs
- three.js Engine → Rendered Experience: renders scene
- Browser APIs → Rendered Experience: presents experience