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 front-end SDK for developing hybrid mobile apps with web technologies.
          </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/"
               target="_blank">Start prototyping today</a>
            <a class="btn btn-primary btn-download mobile-btn"
               href="http://usecreator.com/"
               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-lab">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 fadeIn">
          <img src="/img/homepage/ionic-lab-logo.png" class="logo" />
          <h2>Start, build, test, and deploy.</h2>
          <h3>
            Lab is a desktop app for Mac and Windows that makes it a joy to
            create and work with Ionic apps.
          </h3>
          <p class="btn-row">
            <a id="repo-download" class="btn btn-primary btn-download desktop-btn" href="http://lab.ionic.io/" target="_blank">Learn more <i class="ion-chevron-right"></i></a>
            <a class="btn btn-primary btn-download mobile-btn" href="http://lab.ionic.io/" target="_blank">Learn more <i class="ion-chevron-right"></i></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 <a href="/docs/components/">CSS components</a>, gestures, and tools for building highly interactive apps. Built with <a href="http://sass-lang.com/" target="_blank">Sass</a>
      and optimized for <a href="http://angularjs.org/" target="_blank">AngularJS</a>.
    </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. With <span class="feature-row-strong">minimal DOM</span>
      manipulation, <span class="feature-row-strong">zero jQuery</span>, and <span class="feature-row-strong">hardware accelerated</span> transitions,
      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 utilizes <a href="http://angularjs.org/">Angular</a>
      in order to create a powerful SDK most suited to develop rich and robust applications. Ionic not only
      looks nice, but its core architecture is built for <span class="feature-row-strong">serious app development</span>,
      and Angular ties in perfectly.
    </p>

  </div>

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

    <h4>Native focused</h4>
    <p>
      Ionic is modeled on popular native mobile development SDKs, making it easy to understand for
      anyone that has built a native app for <span class="feature-row-strong">iOS</span> or <span class="feature-row-strong">Android</span>. Just drop it in your code to get going,
      and push through <a href="http://cordova.apache.org/">Cordova</a> when it's ready. <span class="feature-row-strong">Develop once, deploy everywhere</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. With tons of popular mobile components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme, you'll wonder how you lived without it.
    </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>Fun 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 learn AngularJS as you work. We wrote <a href="http://learn.ionicframework.com">tons of tutorials</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 nerds (like you)</h4>
      <p>
        Built and maintained by <span class="feature-row-strong">developers <i>and</i> designers</span> passionate about web technologies. Ionic focuses on standards compliant code, is forward thinking, and is managed through <a href="https://github.com/driftyco/ionic">Github</a>. We're making mobile development with HTML5 awesome and simple.
      </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>
    <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. <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>
  {% 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.</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: 10000,
  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>