Mozilla today released A-Frame, an open source library for creating virtual reality web experiences without having to know the powerful (but complex) WebGL. Designed for web developers, A-Frame aims to make it easy to create high-performance and responsive virtual reality experiences that run right out of your browser.

Mozilla’s ‘MozVR‘ team has been experimenting with WebVR for some time now, but today’s release of A-Frame codifies the company’s R&D in this area into a package that’s ready for web developers to explore. A single line of code forms the basis of a VR-capable website.

 <script src=""></script>

From here, web developers can begin to create simple VR websites using familiar HTML markup. Mozilla has put together detailed documentation for those interested in developing with A-Frame.

A big part of A-Frame is seamless responsiveness between VR headsets and even non-VR devices like desktops and smartphones. Out of the box today, A-Frame works with the Oculus Rift DK2 and smartphone VR viewers like Cardboard (Android and iOS), though further headset compatibility is an obvious part of the roadmap. The MozVR team says that A-Frame will soon take advantage of Oculus’ latest v0.8 runtime with 75Hz headtracking. You can find out how to set up your Oculus Rift to work with WebVR here, though smartphone VR viewers and non-VR rendering should work on any WebGL browser.

Mozilla's VR Team Walks Us Through Creating a Basic VR-capable Website
See Also: Have an Oculus Rift and Leap Motion? Try This Web VR Demo Right Now.

A-Frame comes with a collection of building blocks for models, videos, skies, geometries, and more. Also included are controls, animations, and cursors, making it easy for developers to begin building rich interactive VR websites. A-Frame launches with a number of templates to give web developers easy starting points, and Mozilla is encouraging healthy sharing of template derivatives in the hopes of accelerating the creation of WebVR websites.

“If we care about the web and if we think that the web is awesome, we can’t wait for these things to crystallize and mature and bake for five years before we jump in and say ‘let’s make the web for [VR],’ we have to be there from day one,” Joshua Carpenter, Product Design Lead on the MozVR team, said at a Mozilla event last month. “And that really is the mandate of Mozilla and in particular the CTO office that I work out of; it’s research projects into the future of the web platform.”

See Also: How Mozilla Plans to Build VR Into the Foundation of the Web

Talking about the state of WebVR prior to A-Frame, Carpenter said it was powerful, but not readily accessible to millions of existing web developers.

“There’s just one catch. It’s way too hard to create WebVR experiences. The whole value proposition of the web is low friction,” he said. “You don’t have to install anything, it just works, you click on the link. And if you want to create something, you just type a couple lines of code and you publish it and no one can tell you ‘you can’t publish that’.”

A-Frame is designed to make those values a reality for WebVR development.

An Inflection Point for WebVR and the Open Metaverse

Part of the challenge is not only laying a foundation to responsively support proper headtracking and rendering for VR headsets, but also to eliminate the requirement of deep WebGL knowledge from WebVR development.

“A-Frame is aimed squarely at the web developer community, the vast majority of whom have been frozen out of WebVR development because they don’t know WebGL, the powerful-but-complex 3D API that WebVR runs on,” Carpenter told me. “A web developer who wants to create a VR site with A-Frame simply drops it into their markup via a single line of HTML, and is ready to go.”

Learn more about A-Frame at the official FAQ and Getting Started Guide.

This article may contain affiliate links. If you click an affiliate link and buy a product we may receive a small commission which helps support the publication. See here for more information.

  • Best news I’ve had all day. Even more exciting than Force Awakens :)

  • Brian Peiris

    You should really style your links differently, they’re almost impossible to see.

    • Bram Zijp

      It looks fine on my monitor. Maybe an idea to get something better. Or should we (designers) design for colorblinds aswell?

  • Casper Fabricius

    This is awesome. Next step: Integration with ReactJS. (Fullscreen in mobile Safari would also be an immense help, Apple!)

  • A-Frame

    We have React examples on the way :) The team couldn’t resist hacking some together in the run up to launch. Look for them in the next few weeks. We’ll be pushing those and other examples to our new Tumblr:

    • Casper Fabricius

      Nice, you guys rock!

  • ZOMG somebody please pass me a towel. It’s been awhile since I had a geekgasm this massive…this!! THIS is hopefully going to be huge.

  • Donovan Kraeker

    Here’s a Minecraft inspired website using A-Frame:

  • trekkie

    Does AFrame/MozVR work with the Samsung GearVR headset and take advantage of the buttons/trackpad and the occulus hardware ?