Note: This documentation is for the old 0.9.0 version of A-Frame. Check out the documentation for the current 1.4.0 version
Code Editors in the Browser
The fastest way is to start playing from within the browser.
Remix on Glitch
Glitch provides an online code editor with instant deployment and hosting of web sites. The editor supports both front-end and back-end code as well as multiple files and directories. Glitch lets us remix (i.e., copy) existing projects and make them our own and instantly host and deploy changes for everyone to see.
Hit Remix on this A-Frame project, mess with the HTML in
index.html, and see your site published live on each change! The base A-Frame
Glitch, for example, is published at
aframe.glitch.me, but we will provide your
own custom URL name.
Below are a few other A-Frame Glitches for starters:
- aframe-aincraft - Minecraft demo.
- aframe-gallery - 360° image gallery.
- aframe-registry - Showcase of various components.
- aframe-vaporwave - Retro-futuristic scene.
- networked-aframe - Multiuser.
Other Code Editors
Below are a couple of A-Frame starter kits on other browser-based code editors. Both support remixing or forking:
Use a Local Server
For the options below, we should develop projects using a local server so that files are properly served. Options of local servers include:
- Downloading the Mongoose application and opening it from the same directory as your HTML file.
python -m SimpleHTTPServer(or
python -m http.serverfor Python 3) in a terminal in the same directory as your HTML file.
npm install -g live-server && live-serverin a terminal in the same directory as your HTML file.
Once we are running our server, we can open our project in the browser using
the local URL and port which the server is running on (e.g.,
http://localhost:8000). Try not to open the project using the
protocol which does not provide a domain; absolute and relative URLs may not
Download the Boilerplate on GitHub
The boilerplate contains:
- A simple HTML file that links to the current version of A-Frame
- An optional local development server
- An easy deployment workflow for GitHub Pages to share with the world
We can grab the boilerplate in one of two ways:
Include the JS Build
To include A-Frame in an HTML file, we drop a
<script> tag pointing to the
If we want to serve it ourselves, we can download the JS build:
Production Version 0.9.2 Minified Development Version 0.9.2 Uncompressed with Source Maps
Install from npm
We can also install A-Frame through npm:
$ npm install aframe
Then we can bundle A-Frame into our application. For example, with Browserify or Webpack:
If you use npm, you can use
angle, a command line interface for
angle can initialize a scene template with a single command:
npm install -g angle && angle initscene