Getting started with Onsen UI 2

Start building amazing apps with Onsen UI!

This instruction describes how to setup a local environment for developing Cordova hybrid app. Monaca provides a remote build capability, but you can also use Cordova CLI together with Monaca CLI.

  1. Install Monaca CLI, an Onsen UI toolkit

    First install Node.js. Then, install Monaca CLI via npm, which provides command-line interface for Onsen UI development. Or, if you prefer GUI, download and install Monaca Localkit desktop app for Windows and OS X.

    npm install -g monaca
    Trouble setting up your environment? See Getting Started with Monaca Cloud IDE to start writing code right away!
  2. Create a project

    Create Onsen UI app from starter kit. You can choose Onsen UI version and the framework to use.

                    monaca create helloworld
  3. Run on your device

    Run monaca preview to run on the browser. To run on the device, use monaca debug to run in the debugger.

                    cd helloworld
                    monaca preview # Preview on the browser
                    monaca debug # Run on the device in debugger
                    monaca remote build # Build the app

Monaca Cloud IDE provides a cloud-based development environment with debug and remote build capability.

  1. Sign up for Monaca

    Create your Monaca account and get access to Monaca dashboard.

    Sign Up to Monaca (free)

  2. Create a new project

    Click Create Project and choose a Onsen UI 2.0 template to start with.

  3. Open in Cloud IDE

    Simply click Open and start editing the code.

  4. Run project on the debugger & build the code!

    You can download and install Monaca Debugger to run the project instantly on the device.

    You can also build for Android, iOS and Windows packages using our remote build service.

Onsen UI is distributed as a npm package or Bower package.

  • Download using NPM

    You can install the package using the following commands.

    npm install onsenui

    Onsen UI supports both CommonJS and AMD, so you can use Browserify, RequireJS or Webpack to include in your code.

    Optional bindings: react-onsenui, angular2-onsenui, vue-onsenui. Angular 1 bindings are already included in onsenui package.
  • Download using Bower

    You can use bower to install our distribution package.

    bower install onsenui
  1. Distribution package

    All releases are packaged and published in OnsenUI Distribution Releases.

  2. Full source code

    Source code and the build instructions are avilable at our GitHub repository.

    Download the latest master branch repo

  3. Latest build

    A new build is generated everytime a successful commit is added to master branch.

    Download the latest master branch build