Getting Started

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

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


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.


The boilerplate contains:

We can grab the boilerplate in one of two ways:

Fork on GitHub Download .ZIP


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="{{ version }}/aframe.min.js"></script>
<!-- Development Version, Uncompressed with Source Maps -->
<script src="{{ 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


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

# Latest stable version (
$ npm install aframe
# Bleeding-edge version (
$ npm install aframevr/aframe

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