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...
To get a feel for how it will make your life as a web developer easier, visit ractivejs.org, follow the interactive tutorials, or try the 60 second setup.
If you don't find what you're looking for in the docs, here are other channels you can ask:
ractivejs tag.Pull requests and issues are always welcome! Please read CONTRIBUTING.md 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 https://github.com/YOUR_USERNAME/ractive
# 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
Tested successfully in IE9+ 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.
0.8.0
2016-08-30
Breaking changes
\{{#each filter(someList)}}<input value="\{{.prop}}" />\{{/each}} because changes to the computed child (filter(someList).0.prop aren't kept in sync with their source (someList.?.prop) as Ractive doesn't know how to reverse the expression. There is an ongoing discussion about how to address this, including an open PR that would put this behavior behind a flag and attempt to keep the sources up to date as the computation children changed./s. They can also now handle relative contexts because partial name expressions no longer support spaces around the . delimiters in object paths. \{{> foo.bar.baz .bat}} before this change would have parsed as a single expression to get the partial name from foo.bar.baz.bat. It will now get the name from foo.bar.baz and have a context provided from .bat.<option> elements.\{{this.0}}._ractive tracking data added to Ractive controlled DOM nodes has changed significantly. The format of Ractive.getNodeInfo objects is still compatible.\{{#with obj}} will no longer render if obj is falsey (https://github.com/ractivejs/ractive/issues/1856)modifyArrays now defaults to false. If you modify arrays using splice operations directly, you will need to notify Ractive to sync with the changes afterwards.Deprecated features
keypath, key, index properties are deprecated.intro, outro, and intro-outro directives have been deprecated and replaced by named and suffixed directives ${name}[-in][-out] e.g. fade-in-out. Arguments passed to these directives should no longer be wrapped in mustaches, as they are parsed as an array. Dynamism for transitions can be achieved with attribute sections.decorator directive has similarly deprecated and replaced by prefixed and named directives as-${decorator} e.g. as-ace-editor. Arguments passed to these directives should also no longer be wrapped in mustaches, as they are also parsed as an array. Multiple decorators are now supported by simply including multiple directives e.g. as-registered="'some-id'" as-validated="{ maxLen: 10, match: /^foo/ }".\{{#with some.expression()}}<button on-click="@this.set(@keypath + '.foo', 42)">set .foo to 42</button>\{{/with}} would become \{{#with some.expression()}}<button on-click="event.set('.foo', 42)">set .foo to 42</button>\{{/with}}.New features
...arguments) and arguments access is now available for method event handlers. Individual arguments are available using array notation (arguments[n]), dot notation (arguments.0), or 1-based dollar vars, like regular expression matches ($1, $2, etc).'foo.bar.bazzes.0' can be linked to 'baz' so that the detail section doesn't have to worry about a non-bindable expressions or copying objects around. Both sides of the link are automatically kept in sync. See {{{createLink 'ractive.link()'}}}.{ foo } is equivalent to { foo: foo }..s in them, you can now escape them with a \. So if you have a bar object with a foo.baz property, it can be accessed with bar.foo\.baz. Keypaths in the template are given as escaped paths so that they can be used directly with Ractive methods. There are also a few new static methods on Ractive to deal with escaping, unescaping, splitting, and joining keypaths.<textarea>s now handle HTML content as plain text to match what happens in browsers. They can now also set up two-way binding with a single interpolator as content instead of using the value attribute e.g. <textarea>\{{someBinding}}</textarea> is equivalent to <textarea value="\{{someBinding}}"></textarea>.enhance: true when creating your Ractive instance, it will not discard the contents of its target element and will instead try to reuse elements and nodes as it builds the virtual DOM from its template. This option is incompatible with the append option.Object, String, and Boolean globals are now accessible from within templates.\{{#with someExpressionOrRef as alias1, some.deeply.nested[reference].expression as alias2}}...\{{/with}} to set up as many aliases as you need. For iterative sections, you can alias the context with the iteration (the current item) by using \{{#each some.list as item}}...\{{/each}}. Partial contexts also support aliasing, since partial context is just a shortcut for \{{#with context}}\{{>partial}}\{{/with}}, as \{{>somePartial some.path as alias1, some.other[expression](arg1, arg2) as alias2}}.functions on the template root. At render-time, any expressions look for a corresponding pre-built function before using new Function(...) to create one. Templates parsed in this way are no longer JSON compatible. To enable this mode, pass csp: true when pre-parsing your template.@this will resolve to the nearest Ractive instance in the template, which includes components should the template belong to one. @global resolves to window in most browsers and global in Node.js. Both special references are also available outside of the template so that Ractive can be notified of changes outside the template easily.new, if, while, etc as references.@rootpath.<script> tags can now contain top-level inline partial definitions that will get added to the instance along with the scripte-defined partial.toCSS method. You can also get the CSS for all instances with a new static Ractive method of the same name.ractive.transition( transition, node, options ), and node can be supplied implicitly from an event handler. Transitions can now return a Promise and complete will automatically be called when the promise resolves.style-left="\{{x}}px" and class-someClass="\{{someCondition || someOtherCondition}}". For the special style form, additional hyphens in the attribute are turned into camel case. For the special class form, the truthiness of the value determines whether or not the class is added to the list.set will create intermediate objects when setting an undefined keypath, array methods will now swap in an empty array instead of erroring when called with an undefined keypath. Trying to use an array method with a non-array value including null will still throw.resolve and get methods.elseif and else blocks no longer include previous blocks' conditions in their own, so expensive computations are no longer repeated and conditions for elseif are no longer forced to be an expression. Instead, subordinate blocks connect with their siblings when they render and only show if all prior siblings have falsey conditions.merge can now be called with the same array that exists at the given keypath, and the differences will be computed from the model's cached array members. This allows extensive in-place modification of an array to be handled as a series of splice operations but in a single operation. Note that merge may be moved to a set option at some pooint in the future.Bug fixes and other changes - way too many to list
FAQs
Next-generation DOM manipulation
The npm package ractive receives a total of 6,775 weekly downloads. As such, ractive popularity was classified as popular.
We found that ractive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.