Fork me on GitHub

Ractive.js

Next-generation DOM manipulation

Make the web interactive by default

HTML is an amazing language for creating static documents, but it was never designed for interactive web apps. Many libraries try to get round HTML's limitations, but very few tackle them head on.

Ractive is used to create interactive journalism at theguardian.com. Its development was made possible, in part, by the Bill & Melinda Gates Foundation's support for Guardian Global development.

is different. It solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve. (Here's the 60 second setup).

How? By changing the relationship between HTML and JavaScript. Before, HTML was an inert substance that you would breathe life into. Now, it's a blueprint for an app that's interactive by default.

Okay. How does it work?

By parsing HTML templates and creating a lightweight internal representation of the DOM. Consider the following example:

Traditional templating engines and MVC frameworks force you to re-render whenever any part of your data changes. So you have to split components up into atomic chunks – list items instead of lists, buttons instead of button panels, single data points instead of charts – often each with its own view class, each with its own render method.

All too often, templating just means replacing one kind of spaghetti code with another!

<p>Hello {{user}}! You have
    <strong>{{messages.unread}} new messages</strong>.
</p>
var ractive = new Ractive({
  el: result,
  template: html,
  data: {
    user: 'Dave',
    messages: { total: 11, unread: 4 }
  }
});

Edit this code and hit Shift-Enter to run it, or tap the green button.

ractive.set( 'messages.unread', 5 );
run »

In this example, constructs a parallel DOM representation which is aware of its dependencies on the values of user and messages.unread. When those values change, it knows exactly which parts of the real DOM need to be updated.

This kind of surgical DOM manipulation is more efficient than constantly trashing views only to re-render them, and it scales far more elegantly than manually updating elements.

So it's like AngularJS?

Other projects which deserve mention: Knockout.js, which popularised the idea of declarative data binding in web apps, and which inspired the Ractive tutorials, and Backbone, which packs so many terrific ideas into such a tiny footprint. Ractive is particularly indebted to these.

There are similarities – AngularJS has been a large source of inspiration. If you haven't tried it, you should. It's a wildly popular framework powering some major applications, and it's built and maintained by the geniuses at Google.

But the two libraries do things very differently. is designed to have as few surprises as possible – no mysterious $scope.$apply() or dependency injection minification headaches! You can master in an hour or two, just by following the interactive tutorials.

Nice! What else can it do?

There are several killer features, such as expressions with dependency tracking, animations, two-way binding, SVG support and more. To get a feel for what's possible with , take a look at the examples.

Sold. Where do I start?

You can try the 60 second setup, follow the interactive tutorials, or download the code and dive right in.

If you get stuck, check out the API documentation or get in touch on Twitter – I'm @rich_harris. The code is available on GitHub under an MIT license.