Build better apps, faster

Works with: jQuery, Zepto, Dojo, Mootools, YUI

CanJS is a JavaScript library that makes developing complex applications simple and fast. Easy-to-learn, small, and unassuming of your application structure, but with modern features like custom tags and 2-way binding. Creating apps is easy and maintainable.

Simple To Use

Observables and live binding do the work for you.

var Todo = can.Model.extend({
  findAll: 'GET /todos',
  findOne: 'GET /todos/{id}',
  update: 'PUT /todos/{id}',
  destroy: 'DELETE /todos/{id}'
}, {});

can.Component.extend({
  tag: 'todos-app',
  scope: {
    selectedTodo: null,
    todos: new Todo.List({}),
    select: function(todo){
      this.attr('selectedTodo', todo);
    },
    save: function(todo) {
      todo.save();
      this.removeAttr('selectedTodo');
    }
  }
})
<todos-app>
  <h2>Todays to-dos</h2>
  {{#selectedTodo}}
  <input type="text"
         can-value="description"
         can-change="save">
  {{/selectedTodo}}
  <ul>
    {{#each todos}}
    <li>
      <input type="checkbox"
             can-value="complete">
      <span class="{{#if complete}}done{{/if}}"
            can-click="select">
        {{description}}
      </span>
      <button can-click="destroy"></button>
    </li>
    {{/each}}
  </ul>
</todos-app>

Get Started

You'll be up and running in no time

Most Popular Articles

+ Add an Article

Get Free Stuff for Helping

Report bugs, submit a plugin, vote for your favorites

Sign Up Now