onsen-ui Getting started with onsen-ui

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!


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.

Got any onsen-ui Question?