exmples.html

    <h2 id="examples">Examples</h2>

    <p>
      The list of examples that follows, while long, is not exhaustive. If you've
      worked on an app that uses Backbone, please add it to the
      <a href="https://github.com/documentcloud/backbone/wiki/Projects-and-Companies-using-Backbone">wiki page of Backbone apps</a>.
    </p>

    <p id="examples-todos">
      <a href="http://jgn.me/">Jérôme Gravel-Niquet</a> has contributed a
      <a href="examples/todos/index.html">Todo List application</a>
      that is bundled in the repository as Backbone example. If you're wondering
      where to get started with Backbone in general, take a moment to
      <a href="docs/todos.html">read through the annotated source</a>. The app uses a
      <a href="docs/backbone-localstorage.html">LocalStorage adapter</a>
      to transparently save all of your todos within your browser, instead of
      sending them to a server. Jérôme also has a version hosted at
      <a href="http://localtodos.com/">localtodos.com</a> that uses a
      <a href="http://github.com/jeromegn/backbone-mootools">MooTools-backed version of Backbone</a>
      instead of jQuery.
    </p>

    <div style="text-align: center;">
      <a href="examples/todos/index.html">
        <img width="400" height="427" data-original="docs/images/todos.png" alt="Todos" class="example_image" />
      </a>
    </div>

    <h2 id="examples-documentcloud">DocumentCloud</h2>

    <p>
      The <a href="http://www.documentcloud.org/public/#search/">DocumentCloud workspace</a>
      is built on Backbone.js, with <i>Documents</i>, <i>Projects</i>,
      <i>Notes</i>, and <i>Accounts</i> all as Backbone models and collections.
      If you're interested in history &mdash; both Underscore.js and Backbone.js
      were originally extracted from the DocumentCloud codebase, and packaged
      into standalone JS libraries.
    </p>

    <div style="text-align: center;">
      <a href="http://www.documentcloud.org/public/#search/">
        <img width="550" height="453" data-original="docs/images/dc-workspace.png" alt="DocumentCloud Workspace" class="example_image" />
      </a>
    </div>

    <h2 id="examples-usa-today">USA Today</h2>

    <p>
      <a href="http://usatoday.com">USA Today</a> takes advantage of the modularity of
      Backbone's data/model lifecycle &mdash; which makes it simple to create, inherit,
      isolate, and link application objects &mdash; to keep the codebase both manageable and efficient.
      The new website also makes heavy use of the Backbone Router to control the
      page for both pushState-capable and legacy browsers.
      Finally, the team took advantage of Backbone's Event module to create a
      PubSub API that allows third parties and analytics packages to hook into the
      heart of the app.
    </p>

    <div style="text-align: center;">
      <a href="http://usatoday.com">
        <img width="550" height="532" data-original="docs/images/usa-today.png" alt="USA Today" class="example_image" />
      </a>
    </div>

    <h2 id="examples-rdio">Rdio</h2>

    <p>
      <a href="http://rdio.com/new">New Rdio</a> was developed from the ground
      up with a component based framework based on Backbone.js. Every component
      on the screen is dynamically loaded and rendered, with data provided by the
      <a href="http://developer.rdio.com/">Rdio API</a>. When changes are pushed,
      every component can update itself without reloading the page or interrupting
      the user's music. All of this relies on Backbone's views and models,
      and all URL routing is handled by Backbone's Router. When data changes are
      signaled in realtime, Backbone's Events notify the interested components
      in the data changes. Backbone forms the core of the new, dynamic, realtime
      Rdio web and <i>desktop</i> applications.
    </p>

    <div style="text-align: center;">
      <a href="http://rdio.com/new">
        <img width="550" height="344" data-original="docs/images/rdio.png" alt="Rdio" class="example_image" />
      </a>
    </div>

    <h2 id="examples-linkedin">LinkedIn Mobile</h2>

    <p>
      <a href="http://www.linkedin.com/">LinkedIn</a> used Backbone.js to create
      its <a href="http://www.linkedin.com/static?key=mobile">next-generation HTML5 mobile web app</a>.
      Backbone made it easy to keep the app modular, organized and extensible so
      that it was possible to program the complexities of LinkedIn's user experience.
      The app also uses <a href="http://zeptojs.com/">Zepto</a>,
      <a href="http://documentcloud.github.com/underscore/">Underscore.js</a>,
      <a href="http://sass-lang.com/">SASS</a>, <a href="http://cubiq.org/iscroll">iScroll</a>,
      HTML5 LocalStorage and Canvas. The tech team blogged about
      <a href="http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-apps">their experiences using LocalStorage</a>
      to improve mobile performance.
    </p>

    <div style="text-align: center;">
      <a href="http://www.linkedin.com/static?key=mobile">
        <img width="550" height"454" data-original="docs/images/linkedin-mobile.png" alt="LinkedIn Mobile" class="example_image" />
      </a>
    </div>

    <h2 id="examples-hulu">Hulu</h2>

    <p>
      <a href="http://hulu.com">Hulu</a> used Backbone.js to build its next
      generation online video experience. With Backbone as a foundation, the
      web interface was rewritten from scratch so that all page content can
      be loaded dynamically with smooth transitions as you navigate.
      Backbone makes it easy to move through the app quickly without the
      reloading of scripts and embedded videos, while also offering models and
      collections for additional data manipulation support.
    </p>

    <div style="text-align: center;">
      <a href="http://hulu.com">
        <img width="550" height="449" data-original="docs/images/hulu.png" alt="Hulu" class="example_image" />
      </a>
    </div>

    <h2 id="examples-flow">Flow</h2>

    <p>
      <a href="http://www.metalabdesign.com/">MetaLab</a> used Backbone.js to create
      <a href="http://www.getflow.com/">Flow</a>, a task management app for teams. The
      workspace relies on Backbone.js to construct task views, activities, accounts,
      folders, projects, and tags. You can see the internals under <tt>window.Flow</tt>.
    </p>

    <div style="text-align: center;">
      <a href="http://www.getflow.com/">
        <img width="550" height="416" data-original="docs/images/flow.png" alt="Flow" class="example_image" />
      </a>
    </div>

    <h2 id="examples-gilt">Gilt Groupe</h2>

    <p>
      <a href="http://gilt.com">Gilt Groupe</a> uses Backbone.js to build multiple
      applications across their family of sites.
      <a href="http://m.gilt.com">Gilt's mobile website</a> uses Backbone and
      <a href="http://zeptojs.com">Zepto.js</a> to create a blazing-fast
      shopping experience for users on-the-go, while
      <a href="http://live.gilt.com">Gilt Live</a> combines Backbone with
      WebSockets to display the items that customers are buying in real-time. Gilt's search
      functionality also uses Backbone to filter and sort products efficiently
      by moving those actions to the client-side.
    </p>

    <div style="text-align: center;">
      <a href="http://www.gilt.com/">
        <img width="550" height="444" data-original="docs/images/gilt.jpg" alt="Gilt Groupe" class="example_image" />
      </a>
    </div>

    <h2 id="examples-newsblur">NewsBlur</h2>

    <p>
      <a href="http://www.newsblur.com">NewsBlur</a> is an RSS feed reader and
      social news network with a fast and responsive UI that feels like a
      native desktop app. Backbone.js was selected for
      <a href="http://www.ofbrooklyn.com/2012/11/13/backbonification-migrating-javascript-to-backbone/">a major rewrite and transition from spaghetti code</a>
      because of its powerful yet simple feature set, easy integration, and large
      community. If you want to poke around under the hood, NewsBlur is also entirely
      <a href="http://github.com/samuelclay/NewsBlur">open-source</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://newsblur.com">
        <img width="510" height="340" data-original="docs/images/newsblur.jpg" alt="Newsblur" class="example_retina" />
      </a>
    </div>

    <h2 id="examples-wordpress">WordPress.com</h2>

  	<p>
  		<a href="http://wordpress.com/">WordPress.com</a> is the software-as-a-service
  		version of <a href="http://wordpress.org">WordPress</a>. It uses Backbone.js
  		Models, Collections, and Views in its
  		<a href="http://en.blog.wordpress.com/2012/05/25/notifications-refreshed/">Notifications system</a>.  Backbone.js was selected
  		because it was easy to fit into the structure of the application, not the
  		other way around. <a href="http://automattic.com">Automattic</a>
  		(the company behind WordPress.com) is integrating Backbone.js into the
  		Stats tab and other features throughout the homepage.
  	</p>

    <div style="text-align: center;">
      <a href="http://wordpress.com/">
        <img width="550" height="387" data-original="docs/images/wpcom-notifications.png" alt="WordPress.com Notifications"
  	title="WordPress.com Notifications" class="example_image" />
      </a>
    </div>

    <h2 id="examples-foursquare">Foursquare</h2>

    <p>
      Foursquare is a fun little startup that helps you meet up with friends,
      discover new places, and save money. Backbone Models are heavily used in
      the core JavaScript API layer and Views power many popular features like
      the <a href="https://foursquare.com">homepage map</a> and
      <a href="https://foursquare.com/seriouseats/list/the-best-doughnuts-in-ny">lists</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://foursquare.com">
        <img width="550" height="427" data-original="docs/images/foursquare.png" alt="Foursquare" class="example_image" />
      </a>
    </div>

    <h2 id="examples-bitbucket">Bitbucket</h2>

    <p>
      <a href="http://www.bitbucket.org">Bitbucket</a> is a free source code hosting
      service for Git and Mercurial. Through its models and collections,
      Backbone.js has proved valuable in supporting Bitbucket's
      <a href="https://api.bitbucket.org">REST API</a>, as well as newer
      components such as in-line code comments and approvals for pull requests.
      Mustache templates provide server and client-side rendering, while a custom
      <a href="https://developers.google.com/closure/library/">Google Closure</a>
      inspired life-cycle for widgets allows Bitbucket to decorate existing DOM
      trees and insert new ones.
    </p>

    <div style="text-align: center;">
      <a href="http://www.bitbucket.org">
        <img width="550" height="356" data-original="docs/images/bitbucket.png" alt="Bitbucket" class="example_image" />
      </a>
    </div>

    <h2 id="examples-disqus">Disqus</h2>

    <p>
      <a href="http://www.disqus.com">Disqus</a> chose Backbone.js to power the
      latest version of their commenting widget. Backbone&rsquo;s small
      footprint and easy extensibility made it the right choice for Disqus&rsquo;
      distributed web application, which is hosted entirely inside an iframe and
      served on thousands of large web properties, including IGN, Wired, CNN, MLB, and more.
    </p>

    <div style="text-align: center;">
      <a href="http://www.disqus.com">
        <img width="550" height="454" data-original="docs/images/disqus.png" alt="Disqus" class="example_image" />
      </a>
    </div>

    <h2 id="examples-khan-academy">Khan Academy</h2>

    <p>
      <a href="http://www.khanacademy.org">Khan Academy</a> is on a mission to
      provide a free world-class education to anyone anywhere. With thousands of
      videos, hundreds of JavaScript-driven exercises, and big plans for the
      future, Khan Academy uses Backbone to keep frontend code modular and organized.
      User profiles and goal setting are implemented with Backbone,
      <a href="http://jquery.com/">jQuery</a> and
      <a href="http://handlebarsjs.com/">Handlebars</a>, and most new feature
      work is being pushed to the client side, greatly increasing the quality of
      <a href="https://github.com/Khan/khan-api/">the API</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://www.khanacademy.org">
        <img width="550" height="454" data-original="docs/images/khan-academy.png" alt="Khan Academy" class="example_image" />
      </a>
    </div>

    <h2 id="examples-do">Do</h2>

    <p>
      <a href="http://do.com">Do</a> is a social productivity app that makes it
      easy to work on tasks, track projects, and take notes with your team.
      The <a href="http://do.com">Do.com</a> web application was built from the
      ground up to work seamlessly on your smartphone, tablet and computer. The
      team used Backbone, <a href="http://coffeescript.org/">CoffeeScript</a> and <a href="http://handlebarsjs.com/">Handlebars</a> to build a full-featured
      app in record time and rolled their own extensions for complex navigation
      and model sync support.
    </p>

    <div style="text-align: center;">
      <a href="http://do.com">
        <img width="550" height="425" data-original="docs/images/do.png" alt="Do" class="example_image" />
      </a>
    </div>

    <h2 id="examples-irccloud">IRCCloud</h2>

    <p>
      <a href="http://irccloud.com/">IRCCloud</a>
      is an always-connected IRC client that you use in your
      browser &mdash; often leaving it open all day in a tab.
      The sleek web interface communicates with an
      Erlang backend via websockets and the
      <a href="https://github.com/irccloud/irccloud-tools/wiki/API-Overview">IRCCloud API</a>.
      It makes heavy use of Backbone.js events, models, views and routing to keep
      your IRC conversations flowing in real time.
    </p>

    <div style="text-align: center;">
      <a href="http://irccloud.com/">
        <img width="550" height="392" data-original="docs/images/irccloud.png" alt="IRCCloud" class="example_image" />
      </a>
    </div>

    <h2 id="examples-pitchfork">Pitchfork</h2>

    <p>
      <a href="http://pitchfork.com/">Pitchfork</a> uses Backbone.js to power
      its site-wide audio player, <a href="http://pitchfork.com/tv/">Pitchfork.tv</a>,
      location routing, a write-thru page fragment cache, and more. Backbone.js
      (and <a href="http://underscorejs.org/">Underscore.js</a>) helps the team
      create clean and modular components,
      move very quickly, and focus on the site, not the spaghetti.
    </p>

    <div style="text-align: center;">
      <a href="http://pitchfork.com/">
        <img width="550" height="428" data-original="docs/images/pitchfork.png" alt="Pitchfork" class="example_image" />
      </a>
    </div>

    <h2 id="examples-spin">Spin</h2>

    <p>
      <a href="http://spin.com/">Spin</a> pulls in the
      <a href="http://www.spin.com/news">latest news stories</a> from
      their internal API onto their site using Backbone models and collections, and a
      custom <tt>sync</tt> method. Because the music should never stop playing,
      even as you click through to different "pages", Spin uses a Backbone router
      for navigation within the site.
    </p>

    <div style="text-align: center;">
      <a href="http://spin.com/">
        <img width="550" height="543" data-original="docs/images/spin.png" alt="Spin" class="example_image" />
      </a>
    </div>

    <h2 id="examples-walmart">Walmart Mobile</h2>

    <p>
      <a href="http://www.walmart.com/">Walmart</a> used Backbone.js to create the new version
      of <a href="http://mobile.walmart.com/r/phoenix">their mobile web application</a> and
      created two new frameworks in the process.
      <a href="http://walmartlabs.github.com/thorax/">Thorax</a> provides mixins, inheritable
      events, as well as model and collection view bindings that integrate directly with
      <a href="http://handlebarsjs.com/">Handlebars</a> templates.
      <a href="http://walmartlabs.github.com/lumbar/">Lumbar</a> allows the application to be
      split into modules which can be loaded on demand, and creates platform specific builds
      for the portions of the web application that are embedded in Walmart's native Android
      and iOS applications.
    </p>

    <div style="text-align: center;">
      <a href="http://mobile.walmart.com/r/phoenix">
        <img width="256" height="500" data-original="docs/images/walmart-mobile.png" alt="Walmart Mobile" class="example_image" />
      </a>
    </div>

    <h2 id="examples-groupon">Groupon Now!</h2>

    <p>
      <a href="http://www.groupon.com/now">Groupon Now!</a> helps you find
      local deals that you can buy and use right now. When first developing
      the product, the team decided it would be AJAX heavy with smooth transitions
      between sections instead of full refreshes, but still needed to be fully
      linkable and shareable. Despite never having used Backbone before, the
      learning curve was incredibly quick &mdash; a prototype was hacked out in an
      afternoon, and the team was able to ship the product in two weeks.
      Because the source is minimal and understandable, it was easy to
      add several Backbone extensions for Groupon Now!: changing the router
      to handle URLs with querystring parameters, and adding a simple
      in-memory store for caching repeated requests for the same data.
    </p>

    <div style="text-align: center;">
      <a href="http://www.groupon.com/now">
        <img width="550" height="466" data-original="docs/images/groupon.png" alt="Groupon Now!" class="example_image" />
      </a>
    </div>

    <h2 id="examples-basecamp">Basecamp</h2>

    <p>
      <a href="http://37signals.com/">37Signals</a> chose Backbone.js to create
      the <a href="http://basecamp.com/calendar">calendar feature</a> of its
      popular project management software <a href="http://basecamp.com/">Basecamp</a>.
      The Basecamp Calendar uses Backbone.js models and views in conjunction with the
      <a href="https://github.com/sstephenson/eco">Eco</a> templating system to
      present a polished, highly interactive group scheduling interface.
    </p>

    <div style="text-align: center;">
      <a href="http://basecamp.com/calendar">
        <img width="530" height="380" data-original="docs/images/basecamp-calendar.jpg" alt="Basecamp Calendar" class="example_image" />
      </a>
    </div>

    <h2 id="examples-slavery-footprint">Slavery Footprint</h2>

    <p>
      <a href="http://slaveryfootprint.org/survey">Slavery Footprint</a>
      allows consumers to visualize how their consumption habits are
      connected to modern-day slavery and provides them with an opportunity
      to have a deeper conversation with the companies that manufacture the
      goods they purchased.
      Based in Oakland, California, the Slavery Footprint team works to engage
      individuals, groups, and businesses to build awareness for and create
      deployable action against forced labor, human trafficking, and modern-day
      slavery through online tools, as well as off-line community education and
      mobilization programs.
    </p>

    <div style="text-align: center;">
      <a href="http://slaveryfootprint.org/survey">
        <img width="550" height="394" data-original="docs/images/slavery-footprint.png" alt="Slavery Footprint" class="example_image" />
      </a>
    </div>

    <h2 id="examples-stripe">Stripe</h2>

    <p>
      <a href="https://stripe.com">Stripe</a> provides an API for accepting
      credit cards on the web. Stripe's
      <a href="https://manage.stripe.com">management interface</a> was recently
      rewritten from scratch in Coffeescript using Backbone.js as the primary
      framework, <a href="https://github.com/sstephenson/eco">Eco</a> for templates, <a href="http://sass-lang.com/">Sass</a> for stylesheets, and <a href="https://github.com/sstephenson/stitch">Stitch</a> to package
      everything together as <a href="http://commonjs.org/">CommonJS</a> modulas. The new app uses
      <a href="https://stripe.com/docs/api">Stripe's API</a> directly for the
      majority of its actions; Backbone.js models made it simple to map
      client-side models to their corresponding RESTful resources.
    </p>

    <div style="text-align: center;">
      <a href="https://stripe.com">
        <img width="555" height="372" data-original="docs/images/stripe.png" alt="Stripe" class="example_image" />
      </a>
    </div>

    <h2 id="examples-airbnb">Airbnb</h2>

    <p>
      <a href="http://airbnb.com">Airbnb</a> uses Backbone in many of its products.
      It started with <a href="http://m.airbnb.com">Airbnb Mobile Web</a>
      (built in six weeks by a team of three) and has since grown to
      <a href="https://www.airbnb.com/wishlists/popular">Wish Lists</a>,
      <a href="http://www.airbnb.com/match">Match</a>,
      <a href="http://www.airbnb.com/s/">Search</a>, Communities, Payments, and
      Internal Tools.
    </p>

    <div style="text-align: center;">
      <a href="http://m.airbnb.com/">
        <img width="500" height="489" data-original="docs/images/airbnb.png" alt="Airbnb" class="example_image" />
      </a>
    </div>

    <h2 id="examples-diaspora">Diaspora</h2>

    <p>
      <a href="http://www.joindiaspora.com/">Diaspora</a> is a distributed social
      network, formed from a number of independently operated <i>pods</i>.
      You own your personal data, and control with whom you share.
      All of Diaspora is <a href="https://github.com/diaspora/diaspora">open-source</a>
      code, built with <a href="http://rubyonrails.org/">Rails</a> and Backbone.js.
    </p>

    <div style="text-align: center;">
      <a href="http://www.joindiaspora.com/">
        <img width="550" height="394" data-original="docs/images/diaspora.png" alt="Diaspora" class="example_image" />
      </a>
    </div>

    <h2 id="examples-soundcloud">SoundCloud Mobile</h2>

    <p>
      <a href="http://soundcloud.com">SoundCloud</a> is the leading sound sharing
      platform on the internet, and Backbone.js provides the foundation for
      <a href="http://m.soundcloud.com">SoundCloud Mobile</a>. The project uses
      the public SoundCloud <a href="http://soundcloud.com/developers">API</a>
      as a data source (channeled through a nginx proxy),
      <a href="http://api.jquery.com/category/plugins/templates/">jQuery templates</a>
      for the rendering, <a href="http://docs.jquery.com/Qunit">Qunit
      </a> and <a href="http://www.phantomjs.org/">PhantomJS</a> for
      the testing suite. The JS code, templates and CSS are built for the
      production deployment with various Node.js tools like
      <a href="https://github.com/dsimard/ready.js">ready.js</a>,
      <a href="https://github.com/mde/jake">Jake</a>,
      <a href="https://github.com/tmpvar/jsdom">jsdom</a>.
      The <b>Backbone.History</b> was modified to support the HTML5 <tt>history.pushState</tt>.
      <b>Backbone.sync</b> was extended with an additional SessionStorage based cache
      layer.
    </p>

    <div style="text-align: center;">
      <a href="http://m.soundcloud.com">
        <img width="266" height="500" data-original="docs/images/soundcloud.png" alt="SoundCloud" class="example_image" />
      </a>
    </div>

    <h2 id="examples-artsy">Art.sy</h2>

    <p>
      <a href="http://art.sy">Art.sy</a> is a place to discover art you'll
      love. Art.sy is built on Rails, using
      <a href="https://github.com/intridea/grape">Grape</a> to serve a robust
      <a href="http://art.sy/api">JSON API</a>. The main site is a single page
      app written in Coffeescript and uses Backbone to provide structure around
      this API. An admin panel and partner CMS have also been extracted into
      their own API-consuming Backbone projects.
    </p>

    <div style="text-align: center;">
      <a href="http://art.sy">
        <img width="550" height="550" data-original="docs/images/artsy.png" alt="Art.sy" class="example_image" />
      </a>
    </div>

    <h2 id="examples-pandora">Pandora</h2>

    <p>
      When <a href="http://www.pandora.com/newpandora">Pandora</a> redesigned
      their site in HTML5, they chose Backbone.js to help
      manage the user interface and interactions. For example, there's a model
      that represents the "currently playing track", and multiple views that
      automatically update when the current track changes. The station list is a
      collection, so that when stations are added or changed, the UI stays up to date.
    </p>

    <div style="text-align: center;">
      <a href="http://www.pandora.com/newpandora">
        <img width="476" height="359" data-original="docs/images/pandora.png" alt="Pandora" class="example_image" />
      </a>
    </div>

    <h2 id="examples-inkling">Inkling</h2>

    <p>
      <a href="http://inkling.com/">Inkling</a> is a cross-platform way to
      publish interactive learning content.
      <a href="https://www.inkling.com/read/">Inkling for Web</a> uses Backbone.js
      to make hundreds of complex books — from student textbooks to travel guides and
      programming manuals — engaging and accessible on the web. Inkling supports
      WebGL-enabled 3D graphics, interactive assessments, social sharing,
      and a system for running practice code right
      in the book, all within a single page Backbone-driven app. Early on, the
      team decided to keep the site lightweight by using only Backbone.js and
      raw JavaScript. The result? Complete source code weighing in at a mere
      350kb with feature-parity across the iPad, iPhone and web clients.
      Give it a try with
      <a href="https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-4/function-definition-expressions">this excerpt from JavaScript: The Definitive Guide</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://inkling.com">
        <img width="550" height="361" data-original="docs/images/inkling.png" alt="Inkling" class="example_image" />
      </a>
    </div>

    <h2 id="examples-code-school">Code School</h2>

    <p>
      <a href="http://www.codeschool.com">Code School</a> courses teach people
      about various programming topics like <a href="http://coffeescript.org">CoffeeScript</a>, CSS, Ruby on Rails,
      and more. The new Code School course
      <a href="http://coffeescript.codeschool.com/levels/1/challenges/1">challenge page</a>
      is built from the ground up on Backbone.js, using
      everything it has to offer: the router, collections, models, and complex
      event handling. Before, the page was a mess of <a href="http://jquery.com/">jQuery</a> DOM manipulation
      and manual Ajax calls. Backbone.js helped introduce a new way to
      think about developing an organized front-end application in Javascript.
    </p>

    <div style="text-align: center;">
      <a href="http://www.codeschool.com">
        <img width="550" height="482" data-original="docs/images/code-school.png" alt="Code School" class="example_image" />
      </a>
    </div>

    <h2 id="examples-cloudapp">CloudApp</h2>

    <p>
      <a href="http://getcloudapp.com">CloudApp</a> is simple file and link
      sharing for the Mac. Backbone.js powers the web tools
      which consume the <a href="http://developer.getcloudapp.com">documented API</a>
      to manage Drops. Data is either pulled manually or pushed by
      <a href="http://pusher.com">Pusher</a> and fed to
      <a href="http://github.com/janl/mustache.js">Mustache</a> templates for
      rendering. Check out the <a href="http://cloudapp.github.com/engine">annotated source code</a>
      to see the magic.
    </p>

    <div style="text-align: center;">
      <a href="http://getcloudapp.com">
        <img width="550" height="426" data-original="docs/images/cloudapp.png" alt="CloudApp" class="example_image" />
      </a>
    </div>

    <h2 id="examples-seatgeek">SeatGeek</h2>

    <p>
      <a href="http://seatgeek.com">SeatGeek</a>'s stadium ticket maps were originally
      developed with <a href="http://prototypejs.org/">Prototype.js</a>. Moving to Backbone.js and <a href="http://jquery.com/">jQuery</a> helped organize
      a lot of the UI code, and the increased structure has made adding features
      a lot easier. SeatGeek is also in the process of building a mobile
      interface that will be Backbone.js from top to bottom.
    </p>

    <div style="text-align: center;">
      <a href="http://seatgeek.com">
        <img width="550" height="455" data-original="docs/images/seatgeek.png" alt="SeatGeek" class="example_image" />
      </a>
    </div>

    <h2 id="examples-easel">Easel</h2>

    <p>
      <a href="http://easel.io">Easel</a> is an in-browser, high fidelity web
      design tool that integrates with your design and development
      process. The Easel team uses CoffeeScript, Underscore.js and Backbone.js for
      their <a href="http://easel.io/demo">rich visual editor</a> as well as other
      management functions throughout the site. The structure of Backbone allowed
      the team to break the complex problem of building a visual editor into
      manageable components and still move quickly.
    </p>

    <div style="text-align: center;">
      <a href="http://easel.io">
        <img width="550" height="395" data-original="docs/images/easel.png" alt="Easel" class="example_image" />
      </a>
    </div>

    <h2 id="examples-prose">Prose</h2>

    <p>
      <a href="http://prose.io">Prose</a> is a content editor for GitHub,
      optimized for managing websites built with
      <a href="http://jekyllrb.com/">Jekyll</a> and Github Pages. Prose is
      itself implemented as a static Jekyll site, using Backbone.js to render
      the views and handle the routes, as well as
      <a href="http://github.com/michael/github">Github.js</a>, a small data
      abstraction layer for manipulating files directly on Github. Read more in the
      <a href="http://developmentseed.org/blog/2012/june/25/prose-a-content-editor-for-github/">official introduction post</a>,
      or <a href="https://github.com/prose/prose">take a look at the source code</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://prose.io">
        <img width="550" height="447" data-original="docs/images/prose.png" alt="Prose" class="example_image" />
      </a>
    </div>


    <h2 id="examples-scrollkit">scroll kit</h2>

    <p>
      <a href="http://scrollkit.com/">scroll kit</a> is a new kind of website
      builder that makes designing a web page feel more like drawing.
      The workspace is a single-page web application built with Rails and Backbone.js.
      In scroll kit, every DOM element is associated with a Backbone model, so that
      style changes that are made to an element automatically update the model
      and propagate the change across all its views.
      <a href="http://scrollkit.com/demo">Try it out</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://scrollkit.com">
        <img width="550" height="453" data-original="docs/images/scrollkit.png" alt="scroll kit" class="example_image" />
      </a>
    </div>

    <h2 id="examples-battlefield">Battlefield Play4Free</h2>

    <p>
      <a href="http://battlefield.play4free.com/">Battlefield Play4Free</a> is
      the latest free-to-play first person shooter from the same team that
      created Battlefield Heroes. The in-game HTML5 front-end for makes heavy use of
      Backbone's views, models and collections to help keep the code modular
      and structured.
    </p>

    <div style="text-align: center;">
      <a href="http://battlefield.play4free.com/">
        <img width="550" height="435" data-original="docs/images/battlefield.png" alt="Battlefield Play4Free" class="example_image" />
      </a>
    </div>
    
    <h2 id="examples-syllabus">Syllabus</h2>

    <p>
      <a href="http://product.voxmedia.com/post/25113965826/introducing-syllabus-vox-medias-s3-powered-liveblog">Syllabus</a>
      is the new live blogging platform used by 
      <a href="http://www.theverge.com/">The Verge</a> 
      and other <a href="http://www.voxmedia.com/">Vox Media</a> sites.
      Syllabus uses Backbone on both ends: an editorial dashboard and the live blog 
      page itself. In the back, Backbone is used to provide a 
      single-page experience for uploading, writing, editing and publishing content. 
      On the live blog, Backbone manages fetching a JSON API feed, and updating 
      the infinite-scrolling river of updates with new and revised content.
    </p>

    <div style="text-align: center;">
      <a href="http://live.theverge.com/">
        <img width="510" height="354" data-original="docs/images/syllabus.jpg" alt="Syllabus" class="example_retina" />
      </a>
    </div>

    <h2 id="examples-salon">Salon.io</h2>

    <p>
      <a href="http://salon.io">Salon.io</a> provides a space where photographers,
      artists and designers freely arrange their visual art on virtual walls.
      <a href="http://salon.io">Salon.io</a> runs on <a href="http://rubyonrails.org/">Rails</a>, but does not use
      much of the traditional stack, as the entire frontend is designed as a
      single page web app, using Backbone.js and
      <a href="http://coffeescript.org">CoffeeScript</a>.
    </p>

    <div style="text-align: center;">
      <a href="http://salon.io">
        <img width="550" height="483" data-original="docs/images/salon.png" alt="Salon.io" class="example_image" />
      </a>
    </div>

    <h2 id="examples-tilemill">TileMill</h2>

    <p>
      Our fellow
      <a href="http://www.newschallenge.org/">Knight Foundation News Challenge</a>
      winners, <a href="http://mapbox.com/">MapBox</a>, created an open-source
      map design studio with Backbone.js:
      <a href="http://mapbox.github.com/tilemill/">TileMill</a>.
      TileMill lets you manage map layers based on shapefiles and rasters, and
      edit their appearance directly in the browser with the
      <a href="https://github.com/mapbox/carto">Carto styling language</a>.
      Note that the gorgeous <a href="http://mapbox.com/">MapBox</a> homepage
      is also a Backbone.js app.
    </p>

    <div style="text-align: center;">
      <a href="http://mapbox.github.com/tilemill/">
        <img width="544" height="375" data-original="docs/images/tilemill.png" alt="TileMill" class="example_image" />
      </a>
    </div>

    <h2 id="examples-blossom">Blossom</h2>

    <p>
      <a href="http://blossom.io">Blossom</a> is a lightweight project management
      tool for lean teams. Backbone.js is heavily used in combination with
      <a href="http://coffeescript.org">CoffeeScript</a> to provide a smooth
      interaction experience. The RESTful backend is built
      with <a href="http://flask.pocoo.org/">Flask</a> on Google App Engine.
    </p>

    <div style="text-align: center;">
      <a href="http://blossom.io">
        <img width="550" height="360" data-original="docs/images/blossom.png" alt="Blossom" class="example_image" />
      </a>
    </div>

    <h2 id="examples-decide">Decide</h2>

    <p>
      <a href="http://decide.com">Decide.com</a> helps people decide when to buy
      consumer electronics. It relies heavily on Backbone.js to render and
      update its Search Results Page. An "infinite scroll" feature takes
      advantage of a SearchResults model containing a collection of
      Product models to fetch more results and render them on the fly
      with <a href="http://mustache.github.com">Mustache</a>. A SearchController keeps everything in sync and
      maintains page state in the URL. Backbone also powers the user
      accounts and settings management.
    </p>

    <div style="text-align: center;">
      <a href="http://decide.com">
        <img width="550" height="449" data-original="docs/images/decide.png" alt="Decide" class="example_image" />
      </a>
    </div>

    <h2 id="examples-trello">Trello</h2>

    <p>
      <a href="http://trello.com">Trello</a> is a collaboration tool that
      organizes your projects into boards. A Trello board holds many lists of
      cards, which can contain checklists, files and conversations, and may be
      voted on and organized with labels. Updates on the board happen in
      real time. The site was built ground up using Backbone.js for all the
      models, views, and routes.
    </p>

    <div style="text-align: center;">
      <a href="http://trello.com">
        <img width="550" height="416" data-original="docs/images/trello.png" alt="Trello" class="example_image" />
      </a>
    </div>

    <h2 id="examples-tzigla">Tzigla</h2>

    <p>
      <a href="http://twitter.com/evilchelu">Cristi Balan</a> and
      <a href="http://dira.ro">Irina Dumitrascu</a> created
      <a href="http://tzigla.com">Tzigla</a>, a collaborative drawing
      application where artists make tiles that connect to each other to
      create <a href="http://tzigla.com/boards/1">surreal drawings</a>.
      Backbone models help organize the code, routers provide
      <a href="http://tzigla.com/boards/1#!/tiles/2-2">bookmarkable deep links</a>,
      and the views are rendered with
      <a href="https://github.com/creationix/haml-js">haml.js</a> and
      <a href="http://zeptojs.com/">Zepto</a>.
      Tzigla is written in Ruby (<a href="http://rubyonrails.org/">Rails</a>) on the backend, and
      <a href="http://coffeescript.org">CoffeeScript</a> on the frontend, with
      <a href="http://documentcloud.github.com/jammit/">Jammit</a>
      prepackaging the static assets.
    </p>

    <div style="text-align: center;">
      <a href="http://www.tzigla.com/">
        <img width="550" height="376" data-original="docs/images/tzigla.png" alt="Tzigla" class="example_image" />
      </a>
    </div>