- Hello, world!
- Nested Properties
- Conditional Sections
- Iterative Sections
- Two-way Binding
- Triples (Embedded HTML)
- Popular movies
- Movies with filters and infinite scrolling
- Movies details open in modal dialog
- Movies Single page app!
- Some random users...
Interface with different backends.
- Modella by @staygrimm
- Promises by @lluchs
- Promise-alt by @rstacruz
- Ractive by @rstacruz - Synchronise several Ractive instances.
- ss-ractive by Robert Hall @arxpoetica - Ractive Template Engine wrapper for SocketStream.
Encapsulate functionality behind the guise of a custom element.
- ACE Editor
- Select - A
- Stepper - A numeric stepper component.
- ractive-modal - A modal popup component.
- ractive-materialish - A collection of components and plugins for making desktop- and mobile-friendly frontend applications.
Augment the DOM with more functionality.
- Chosen by @rahulcs (@kalcifer)
- minmaxwidth by @cfenzo
- Select2 by @sandermarechal (@Prezent)
Custom animation progressions.
Augment the DOM with custom events beyond those supported by the browser.
- Drag and Drop (HTML5) by @Nijikokun
- Drag and Drop (non-HTML5) by @smallhadroncollider
- Drag and Drop Sortable List by @Nijikokun
- Resize by @smallhadroncollider
- Touch by @rstacruz
- Typing by @svapreddy
- Viewport by @svapreddy
Reusable pieces of markup.
Apply custom animation.
By itself, neither Ractive nor tools know what to do with a component files. Loaders take in component files and parse them into a representation that other tools understand.
- rollup-plugin-ractive-bin - Compile Ractive.js components using rollup.js and the Ractive bin
- ractem - A plugin for SystemJS for loading Ractive components
- rvc - Converts component files into AMD modules.
- rv - Loads and pre-compiles Ractive templates from external files. A sample Ractive + RequireJS sample application is also available using rv.
- ractify - Converts component files into CJS modules.
- ractiveify - Similar to ractify, but supports JS/CSS compilation.
- ractive-componentify - Similar to ractiveify, but supports source maps and partial imports.
- Ractivate, a transform that will pre-parse templates. Contributed by jrajav. (GitHub repository). A starter project is available with a gulp.js build system.
- broccoli-ractive - Converts your component files into either AMD, CJS, or ES modules.
- ractive-component-loader - Allows you to load component files as constructors via Webpack.
- ractive-bin-loader - Write Ractive.js components and have them available pre-compiled for the rest of your webpack build.
- grunt-ractive - Compiles Ractive component files into AMD, CJS or ES modules.
As of version 0.9, Ractive now comes with a CLI tool that comes with a few handy commands. See
ractive help for more details on available commands.
Ractive provides a couple of modules to aid you in loader development:
- rcu - An importable/embeddable library that provides utility APIs to help your loader parse the different portions of the component file.
- rcu-builders - A module that provides utility APIs to help your loader convert parsed component files into other module formats like ES, AMD and CJS.