Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
JavaScript CSS HTML TypeScript ApacheConf Vue
Permalink
Failed to load latest commit information.
bindings chore(angular2-binding): Updated CHANGELOG and bumped version. Jan 18, 2017
core fix(core): Fixed eslint errors. Jan 13, 2017
css-components feat(ons-input): Added transparent modifier. Nov 16, 2016
docs/wcdoc docs(angular2-binding): Add support for Angular 2 docs Jun 21, 2016
examples feat(ons-tab): added ability to add badge to tab item Oct 14, 2016
scripts chore(nightly.sh): Update. Dec 5, 2016
.babelrc feat(test): Added `core-test-separately` to separately launch Karma s… Oct 27, 2016
.bowerrc refactor for bower, separate angular.js from onsenui.js Jan 8, 2014
.editorconfig add editor config Apr 2, 2014
.eslintignore chore(*): fix lint errors Apr 25, 2016
.eslintrc chore(*): fix lint errors Apr 25, 2016
.gitattributes chore(gitattributes): change merge strategy for changelog Oct 19, 2016
.gitignore chore(test): Move `core/test` to `core/test/unit`. Nov 30, 2016
.gitmodules Removed Topcoat from dependencies Jul 22, 2014
.npmignore chore(dist): updated bower and npm files Jun 19, 2015
CHANGELOG.md Merge branch 'master' into splitter-content-load Jan 10, 2017
CONTRIBUTING.md docs(CONTRIBUTING): Trivial fix Jun 24, 2016
CONTRIBUTORS.md docs(CONTRIBUTORS.md): Fix list. Jan 8, 2016
ISSUE_TEMPLATE.md chore(ISSUE_TEMPLATE): Trivial fix. Dec 2, 2016
LICENSE docs(LICENSE): Update year. Mar 30, 2016
README.md add CDNJS version badge in README.md Jan 1, 2017
bower.json fix(dependencies): removed AngularJS dependency from bower.json Nov 24, 2015
circle.yml fix(circle.yml): Fixed broken yarn installation on circle.yml. Jan 13, 2017
gulpfile.babel.js fix(core): Fixed eslint errors. Jan 13, 2017
package.json chore(package): Bump version. Dec 19, 2016
showcase-onsenui.gif docs(README): update Sep 6, 2016
yarn.lock feat(test): Add WebdriverIO-based E2E testing environment for core. Dec 8, 2016

README.md

Onsen UI - Cross-platform HTML5 Mobile App Framework

Onsen UI is a library of UI components to help you create beautiful hybrid and mobile web apps for both Android and iOS using Javascript.

Join us on Gitter Forum TypeScript definitions on DefinitelyTyped Circle CI Coverage Status npm version CDNJS

Onsen UI Todo App

The core library is written in pure Javascript and is framework agnostic which means you can use it with your favorite frameworks such as:

Onsen UI provides styles for both iOS flat design and Android's Material Design. The components will be automatically styled based on the platform which makes it possible to support both iOS and Android with the same source code.

Getting started

We have several resources to help you get started creating hybrid apps with Onsen UI:

Support

If you are having trouble using some component the best place to get help is the Onsen UI Forum. We are also available to answer short questions on Twitter at @Onsen_UI.

Examples with source code

There are lots of sample applications written using Onsen UI. Here are some examples to give you an idea of what kind of apps you can create:

Real time React Chat App with OnsenUI and Horizon!

Real time chat app

Download source code

Weather application using React, Redux and Webpack

Weather application

Download source code

Todo application in pure Javascript

Todo application

Download source code

What is Onsen UI?

  • Open source, free and open for all. It's designed and implemented to deliver unprecedented user interface and user experience for your mobile and hybrid apps. Onsen UI is built on top of Web Components so applications can be built using HTML tags web developers already know and love.

  • Framework agnostic. This means that it can be used with whatever front-end framework you prefer. However, it also provides a binding library for Angular 1 & 2 which makes it easy to integrate our custom tags with these frameworks. React Components for Onsen UI are also available and they play really well with React tooling such as React Hot Loader, Redux or MobX.

  • Completely integrated with Monaca kit, a complete set of tools that makes PhoneGap/Cordova development super simple. Monaca CLI provides Onsen UI templates, device debugger, remote building and any service you might need directly from your terminal. We also have GUI and cloud alternatives if you prefer that over CLI.

  • Beautifully made with flat (iOS) and Material Design (Android) flavors. It automatically styles your app depending on the platform and gives you control to customize it. Check out our Automatic Styling in action. It also includes Onsen CSS Components, a free resource of UI templates with "theme roller" functionality. Developers can pick and choose, grab the code they need, and they're off and running. And they can create their own templates and submit to Onsen UI to be included with other templates available.

  • Fully documented. And if you want even more, we provide an Interactive Tutorial where you can try and modify examples, export your code online and even generate Cordova projects.

  • Community based. Check out our blog, forum and chat to get the latest updates and directly contact the dev team. We are always very active answering questions so you don't get stuck with your apps.

Browser Support

Onsen UI is tested with the following browsers and mobile OS.

  • Android 4.4+ (and Android 4.0+ with Crosswalk engine)
  • iOS8+
  • Google Chrome
  • Safari

What's Included

Getting Started Using Templates

See the Onsen UI Getting Started page. We provide project templates for you in the project-templates repository. You will see the instruction on how to run the project there. For Visual Studio developers we provide directly provide Onsen UI extension.

Getting Started Using Monaca

Monaca is a set of tools that makes hybrid mobile app development with PhoneGap/Cordova simple and easy: debugging suite, push notifications, remote build, back-end, encryption, version control and more. See the Onsen UI Getting Started Page for more information.

$ [sudo] npm -g install monaca
$ monaca create helloworld # And choose the starter template
$ cd helloworld # Switch to the directory
$ monaca preview # Preview on the browser
$ monaca debug # Preview on the real device

Download Onsen UI

Onsen UI is available with npm, bower or jspm. Example:

npm install onsenui

For React:

npm install react-onsenui

For Angular2:

$ npm install angular2-onsenui

How to manually build this project

Clone this repository and run the following commands to build the project:

$ yarn
$ gulp build

This command requires you to install yarn if you haven't already. The files will be built and copied into build folder.

Running Examples

$ gulp serve

Running the test suite

Onsen UI has unit tests for the Web Components as well as end-to-end testing of the binding libraries using Protractor.

Use the following commands to run the unit tests:

$ gulp unit-test

or these commands for end-to-end testing of the binding libraries:

$ cd bindings/angular1
$ gulp e2e-test
$ cd bindings/angular2
$ npm install
$ gulp e2e-test

It will take some time the because it will download a stand-alone Selenium Server and a Chrome webdriver the first time it's executed.

To run a single test or a group of tests use the --specs parameter and provide a comma-separated list of spec files:

$ cd bindings/angular1
$ gulp e2e-test --specs test/e2e/lazyRepeat/scenarios.js

In order to run both the unit tests and the end-to-end tests use the following command:

$ gulp test

How to contribute

Please see our document on contributing. See the full list of contributors here.

Release procedure

Before releasing a new version, verify that the tests are passing and that there are no outstanding breaking issues. For major release with fundamental changes all components must be tested on all supported platforms.

The first step is to add increase the version number in package.json and commit it. After that a new tag must be added:

git tag -a 2.3.4

This tag is important for building the documentation on the website.

The next step is to run the release script:

cd scripts
node dist-release.js

This will build Onsen UI and put the files in the OnsenUI-dist directory.

The last step is to release the package on NPM. From the root of the repository do the following:

cd OnsenUI-dist;
npm publish