Awesome Onsen UI

A curated list of awesome Onsen UI resources. Inspired by the awesome list things.

Contributing

Are you planning to write an article, create a package, or even write the app using Onsen UI?

If you would like us to add your awesome Onsen UI content, open an issue ticket with a URL and short description of your content. Pull request are also welcome!

Table of Contents

• Examples
• Community Packages
• Videos
• Articles
• Tools
• Resources

---

Examples

= for JavaScript and jQuery users
= for AngularJS users
= for Angular users
= for React users
= for Vue users

• Onsen UI Kichensink - Official kitchensink example of onsenui.

• Twitter Example - Twitter-like template.

• Spotify Example - Spotify-like template.

• Instagram Example - Instagram-like template.

• Netflix Example - Netflix-like template.

AngularJS

• OnsenUI-YouTube - Example app using YouTube API.

Angular

• ngx-onsenui-kitchensink - Kitchensink example of ngx-onsenui by puku0x.

• angular2-onsenui-pokedex - Example app using Pokédex API.

• ngx-onsenui-ngrx-todo - Onsen UI + Angular + ngrx + PhoneGap.

React

• react-onsenui-kitchensink - Official kitchensink example of react-onsenui.

• react-onsenui-redux-weather

Vue

• vue-onsenui-kitchensink - Official kitchensink example of vue-onsenui.

• Material select dialog with v-ons-alert-dialog

• Circular Reveal for Search Box - Circular reveal effect made with <v-ons-ripple>.

• Carousel with indicator and colors - Made with <v-ons-carousel>.

• vue-onsenui-cordova-iphonex - An example Cordova project supporting iPhone X using Onsen UI

Community Packages

AngularJS

• angularjs-onsenui2-webpack2 - Onsen UI + AngularJS + webpack 2 + PhoneGap + ES2017 + SCSS/cssnext. [Japanese]

Angular

• ngx-onsenui-phonegap-starter - Onsen UI + Angular + PhoneGap. [Japanese]
• ngx-onsenui-pwa - PWA with ngx-onsenui.
• ngx-onsenui on Plunker - Template for Plunker, an Online Code Editor.
• ngx-onsenui on StackBlitz - Template for StackBlitz, an Online VSCode IDE.

React

• react-redux-onsenui-webpack-boilerplate

Vue

• onsenui-vue-router-pwa - Onsen UI + Vue + Vue Router + Axios.

Other Frameworks

• ember-onsenui - Ember.js integration of Onsen UI.
• aurelia-onsenui - Aurelia integration of Onsen UI.
• aurelia-onsenui-kitchensink - Kichensink example of aurelia-onsenui.
• scala-js-onsenui - Scala.js facades for Onsen UI.

Videos

• Creating a very simple app with HTML, CSS & Javascript - Part 1/3 - Onsen UI
• Hybrid app tutorial: Getting started with Onsen UI 2 framework

Articles

Fundamentals

• Official guide of Onsen UI
• Official guide of Onsen UI for AngularJS
• Official guide of Onsen UI for Angular
• Official guide of Onsen UI for React
• Official guide of Onsen UI for Vue

Setup

• Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI - webpack 1

Core Features

• Style your app automatically with Onsen UI - Auto Styling
• Navigation and Tabs in the Onsen UI React Extension - How to use and combine Navigator and Tabbar in React

Theming

• Creating Custom Modifiers - How to theme Onsen UI app.
• Create Awesome User Interfaces On Par With Popular Apps Using Onsen UI - How to create a Spotify-like app.

Routing

• Onsen UI with ui-router - Onsen UI + AngularUI Router.

State Management

• Building a Calculator App with Redux and Onsen UI - Redux

Using Web Services

• Onsen UI YouTube Jukebox with AngularJS - YouTube API
• Creating a Pokémon hybrid app with Angular 2 and Onsen UI - Pokédex API
• Real time Chat App with OnsenUI and Horizon! - Horizon

Platforms

• PWA with Vue JS + Onsen UI [Part 1] - PWA
• Getting Started with Meteor and Onsen UI - Meteor

IDE Integrations

• Getting started with Onsen apps in Visual Studio - Visual Studio 2015

Inside Onsen UI

• Inside Onsen UI: Web Components
• Create reusable and future-proof UI components with Custom Elements v1 and Web Components

Tools

• Onsen UI Playground - Official interactive examples of Onsen UI.

• Monaca - Build and test Cordova apps remotely, from anywhere. Maintained by Onsen UI Team.

• Monaca Cloud IDE - Cloud-based IDE.

• Monaca Localkit - Desktop integration.

• Monaca CLI - CLI.

Resources

Websites

• Official Website
• Official Blog

Communities

• Official Community
• Official Gitter
• Stack Overflow

Newsletters

• Onsen UI Newsletter - The subscription form is located at the bottom of Onsen UI website.

Twitter

• @Onsen_UI - Official Twitter account.
• @massie (Masa Tanaka) - Head of product management for Onsen UI.
• @n_matagawa (Naoki Matagawa) - Engineer.

License