A collection of Open Web App templates
Switch branches/tags
Nothing to show
Pull request Compare This branch is 26 commits behind mozilla:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
mortar-app-stub @ 714abee
mortar-game-stub @ 8a12e79
mortar-list-detail @ 0060b7a
mortar-tab-view @ f96dd4f


Open Web App Templates

This is a meta-repo that tracks all the templates that Mozilla is offering for Open Web Apps. Check out the README of each template for usage instructions.

The following templates are available:

  • mortar-app-stub: a blank template that comes only with the basic things required to get started
  • mortar-game-stub: a minimal web game template that handles input and a render loop
  • mortar-list-detail: comes with a layouts library and sets up a list-detail layout for you
  • mortar-tab-view, which is similar to mortar-list-detail but the initial layout has tabs at the button which let you switch between screens.

You can view more documentation here.


You can simply git clone any of the above templates, or use volo to create an app from one of them. If you have node installed, simply run npm install -g volo to get volo. Examples:

  • Using git: git clone <template-github-url> myapp
  • Using volo: volo create myapp mozilla/<template-name>

Each template has documentation in its README specific to what it provides, but there are a few things that all of them provide.

All of them come with an initial project structure, a volo configuration file, initial css and js files, require.js, a basic manifest.webapp, and more. These are all very useful for developing webapps.

You can use volo to fire up a development server, add javascript dependencies, and deploy you app. View this documentation for more details.

require.js is a module system for javascript, and it makes it easy to manage javascript dependencies. Using this, we can easily minify and concatenate all your javascript without any extra work. It also organizes your javascript into a clean structure. Read more about it here.

The rest of the project is simply a starting point for all your HTML, CSS, and javascript.