guilhermeaiolfi / ractive

Next-generation DOM manipulation

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ractive.js - Next-generation DOM manipulation

npm version devDependency Status Build Status Coverage Status npm downloads Twitter Follow

What is Ractive.js?

It's a JavaScript library for building reactive user interfaces in a way that doesn't force you into a particular framework's way of thinking. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.

Features include...

  • Data-binding, with a beautiful declarative syntax.
  • Event handling that doesn't make you tear your hair out.
  • Flexible and performant animations and transitions.
  • And much more!

To get a feel for how it will make your life as a web developer easier, visit, follow the interactive tutorials, or try the 60 second setup.

Documentation and Help

If you don't find what you're looking for in the docs, here are other channels you can ask:


Pull requests and issues are always welcome! Please read to learn how to contribute.


If you want to hack on Ractive, the first step is to fork the repo. Then do the following commands.

# Clone your fork of the repo
git clone

# Move into the repo directory
cd ractive

# Install the dependencies
npm install

# Run a server for development
npm start

Navigate to localhost:4567. You'll see:

  • ractive-legacy.js - A build of Ractive that includes legacy browser support.

  • sandbox - Contains some template files to help with debugging.

  • test - The test suite.

To start development, copy the sandbox/sample, following the instructions therein. After the initial build, any subsequent changes will result in fast incremental rebuilds. If you're using Chrome, you can use the LiveReload plugin.

The development server is served by gobble and is still in development. Please report any Gobble-related bugs to Gobble's issue tracker. Thanks!


To build, the following must be met:

  • A real shell. Linux and OS X should be good. Windows needs MSYS or something similar at least on the path.

  • On Windows, if you get an EINVAL when running the tests, you may need to update the phantomjs script in the node_modules/.bin to use { stdio: 'inherit' } when spawning the child process instead of manually piping afterwards.

To run a complete build including linting, testing and minification:

npm run build

Browser support

Tested successfully in IE8+ and all modern browsers. For legacy browser support, use the builds with suffix legacy in the filename. These builds include polyfills and other essential features required by Ractive. If your experience differs please let us know!


Copyright (c) 2012-16 Rich Harris and contributors. Released under an MIT license.


Next-generation DOM manipulation

License:MIT License


Language:JavaScript 99.9%Language:HTML 0.1%Language:CSS 0.0%Language:Shell 0.0%