onsen-ui Getting started with onsen-ui


This section provides an overview of what onsen-ui is, and why a developer might want to use it.

It should also mention any large subjects within onsen-ui, and link out to the related topics. Since the Documentation for onsen-ui is new, you may need to create initial versions of those related topics.


Onsen UI is an open-source framework that helps you build hybrid apps with native like performance. It can be used along with several well known JavaScript frameworks such as AngularJS (1 & 2), ReactJS and jQuery.

Loading OnsenUI in a project is as easy as writing some standard tags of HTML in your index.html file:

<!doctype html>
    <html lang="en">
        <meta charset="utf-8">
        <!-- load Onsen structure CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
        <!-- load Onsen theme CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
        <!-- load Onsen main Javascript file -->
        <script src="lib/onsen/js/onsenui.js"></script>
          ons.ready(function() {
            // Init code here
            Hello World!

ons.ready function is the main function that can safely tell us when Onsen UI initialization is done. Then you can use any of OnsenUI components.