- Hello, world!
- Nested Properties
- Conditional Sections
- Iterative Sections
- Two-way Binding
- Triples (Embedded HTML)
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
- Ralma - Ractive Components for Bulma CSS Framework.
- 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.
- ractive-droplist - A searchable select list component.
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.
Sergio Castillo has made a jQuery mobile plugin, which you can see in action on this JSFiddle.
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.
- ractive-load - Uses XHR to load your component files and creates component constructors at runtime.
- 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.
Chrome Dev Tools Extensions
- Ractive Dev Tool - View and edit Ractive.js components using Chrome Dev Tools..
- Ractive Data - Adds Ractive context data to chrome dev tools.
- More Ractive Data - This extension provides detailed data about Ractive components.
- rcu - Utility APIs for parsing component files.
- rcu-builders - Utility APIs to generate ES, AMD and CJS from parsed Ractive components.
- generator-ractive - A Yeoman generator to quickly set up a Ractive application.