Getting Started

Note: This documentation is for the old 0.2.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

There are several ways to get started with A-Frame:

Play with CodePen
Grab the Boilerplate
Include the JS Build
Install from npm

CodePen

CodePen is a playground for front-end web development. We can edit HTML and JavaScript directly in the browser with their text editor, see changes live, and share code snippets. This is a fast way to dive in without having to download or install anything. Check out the official MozVR CodePens and the A-Frame Hello World CodePen:

See the Pen Hello World â A-Frame by Mozilla VR (@mozvr) on CodePen.

Boilerplate

The boilerplate contains:

A simple HTML file that links to the current version of A-Frame 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:

Fork on GitHub Download .ZIP

Builds

If we want to just include the JS build from the CDN, we can drop a <script> tag straight into our HTML:

<!-- Production Version, Minified -->
<script src="https://aframe.io/releases/{{ version }}/aframe.min.js"></script>

<!-- Development Version, Uncompressed with Source Maps -->
<script src="https://aframe.io/releases/{{ version }}/aframe.js"></script>

If we want to serve it locally, we can download the JS build:

Production Version 0.2.0 Minified Development Version 0.2.0 Uncompressed with Source Maps

npm

For more advanced users who want to use their own build steps, we can install through npm:

# Latest stable version (https://www.npmjs.com/package/aframe)
$ npm install aframe

# Bleeding-edge version (https://github.com/aframevr/aframe)
$ npm install aframevr/aframe

Then we can just require A-Frame from our app, perhaps built with Browserify or Webpack:

require('aframe');