
A-Frame
A web framework for building browser-based 3D, AR and VR experiences using HTML.
- Stars
- 17.7k
- Forks
- 4.4k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 4 months ago
- Type
- Library
What it is
A-Frame is a web framework that lets you build 3D, AR and VR scenes in a browser by writing HTML tags such as a-box and a-sphere. It sits on top of three.js and WebXR, so the same page can run on desktop, phones and VR headsets that support WebXR. People use it to make interactive 3D experiences without writing low-level graphics code.
- Build a simple VR scene with boxes, spheres and a sky using a few lines of HTML
- Add particle effects, animation or ocean-style surfaces by plugging in community components
- Create an interactive 3D experience that runs on phones and desktops, with optional headset support
- Inspect a running scene with the built-in visual inspector opened via ctrl + alt + i
Great for
- Web developers who want to add 3D or VR scenes to a website
- Educators and artists experimenting with immersive content in the browser
- Beginners comfortable with basic HTML who want a gentle entry into 3D
- Developers who want to extend scenes with JavaScript components and community add-ons
Not ideal for
- Teams needing a full game engine with a visual editor, since the README focuses on code and HTML rather than editor tooling
- Projects that must run on native apps or consoles, since it targets browsers with WebXR support
- Anyone needing heavy, high-fidelity 3D performance at the level of dedicated native engines, as it is a thin layer over three.js
How to get it
- 1
Install with a package manager
You'll need: Node.js (required for the npm install and local development steps; exact version not stated in README)
Install from npm
npm install --save aframeClone the repository for local development
git clone https://github.com/aframevr/aframe.gitInstall dependencies and start the dev server
cd aframe && npm installStart the local development server
npm start - 2
Run it
- Create an HTML file and include aframe.min.js from the CDN link in the README
- Add an a-scene element to the body of the page
- Place shapes such as a-box or a-sphere inside the scene with position and color attributes
- Open the file in a WebXR-capable browser to view the scene
- 3
Get the most out of it
- Use the built-in inspector with ctrl + alt + i to tweak objects visually
- Add community components such as particle-system, ocean or physics to extend scenes from HTML
- Run npm run start:https and follow the README steps to test scenes in a headset over your local network
- Use npm run dist to generate your own builds
Downloads
Strengths
- Simple declarative HTML syntax lowers the barrier to building 3D scenes
- Built on three.js and WebXR, with access to raw JavaScript and WebGL when needed
- Works on desktop and smartphones even without a headset
Trade-offs
- Depends on browser WebXR support, so headset features vary by device and browser
- Testing in VR on a headset requires running a local HTTPS server and a third-party service described in the README
- Community components are separate projects whose quality and maintenance vary
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| aframe (this) | 17.7k | Library | beginner | 4 months ago | Web developers who want to add 3D or VR scenes to a website |
| three.js | 117k | Library | intermediate | 4 days ago | Web developers adding interactive 3D graphics to a website |
| react-three-fiber | 33.4k | Library | intermediate | 16 days ago | React developers who want to add 3D scenes to a web app |
| JoltPhysics | 12.1k | Library | advanced | 4 days ago | C++ game developers who need a physics engine for rigid bodies and collisions |
| engine | 17.2k | Library | intermediate | 4 days ago | Web developers who want to add 3D scenes or games to a website |
| drei | 10.1k | Library | intermediate | 16 days ago | React developers who are building 3D scenes for the web with react-three-fiber |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.