Learning material
Tutorials
- Hello, world!
- Nested Properties
- Expressions
- Events
- Conditional Sections
- Iterative Sections
- Two-way Binding
- Partials
- Triples (Embedded HTML)
- Components
- Animations
- SVG
- Transitions
- Decorators
Examples
Plugins
Adaptors
Interface with different backends.
- Backbone
- Bacon.js
- Modella by @staygrimm
- Promises by @lluchs
- Promise-alt by @rstacruz
- RxJS
- Ractive by @rstacruz - Synchronise several Ractive instances.
- ss-ractive by Robert Hall @arxpoetica - Ractive Template Engine wrapper for SocketStream.
Components
Encapsulate functionality behind the guise of a custom element.
- ACE Editor
- Ractive-Require
- CodeMirror
- Bootstrap
- Ralma - Ractive Components for Bulma CSS Framework.
- Datatable
- Foundation
- Select - A
<select>replacement component. - Stepper - A numeric stepper component.
- Split
- 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.
Decorators
Augment the DOM with more functionality.
- Chosen by @rahulcs (@kalcifer)
- minmaxwidth by @cfenzo
- Select2 by @sandermarechal (@Prezent)
- Sortable
- Tooltip
- ractive-decorators-popper
Easings
Custom animation progressions.
Events
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
- Hover
- Keys
- Mousewheel
- Tap
- Touch by @rstacruz
- Typing by @svapreddy
- Viewport by @svapreddy
Partials
Reusable pieces of markup.
Transitions
Apply custom animation.
Libraries
jQuery
Sergio Castillo has made a jQuery mobile plugin, which you can see in action on this JSFiddle.
Loaders
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.
Vanilla
- ractive-load - Uses XHR to load your component files and creates component constructors at runtime.
Rollup
- rollup-plugin-ractive-bin - Compile Ractive.js components using rollup.js and the Ractive bin
SystemJS
- ractem - A plugin for SystemJS for loading Ractive components
RequireJS
- 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.
Browserify
- 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
- broccoli-ractive - Converts your component files into either AMD, CJS, or ES modules.
Webpack
- 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
- grunt-ractive - Compiles Ractive component files into AMD, CJS or ES modules.
Babel
TODO
Tools
Ractive CLI
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.
Ractive utilities
- rcu - Utility APIs for parsing component files.
- rcu-builders - Utility APIs to generate ES, AMD and CJS from parsed Ractive components.
Yeoman
- generator-ractive - A Yeoman generator to quickly set up a Ractive application.
