# ractivejs/ractive

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ractivejs-ractive).**

5,920 stars · 394 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/ractivejs/ractive
- Homepage: http://ractive.js.org
- awesome-repositories: https://awesome-repositories.com/repository/ractivejs-ractive.md

## Description

Ractive is an open-source JavaScript framework for building reactive user interfaces where the DOM automatically updates when underlying data changes. It is fundamentally a declarative data binding library that synchronizes data between the model and the view, enabling two-way binding without manual DOM manipulation, and operates as a template-based component system for composing markup, styles, and logic into reusable UI components.

The framework distinguishes itself through a plugin-extensible architecture that allows custom components, adaptors, and extensions to be registered without modifying the core library. It employs a virtual DOM diffing approach to compute minimal changes between virtual tree snapshots after data mutations, and includes a transition animation engine for animating element insertion and removal using CSS transitions and JavaScript callbacks coordinated with DOM updates. Ractive also features an adaptor-based data binding system that connects external data sources through pluggable adaptors, an event delegation system that attaches listeners to parent elements, and a mustache-based template compilation pipeline that compiles HTML templates into virtual DOM trees.

The framework supports composing reusable components that encapsulate templates, styles, and logic, with scoped CSS to prevent style leakage across the page. It provides reactive data updates that change only affected DOM nodes without full re-rendering, two-way form binding that links data models to form inputs, and declarative event handling with a straightforward syntax. Ractive also includes built-in support for animating DOM elements as they appear, change, or leave, including SVG elements and custom animation sequences.

## Tags

### Data & Databases

- [Two-Way Data Binding](https://awesome-repositories.com/f/data-databases/data-synchronization/two-way-data-binding.md) — Fundamentally a declarative data binding library that synchronizes data between model and view with two-way binding. ([source](http://ractive.js.org/))

### Development Tools & Productivity

- [Mustache-Based](https://awesome-repositories.com/f/development-tools-productivity/template-extensions/template-functions/template-compilation/mustache-based.md) — Compiles HTML templates with mustache-style bindings into a virtual DOM tree for efficient updates.
- [Custom Plugin Registrations](https://awesome-repositories.com/f/development-tools-productivity/plugin-systems/custom-plugin-registrations.md) — Registers custom components, adaptors, and other extensions through a plugin system to extend the library. ([source](http://ractive.js.org/))

### Graphics & Multimedia

- [State Transition Animators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators.md) — Tracks and tweens numerical state changes to facilitate smooth visual transitions when data updates. ([source](http://ractive.js.org/))
- [Data-Driven State Transitions](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators/data-driven-state-transitions.md) — Ships a transition animation engine that coordinates CSS and JS animations with DOM updates on data changes. ([source](https://ractive.js.org/))

### Software Engineering & Architecture

- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Registers custom components, adaptors, and extensions through a plugin system to extend the framework.
- [Adaptor-Based Data Binding](https://awesome-repositories.com/f/software-engineering-architecture/reactive-data-binding/adaptor-based-data-binding.md) — Provides pluggable adaptors that connect external data sources to the reactive binding system.
- [Reusable Component Architectures](https://awesome-repositories.com/f/software-engineering-architecture/reusable-component-architectures.md) — Composes markup, logic, and styles into self-contained units that nest and reuse across an application. ([source](https://ractive.js.org/))
- [Event Handling](https://awesome-repositories.com/f/software-engineering-architecture/event-handling.md) — Attaches event listeners to elements with a straightforward declarative syntax. ([source](https://cdn.jsdelivr.net/gh/ractivejs/ractive@main/README.md))
- [Plugin Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/plugin-extenders.md) — Adds custom functionality through a plugin system that integrates seamlessly with the core library. ([source](http://ractive.js.org/))

### User Interface & Experience

- [Component Templating Systems](https://awesome-repositories.com/f/user-interface-experience/component-templating-systems.md) — Composes templates, styles, and logic into reusable UI components with automatic reactivity.
- [Data-Reactive Element Animators](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers/dynamic-element-animation/declarative-element-animators/data-reactive-element-animators.md) — Provides built-in animation support that transitions elements smoothly when data changes. ([source](http://ractive.js.org/))
- [Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling.md) — Ships declarative event handling with straightforward syntax for attaching listeners to elements.
- [Form Data Binding](https://awesome-repositories.com/f/user-interface-experience/form-data-binding.md) — Links a data model to form inputs so changes in either side instantly reflect in the other without manual synchronization. ([source](https://ractive.js.org/))
- [Data-Driven Element Animations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/element-animation-engines/data-driven-element-animations.md) — Provides built-in animation of DOM elements triggered by data changes, including SVG and custom sequences. ([source](https://cdn.jsdelivr.net/gh/ractivejs/ractive@main/README.md))
- [Reactive Data Bindings](https://awesome-repositories.com/f/user-interface-experience/reactive-data-bindings.md) — Automatically synchronizes user interface components with underlying data state changes. ([source](http://ractive.js.org/))
- [Reactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-frameworks.md) — An open-source JavaScript framework for building reactive user interfaces that automatically update on data changes.
- [Reactive UI Updates](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-updates.md) — Automatically updates the DOM when underlying data changes using declarative templates and two-way binding.
- [Template-Based Reactive Compositions](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-updates/template-based-reactive-compositions.md) — Composes templates, styles, and logic into reusable components that update automatically when data changes. ([source](http://ractive.js.org/))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Encapsulates markup, logic, and scoped styles into self-contained reusable UI components. ([source](http://ractive.js.org/))
- [Plugin Frameworks](https://awesome-repositories.com/f/user-interface-experience/customizable-workspaces/workflow-extenders/plugin-frameworks.md) — Allows extending the framework with custom components, adaptors, and plugins through a registration system.
- [Dirty Checking Mechanisms](https://awesome-repositories.com/f/user-interface-experience/data-binding/dirty-checking-mechanisms.md) — Detects data changes by comparing current values against previous snapshots during a digest cycle.
- [DOM Event Listeners](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling/dom-event-listeners.md) — Attaches listeners to interface elements to execute code in response to user or system events. ([source](https://cdn.jsdelivr.net/gh/ractivejs/ractive@main/README.md))
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Applies CSS that is scoped to individual components to prevent style leakage across the page. ([source](http://ractive.js.org/))
- [Virtual DOM Engines](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-engines.md) — Employs virtual DOM diffing to compute minimal changes between virtual tree snapshots after data mutations.

### Web Development

- [Template Data Binding](https://awesome-repositories.com/f/web-development/client-side-chart-renderers/template-data-binding.md) — Inserts variable placeholders in markup and populates them with initial values from a data object. ([source](https://ractive.js.org/tutorials/hello-world/))
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Enables composing reusable UI components that encapsulate templates, styles, and logic.
- [DOM Element Data Binding](https://awesome-repositories.com/f/web-development/dom-element-data-binding.md) — Links template values to specific DOM elements for automatic view synchronization without manual manipulation. ([source](https://cdn.jsdelivr.net/gh/ractivejs/ractive@main/README.md))
- [Declarative Data Binding Systems](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/template-binding/declarative-data-binding-systems.md) — Provides a declarative data binding system that synchronizes application state with the DOM automatically. ([source](https://cdn.jsdelivr.net/gh/ractivejs/ractive@main/README.md))
- [Template Data Binding](https://awesome-repositories.com/f/web-development/template-data-binding.md) — Inserts variable placeholders in HTML templates and populates them with data passed during initialization. ([source](https://ractive.js.org/tutorials/hello-world/))
- [Reactive Binding Updates](https://awesome-repositories.com/f/web-development/template-data-binding/reactive-binding-updates.md) — Changes a data property on an existing view and instantly updates only the affected DOM nodes without re-rendering. ([source](https://ractive.js.org/tutorials/hello-world/))
- [Reactive Template Compilers](https://awesome-repositories.com/f/web-development/template-data-binding/reactive-binding-updates/reactive-template-compilers.md) — Compiles mustache-based HTML templates into virtual DOM trees that automatically update when data changes. ([source](http://ractive.js.org/))
- [Virtual DOM Diffing](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation/virtual-dom-diffing.md) — Updates the real DOM by computing minimal changes between virtual tree snapshots after data mutations.
- [Event Delegation Systems](https://awesome-repositories.com/f/web-development/event-delegation-systems.md) — Attaches event listeners to parent elements and dispatches them to child targets based on selector matching.
- [Reactive SVG Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/svg-renderers/live-svg-dom-renderers/reactive-svg-renderers.md) — Creates and updates SVG elements declaratively within the same reactive component model. ([source](http://ractive.js.org/))

### Part of an Awesome List

- [DOM Animation Workflows](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-effects/dom-animation-workflows.md) — Provides a built-in transition animation engine for animating element insertion, removal, and state changes.
- [Transition Animation Engines](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-transitions/transition-animation-engines.md) — Animates element insertion and removal using CSS transitions and JavaScript callbacks coordinated with DOM updates.
- [UI Transition Animations](https://awesome-repositories.com/f/awesome-lists/media/animation-transitions/ui-transition-animations.md) — Animates DOM elements as they appear, change, or leave using flexible, performant transitions. ([source](https://cdn.jsdelivr.net/gh/ractivejs/ractive@main/README.md))
- [Web Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/web-frameworks.md) — Next-generation DOM manipulation.