The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

When reviewing any new technology, library, or framework, you’ll first ask, “Where does this fit into the stack, and how would it benefit me?” TL;DR: Ionic’s ultimate goal is to make it easier to develop native mobile apps with HTML5, also known as Hybrid apps.

The Missing Piece

Every semi-colon slinging cowboy is out riding alone in the wild-west of building native apps with HTML5. Great tools like PhoneGap and Cordova that package up HTML, CSS, and JavaScript into multi-platform native apps already exist. Developers are skilled at creating web-based applications and there is a magnitude of resources to pull from. However, in today’s landscape we feel there is something missing to easily bridge the gap between HTML5 and native app development.

Compare it to something I know

While Ionic is not an exact one-for-one comparison to Twitter Bootstrap, it may be helpful when explaining where Ionic fits in. Let’s jump in the wayback machine and recall a time prior to the popularity of front-end frameworks. Developers were laying down some mean code, but they had to start from scratch for each project, and individually figure out the quirks of each browser. Eventually developers were given a huge push forward by starting projects with the [insert your favorite front-end framework here].

Great frameworks like Twitter Bootstrap simply make it easier to develop web apps and web sites, not because developers can’t write it themselves, but because it gives them a great starting point to build high-quality projects. Immediate benefits include a slick design and built-in cross-browser testing at no cost. But in my opinion, the great achievements of Twitter Bootstrap are the knowledge sharing it has brought developers, and the excellent way to document and promote recommended design patterns it provides.

Let’s Build Something Awesome

The Ionic Framework has similar goals in that we want to help promote recommended design patterns and document best practices. That’s why the framework is entirely open-source (MIT Licensed) so that as a community we can share our knowledge to build some great apps with HTML5. And as such, we trust others will help share best practices so that we can all continually improve.

Ionic is what lays the foundation for your hybrid app’s HTML, CSS and JavaScript. Instead of each developer having to individually figure out the quirks of native app development with HTML5, we’ve documented our recommendations, written the base CSS, and created a great architecture to build on top of.

HTML5 is ready!

Today’s mobile browsers compared to “yesterday’s” have become exponentially more advanced with modern APIs, and the devices themselves continually increase their performance. The best part is, there’s no sign of either slowing down, it’s only going to get better! There has never been a better time to kick-start a framework centered around native app development with HTML5.

That said, Ionic is built for the devices of today and the future, not for devices built years ago. It’s focused on native app development and not mobile website creation.

Markup and Presentation

We’re confident in our design patterns, but one area we made sure to focus on is giving developers full control. The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with SASS and includes easily customized variables and mixins. While the default design is similar to iOS, we feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.

I’d also like to point out that while Ionic’s appearance is very “iOS 7”, it is purposefully not a “pixel-perfect” replication of it. The more CSS it takes to make it an exact match, the more developers have to override to get their own look. We feel its more important to let developers build an app for their brands rather than working so hard to be like everyone else.

Application Scripting

Ionic not only comes with well documented markup and CSS, but also JavaScript design patterns to help you build some serious apps with similar concepts to iOS and Android. We wanted to let developers create the same kind of powerful UI interactions seen in native apps, like side menus and navigation controllers. We wanted to free hybrid apps from the URL bar and move towards more generic and powerful View Controller concepts.

In the beginning stages of Ionic, AngularJS continually entered our conversations and we quickly found it fit in great with our goals. If you know AngularJS already you’re going to love Ionic, and if you don’t know AngularJS yet then there is no better way to learn it than by building a practical native app. For us AngularJS just made sense, and as you build your first app with Ionic we hope you feel the same way too.


Ionic is that missing piece when creating native apps with web standards. Just drop in some CSS and JavaScript, and you’ll quickly get up to speed developing native applications with HTML5. (And don’t forget it includes our open-source font pack, Ionicons.)

Use our default look and feel or customize it for your brand. And when you are ready to push to the app stores, compile your app with PhoneGap or Cordova (or, and you have a native-feeling app that will run on the most popular of platforms.

Go forth and build something awesome!


  • Astrill Arnold Chitwa

    will have to try this one out this month!

  • Ejaz Karim

    Hello, thanks for the framework. I just went through your post and I’m not sure if I missed it above – do the apps will run on browser?

    • Leonardo Situmorang

      Yes it does. You can run it on browser while in development mode. There’s already a CLI command for that 😉

      • Ejaz Karim

        Thanks. And one more question: when user installs the app will it run just like native apps or it will run under browser? I

        • Leonardo Situmorang

          It ran just like native apps. The demo –which I tried yesterday on my Xiaomi Mi3– ran silky smooth. I was surprised as well as it was my very first experience running hybrid app 😉

  • anna ishmukhametova

    yoiu said. You can run it on browser while in development mode. so but i need push my mobile page to stage as a part of webview of ios-app. cause i already have ios-app i just need add aditional page with mobile-resposnsive design and with some functionality .

  • Roberto Pineda

    What about using ionic on webviews inside Xamarin App ?

  • Espero Shoumma

    This is a fantastic framework. I see some demo apps on Android Store today. The apps were smooth and without any kind of lagging. I was amazed by the performance. Pretty neat.

    Thanks to the Ionic team for building this awesome framework.

  • Kaushik Sekar

    I am not able to do automation in ionic android app with selenium and appium. Can you please suggest me from which tool I can do automation.

  • Xander

    I think Ionic should decouple from Angular and build js libraries that can be pulled in to any javascript framework. I’ve invested quite some time and built a lot of VueJs apps in the last 1,5 years. Before that I worked with AngularJS a lot and before that I worked with BackboneJS. I’m learning to work with ReactJS.

    As you can read, you could imagine that learning ‘yet another js framework’, for me, feels like a big deal. I could..but I just start to get comfortable with my favorite framework.

    I can image other developers using EmberJS, or any other framework out there, will feel the same way. Ionic’s tools( I just installed the v2 [email protected] ) are great. I wish I could work with Ionic without having to learn angular 2.

    If these things are already possible then I’m very pleased. I just started to play with Ionic a week ago, so I’m still finding interesting resources ..very fresh.