Prefer to watch rather than read? Here is our video tutorial to help you get started.
Onsen UI is…
Onsen UI enriches the user’s experience for mobile web apps with natively designed UI elements. It fits well for developing a mobile web app (also referred to as Progressive Web Apps). Onsen UI is also great for developing a hybrid app by using Cordova. For more information on this type of implementation, see Deploy to PWA & Cordova.
Under the hood, Onsen UI consists of three layers:
In short, it simplifies your development, works with any framework, and is future proof!
Interested in diving deeper? Check out our Onsen UI Architecture section.
Here you can get to try out almost all of Onsen UI’s components in a quick sample demo app (kitchen sink app). The two apps below are actually sharing the same source code but are styled to fit their respective platforms using the Auto Styling feature.
Since Onsen UI is primarily designed for iOS and Android devices, it is fully optimized and tested under the following platforms.
For other platforms, please be aware that some components or features may not work correctly. Please follow Old Browser Support for the details.
Now that you’re familiar with what Onsen UI is all about, it’s time to actually start creating your own app. For quicker installation, let’s use the CDN served files. Let’s create a file called
index.html and paste the following HTML.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> </head> <body> <ons-button onclick="alert('Hello World!')">Click Me</ons-button> </body> </html>
While this may be rudimentary, this example contains some important aspects of Onsen UI’s components.
<ons-button>component is used. It is our custom tag that represents a button. All Onsen UI branded components have the
onclick), methods and event listeners. Read more in Attributes, Properties, Methods and Events.
Congratulations! You’ve covered all basics for getting started. Just find Onsen UI components (i.e.
<ons-carousel>…) from our collection, and put them in your app. It’s that simple.
Tip (native alert): You may have noticed, default
alert() function does not fit with native app design. Therefore, Onsen UI provides
ons.notification object for dialogs. Try replacing
Even though an app may emulate the visual components of an iPhone or Android, the goal of a seamless app is to ensure that touch & feel does not disrupt the expected user experience. That’s where the users feel the “uncanny valley”.
To fill the gap, Onsen UI gives you the ability to simulate page transition animations, the ripple effect, and genuine and high quality feeling components all to help the user experience. Details make the difference.
In the above example, there are two pages defined by
<ons-page> component. Then,
<ons-navigator> component provides native-like page transition. If you want to make your app more native-like, please proceed to Fundamentals to learn how to fully utilize the details.
In Onsen UI, everything from visual widgets to small details are carefully crafted to help your application look fully native.
Onsen UI has a couple of projects to help you get started right away.