index.html

---
layout: full
title: "Ionic: Advanced HTML5 Hybrid Mobile App Framework"
body_css: "home"
---

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="/css/slick.css"/>
<link rel="stylesheet" type="text/css" href="/css/slick-theme.css"/>

<div id="slider" class="primary-row">
  <div class="slide horizontal-gradient">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 fadeIn">
          <h1>
            Create incredible apps.
          </h1>
          <h3>
            Ionic is the beautiful, open source mobile SDK<br>for developing native and progressive web apps.
          </h3>
          <p class="btn-row">
            <a id="repo-download" class="btn btn-primary btn-download desktop-btn" href="/getting-started/">Get Started</a>
            <a class="btn btn-primary btn-get-started desktop-btn" href="/docs/" alt="Docs for v{{ site.latest_version }}">Docs &amp; Help</a>

            <a class="btn btn-primary btn-download mobile-btn" href="/docs/">View Docs</a>
          </p>
          <p class="version-text">
            v{{ site.latest_version }} &#183; {{ site.latest_release_date }} &#183; MIT Licensed
          </p>
        </div>
        <div class="col-sm-6 feature-img one">
          <a href="http://view.ionic.io/" target="_blank"><img class="app-icon one" src="/img/homepage/ionicview-icon_2x.png"><span class="demo-link">Ionic View</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="slide slide-creator">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 fadeIn">
          <img src="/img/homepage/creator-logo.png" class="logo" />
          <h2>Rapidly prototype Ionic apps.</h2>
          <h3>
            A simple drag-&amp;-drop interface building tool for creating real
            ionic apps with a click of the mouse.
          </h3>
          <p class="btn-row">
            <a id="repo-download"
               class="btn btn-primary btn-download desktop-btn"
               href="
http://usecreator.com/?utm_source=ionichome&utm_medium=slider&utm_campaign=Creator%20Framework%20CTA"
               target="_blank">Start prototyping today</a>
            <a class="btn btn-primary btn-download mobile-btn"
               href="
http://usecreator.com/?utm_source=ionichome&utm_medium=slider&utm_campaign=Creator%20Framework%20CTA"
               target="_blank">Start prototyping today</a>
          </p>
        </div>
        <div class="col-sm-6 feature-img img-loaded">
          <div class="creator-preview"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="slide slide-windows">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 fadeIn">
          <h2>
            Ionic
            <img src="/img/homepage/ionic-loves-windows-heart.png" class="heart" /> Windows
          </h2>
          <h3>
            Official <strong>Windows Universal Platform App</strong> support is
            now live in <strong>Ionic 2</strong>, complete with a total UI
            look-and-feel and component set!
          </h3>
          <p class="btn-row">
            <a id="repo-download" class="btn btn-primary btn-download" href="http://blog.ionic.io/announcing-windows-support-in-ionic-2/" target="_blank">Read the blog post</a>
            <a class="btn btn-primary btn-get-started" href="http://ionicframework.com/docs/v2/components/" target="_blank">Component docs</a>
          </p>
        </div>
        <div class="col-sm-6 feature-img  img-loaded">
          <div class="lab-preview"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="slide slide-market">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 fadeIn">
          <h1><strong>The Market</strong> is alive</h1>
          <h3>
            Discover and share all the best community-made starter apps, plugins, themes and more to jumpstart your Ionic app development.
          </h3>
          <p class="btn-row">
            <a id="repo-download" class="btn btn-primary btn-download desktop-btn" href="http://market.ionic.io/" target="_blank">Explore the Market</a>
            <a class="btn btn-primary btn-download mobile-btn" href="http://market.ionic.io/" target="_blank">Explore the Market</a>
          </p>
        </div>
        <div class="col-sm-6 feature-img img-loaded"></div>
      </div>
    </div>
  </div>
</div>

<div class="utility-bar">
  <div class="container">
    <div class="row">
      <ul class="social-row ionic col-md-7">
        <li><a href="https://github.com/driftyco/ionic" target="_blank"><i class="ion-social-github"></i> <span id="gh-stargazers"></span> stars</a></li>
        <li><a href="https://github.com/driftyco/ionic" target="_blank"><i class="ion-fork-repo"></i> <span id="gh-forks"></span> forks</a></li>
        <li><a href="https://twitter.com/IonicFramework" target="_blank"><i class="ion-social-twitter"></i> <span id="tw-followers">Twitter</span></a></li>
      </ul>
      <form action="http://codiqa.createsend.com/t/t/s/jytylh/" method="post" class="input-group col-md-5">
        <input name="cm-jytylh-jytylh" class="form-control" type="email" placeholder="Enter your email for the latest ionic news" required />
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Email me!</button>
        </span>
      </form>
    </div>
  </div>
</div>

<!-- <div class="creator-bar">
  <iframe style='max-width: 100%;' src='https://blab.im/ionic-ionic-2-beta-chat' frameborder='0' height='480' scrolling='none' width='640'></iframe>
</div> -->

<script>

  function digits(n){
    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
  $.ajax({
    dataType: "jsonp",
    url: "https://api.github.com/repos/driftyco/ionic",
    success: function(data){
      if(data) {
        if(data.data.watchers){
          $("#gh-stargazers").html(digits(data.data.watchers));
        }
        if(data.data.forks){
          $("#gh-forks").html(digits(data.data.forks));
        }
      }
    }
  });
  $.ajax({
    dataType: "jsonp",
    url: "https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=ionicframework",
    success: function(data){
      if(data && data.length && data[0].formatted_followers_count){
        $("#tw-followers").html(digits(data[0].formatted_followers_count));
      }
    }
  });
</script>

<div id="learn-more">

  <div class="desc-row">

    <h3>
      Create mobile apps with the web technologies you love.
    </h3>
    <p>
      Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps. Built with Sass, optimized for AngularJS.
    </p>

  </div>

  <div class="feature-row img-performance">

    <h4>Performance obsessed</h4>
    <p>
      Speed is important. So important that you only notice when it isn't there. Ionic is
      built to perform and behave great on the latest mobile devices. Designed with web application best practices like efficient <span class="feature-row-strong">virtual DOM rendering</span>, <span class="feature-row-strong">hardware accelerated transitions</span>, and <span class="feature-row-strong">touch-optimized gestures</span>,
      one thing is for sure: You'll be impressed.
    </p>

  </div>

  <div class="feature-row img-angular img-right">

    <h4>Angular &amp; Ionic</h4>
    <p>
      <span class="feature-row-strong">A match made in heaven.</span> Ionic builds on top of Angular
      to create a powerful SDK well-suited for building rich and robust mobile apps for the app store and the mobile web. Ionic not only looks nice, but its core architecture is built for <span class="feature-row-strong">serious app development</span>.
    </p>

  </div>

  <div class="feature-row img-native">

    <h4>Native focused</h4>
    <p>
      Ionic is modeled off of standard native mobile development SDKs, bringing the UI standards of native apps together with the full power and flexibility of the open web.

      Ionic runs inside <a href="http://cordova.apache.org/" target="_blank">Cordova</a> or
      <a href="http://phonegap.com/" target="_blank">Phonegap</a> to deploy natively, or as a Progressive Web App. <span class="feature-row-strong">Develop once, deploy <em>everywhere</em></span>.
    </p>

  </div>

  <div class="feature-row img-design img-right">

    <h4>Beautifully designed</h4>
    <p>
      Clean, simple, and functional. Ionic has been designed to work and <span class="feature-row-strong">display beautifully</span> on all current mobile devices and platforms. With ready-made mobile components, typography, and a gorgeous (yet extensible) base theme that adapts to each platform, you'll be building in style.
    </p>

  </div>

  <div class="feature-row img-cli">

      <h4>A powerful CLI</h4>
      <p>
        Use just one command to <span class="feature-row-strong">create, build, test, and deploy</span> your Ionic apps onto any platform. With amazing features like Live Reload and integrated logging, you'll already be miles ahead of your native frenemies. Just run <code>npm install -g ionic</code>, and you're good to go!
      </p>

  </div>

  <div class="feature-row img-learn img-right">

    <h4>Easy to learn</h4>
    <p>
      All you need to know are <span class="feature-row-strong">HTML, CSS, and JavaScript:</span> the building blocks of the web. You'll even <a href="http://appcamp.io/">learn AngularJS</a> as you work. We wrote <a href="/docs">tons of docs</a> to get you started and help you level up your mobile development skills. There’s no question <span class="feature-row-strong">you'll be shipping apps in no time</span>.
    </p>

  </div>

  <div class="feature-row img-nerds">

      <h4>Built by web nerds</h4>
      <p>
        Built and maintained by <span class="feature-row-strong">developers <i>and</i> designers</span> passionate about web technologies. Ionic focuses on pushing the web forward across all mobile devices. We're making mobile development with HTML5 awesome.
      </p>

  </div>

</div>

<div class="features">
  <div class="container">
    <h2>More than code. Ionic is an ecosystem.</h2>
    <h4>
      You'll find a suite of mobile development tools and resources at your disposal that make <br>
      Ionic the complete mobile dev package. It's the best way to build apps. Period.</h4>
    <div class="row">
      <div class="col-md-4">
        <img src="/img/homepage/feature-lab.png">
        <h3>Ionic Lab</h3>
        <p>
          Build and test iOS and Android versions side-by-side, instantly:
          <code>$ ionic serve --lab</code> Or, try the GUI version of
          <a href="http://lab.ionic.io">Ionic Lab</a>.
        </p>
      </div>
      <div class="col-md-4">
        <img src="/img/homepage/feature-live-reload.png">
        <h3>LiveReload</h3>
        <p>
          Instantly update your apps with code changes, even
          when running directly on your device. <code>$ ionic run --livereload</code>
        </p>
      </div>
      <!--
      <div class="col-md-4">
        <img src="/img/homepage/feature-splash-icon.png">
        <h3>Icon/Splash Generation</h3>
        <p>
          Generate icons and splash screens for all devices and
          device sizes with a single command. <code>$ ionic resources</code>
        </p>
      </div>
      -->
      <div class="col-md-4">
        <img src="/img/homepage/feature-splash-icon.png">
        <h3>Ionic Market</h3>
        <p>
          Hundreds of quality starter templates, addons, and themes to get you up and running fast.
          <a href="http://market.ionic.io/">Learn more <i class="icon ion-chevron-right"></i></a>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <img src="/img/homepage/feature-view-app.png">
        <h3>View App</h3>
        <p>
          Share your Ionic apps with clients, customers, and testers
          all around the world. All without ever going through
          the App Store! <a href="http://view.ionic.io/">Get the app!</a>
        </p>
      </div>
      <div class="col-md-4">
        <img src="/img/homepage/feature-ngcordova.png">
        <h3>ngCordova</h3>
        <p>
          Angular extensions for easily accessing the full native functionality
          of the device using <a href="http://cordova.apache.org/" target="_blank">Cordova</a>/<a href="http://phonegap.com/" target="_blank">Phonegap</a> plugins. <a href="http://ngcordova.com/">Learn more <i class="icon ion-chevron-right"></i></a>
        </p>
      </div>
      <div class="col-md-4">
        <img src="/img/homepage/feature-platform.png">
        <h3>Ionic Platform</h3>
        <p>
          Full-stack backend services and tools for your Ionic app.
          Finally, a service that embraces mobile web dev! <a href="http://ionic.io/">Learn more <i class="icon ion-chevron-right"></i></a>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="creator-home-feature">
  <hgroup class="desc-row">
    <h3>Prototype apps with <strong>Creator</strong></h3>
    <p>
      A simple drag-and-drop prototyping tool for creating real Ionic apps.
      <br> Export clean, ready-to-use Ionic code or even iOS and Android native
      binaries.
    </p>
    <a class="btn btn-white" href="http://usecreator.com/?utm_source=ionichome&utm_medium=sectional&utm_campaign=Creator%20Framework%20CTA" target="_blank">Try Creator today!</a>
  </hgroup>
</div>

<div>
  {% include testimonials.html %}
</div>


<div class="pre-footer">

  <div class="row ionic">

    <div class="col-sm-6 col-a">
      <h4>
        <a href="/docs/">Getting started <span class="icon ion-arrow-right-c"></span></a>
      </h4>
      <p>
        Learn more about how Ionic was built, why you should use it, and what's included. We'll cover
        the basics and help you get started from the ground up.
      </p>
    </div>

    <div class="col-sm-6 col-b">
      <h4>
        <a href="/docs/components/">Documentation <span class="icon ion-arrow-right-c"></span></a>
      </h4>
      <p>
        What are you waiting for? Take a look and get coding! Our documentation covers all you need to know
        to get an app up and running in minutes.
      </p>
    </div>

  </div>

</div>

<div class="pre-footer footer-social">

  <p>
    Help us change the way the world develops for mobile.
    <span class="spread-word">Spread the word. <i class="icon ion-heart"></i></span>
  </p>
  <ul class="share-row">
    <li class="github-watch">
      <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
    </li>
    <li class="gplus">
      <div class="g-plusone" data-size="medium"></div>
      <script type="text/javascript">
        (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/platform.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </li>
    <li class="twitter-share">
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="ionicframework" data-hashtags="html5,mobile,angularjs" data-related="maxlynch,adamdbradley,benjsperry,drifty">Tweet</a>
    </li>
    <li class="twitter-follow">
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-share-button" data-href="http://ionicframework.com/" data-type="button_count"></div>
    </li>
  </ul>

</div>

<style>
 .navbar {
 }
</style>
<script type="text/javascript" src="/js/slick.js"></script>
<script>
$('#slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: false,
  fade: true,
  cssEase: 'ease-in-out',
  draggable: false,
  autoplay: true,
  autoplaySpeed: 8000,
  focusOnSelect: false,
  // https://github.com/kenwheeler/slick/issues/1537
  accessibility: false
}).on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $slide = $("#slider .slick-current");
  $slide.addClass('slick-fade-out');
  setTimeout(function(){
    $slide.removeClass('slick-fade-out')
  }, 300) // match speed in slick config object above
})

/*
  $.fn.snapBar = function(options) {
    return this.each(function() {
      var $this = $(this);
      var settings = $.extend({
        delay: 0,
        height: 50,
        animationDuration: 500,
        activeClass: 'active'
      });

      setTimeout(function() {
        $this.addClass(settings.activeClass);
      }, settings.delay);
    });
  };

  $('#creator-bar').snapBar();
  */
</script>