# ripple-ts/ripple

**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/ripple-ts-ripple).**

6,970 stars · 258 forks · JavaScript · mit

## Links

- GitHub: https://github.com/Ripple-TS/ripple
- Homepage: https://ripple-ts.com
- awesome-repositories: https://awesome-repositories.com/repository/ripple-ts-ripple.md

## Description

Ripple is a full-stack TypeScript web framework and reactive UI library used for building interfaces with server-side rendering. It organizes user interfaces into a hierarchy of reusable, scoped components with built-in state management and client-side hydration.

The framework is distinguished by its fine-grained reactivity, which updates specific DOM elements without requiring full component re-renders. It integrates server-side logic and client-side components within a single TypeScript codebase, enabling a unified full-stack development workflow.

The system covers a broad range of capabilities, including reactive state management with shared contexts, scoped CSS styling, and application routing. It provides primitives for asynchronous state suspension, conditional rendering, and two-way data binding for user inputs.

IDE tooling support is available through a language server and editor extensions providing syntax highlighting and type-aware autocompletion.

## Tags

### User Interface & Experience

- [Fine-Grained Reactivity](https://awesome-repositories.com/f/user-interface-experience/fine-grained-reactivity.md) — Tracks dependencies between state and DOM nodes to update only the specific elements that change without full re-renders.
- [Reactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-frameworks.md) — A reactive UI framework that automatically updates specific DOM elements without requiring full component re-renders. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Collection Rendering](https://awesome-repositories.com/f/user-interface-experience/collection-rendering.md) — Iterates over data sets to generate repeated UI elements with index tracking and stable keys. ([source](https://www.ripple-ts.com/docs/guide/control-flow))
- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Organizes interfaces into a hierarchy of reusable, scoped components with built-in state management.
- [Component Hierarchies](https://awesome-repositories.com/f/user-interface-experience/component-hierarchies.md) — Organizes the user interface into a nested structure of reusable functions that manage their own local scope.
- [Component Tree Architectures](https://awesome-repositories.com/f/user-interface-experience/component-tree-architectures.md) — Organizes the user interface into a hierarchy of nested, reusable components to manage complex application structures. ([source](https://www.ripple-ts.com/docs/guide/application))
- [Conditional Rendering Logic](https://awesome-repositories.com/f/user-interface-experience/conditional-rendering-logic.md) — Provides inline logic blocks for displaying or hiding interface sections based on state conditions. ([source](https://www.ripple-ts.com/docs/guide/control-flow))
- [Functional Components](https://awesome-repositories.com/f/user-interface-experience/functional-components.md) — Defines UI units as functional components that accept properties and return reactive templates. ([source](https://www.ripple-ts.com/docs/guide/syntax))
- [Component Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management.md) — Implements a reactive lifecycle that manages how the root scope and child blocks are executed and updated. ([source](https://www.ripple-ts.com/docs/guide/components))
- [Reactive UI Libraries](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-libraries.md) — Creates interfaces with fine-grained reactivity that updates specific DOM elements without full component re-renders.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Isolates CSS rules to specific components to prevent style leakage across the user interface. ([source](https://www.ripple-ts.com/docs/best-practices))
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Provides utilities to define CSS rules scoped to specific templates using unique class generation. ([source](https://www.ripple-ts.com/docs/guide/styling))
- [Automatic Dependency Tracking](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/reactivity-systems/automatic-dependency-tracking.md) — Automatically executes functions when the specific reactive variables they depend on are modified.
- [Reactive Components](https://awesome-repositories.com/f/user-interface-experience/user-interface-components/reactive-components.md) — Provides a modular architecture for creating reusable UI elements that automatically synchronize with data changes. ([source](https://www.ripple-ts.com/docs))
- [Suspenseful Data Loading](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/suspenseful-data-loading.md) — Pauses component rendering during asynchronous data fetching and displays a fallback state until resolution.
- [Dynamic Component Renderers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/dynamic-component-renderers.md) — Enables swapping components at runtime based on state by unmounting the old element and mounting a new one. ([source](https://www.ripple-ts.com/docs/guide/control-flow))
- [Dynamic Text Interpolation](https://awesome-repositories.com/f/user-interface-experience/dynamic-text-interpolation.md) — Inserts the result of expressions into text nodes with automatic escaping to prevent script injection. ([source](https://www.ripple-ts.com/docs/guide/syntax))
- [Reactive Text Bindings](https://awesome-repositories.com/f/user-interface-experience/html-element-bindings/reactive-text-bindings.md) — Binds tracked reactive variables directly to an element's inner text or HTML properties. ([source](https://www.ripple-ts.com/docs/guide/bindings))
- [Input Handling Systems](https://awesome-repositories.com/f/user-interface-experience/input-handling-systems.md) — Captures DOM events through props and manages element references for user interaction. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Value Synchronization](https://awesome-repositories.com/f/user-interface-experience/input-states/value-synchronization.md) — Creates a two-way connection between tracked variables and the values of text, number, or select inputs. ([source](https://www.ripple-ts.com/docs/guide/bindings))
- [CSS Scoping Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/css-scoping-engines.md) — Isolates styles by automatically hashing CSS definitions to prevent leakage between different components.

### Web Development

- [Reactive State Management](https://awesome-repositories.com/f/web-development/reactive-state-management.md) — Implements a fine-grained reactive state management system using tracked variables to trigger surgical UI updates. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Asynchronous State Management](https://awesome-repositories.com/f/web-development/asynchronous-state-management.md) — Provides asynchronous state management that suspends rendering during promise resolution and displays pending states. ([source](https://www.ripple-ts.com/docs/guide/control-flow))
- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures.md) — Organizes the user interface into reusable, scoped pieces with their own logic, styles, and state management.
- [DOM Access References](https://awesome-repositories.com/f/web-development/dom-access-references.md) — Provides mechanisms to obtain direct references to underlying DOM elements for manual manipulation. ([source](https://www.ripple-ts.com/docs/guide/bindings))
- [Full-Stack Frameworks](https://awesome-repositories.com/f/web-development/full-stack-frameworks.md) — Integrates server-side logic and client-side components within a single TypeScript codebase.
- [Full-Stack Web Frameworks](https://awesome-repositories.com/f/web-development/full-stack-web-frameworks.md) — Integrates server logic and client-side reactivity within a single TypeScript development environment.
- [Browser-Side State Management](https://awesome-repositories.com/f/web-development/hydration-state-management/browser-side-state-management.md) — Synchronizes data across different parts of an application using shared contexts and reactive stores.
- [Reactive Dependency Triggers](https://awesome-repositories.com/f/web-development/reactive-state-management/reactive-dependency-triggers.md) — Automatically executes functions whenever the specific reactive variables they depend on are modified. ([source](https://www.ripple-ts.com/docs/guide/reactivity))
- [Client-Side Hydration](https://awesome-repositories.com/f/web-development/rendering-templating/rendering-patterns/client-side-hydration.md) — Implements a hydration process that attaches reactive state and event listeners to server-rendered HTML. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering.md) — Generates static HTML on the server to improve initial load speed and search engine visibility.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Generates HTML on the server for faster initial loads and SEO, then adds interactivity on the client.
- [Server-Side Rendering Frameworks](https://awesome-repositories.com/f/web-development/server-side-rendering-frameworks.md) — Generates HTML on the server and hydrates it on the client to improve load speed and SEO.
- [Application Route Managers](https://awesome-repositories.com/f/web-development/application-route-managers.md) — Maps URL changes to specific views or components to manage navigation within a single-page application. ([source](https://www.ripple-ts.com/docs/libraries))
- [Attribute Binding](https://awesome-repositories.com/f/web-development/attribute-binding.md) — Binds HTML attributes to JavaScript expressions for automatic updates based on evaluated values. ([source](https://www.ripple-ts.com/docs/guide/syntax))
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Supports nesting and wrapping components by passing child elements for flexible layout composition. ([source](https://www.ripple-ts.com/docs/guide/components))
- [DOM Program Mounting](https://awesome-repositories.com/f/web-development/dom-program-mounting.md) — Provides the mechanism to initialize and attach the application root to a specific HTML element in the browser. ([source](https://www.ripple-ts.com/docs/guide/application))
- [Modular State Sharing](https://awesome-repositories.com/f/web-development/modular-state-sharing.md) — Synchronizes data across disconnected components using a centralized store to ensure consistent behavior. ([source](https://www.ripple-ts.com/docs/libraries))
- [Reactive Collection Wrappers](https://awesome-repositories.com/f/web-development/reactive-state-management/reactive-collection-wrappers.md) — Provides reactive wrappers for arrays and maps that automatically trigger UI updates on modification. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Template Logic](https://awesome-repositories.com/f/web-development/template-logic.md) — Enables the execution of statements and declaration of variables directly within UI templates. ([source](https://www.ripple-ts.com/docs/guide/syntax))
- [Reactive Update Synchronization](https://awesome-repositories.com/f/web-development/web-components/component-based-rendering-engines/observation-based-rendering/dom-synchronization/reactive-update-synchronization.md) — Returns a promise that resolves only after all pending reactive state changes have been applied to the DOM. ([source](https://www.ripple-ts.com/docs/guide/reactivity))

### Development Tools & Productivity

- [IDE Extensions](https://awesome-repositories.com/f/development-tools-productivity/ide-extensions.md) — Provides a language server and editor extensions for syntax highlighting, diagnostics, and type-aware autocompletion. ([source](https://www.ripple-ts.com/docs/quick-start))

### Software Engineering & Architecture

- [Reactive Dependency Re-execution](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/asynchronous-execution/reactive-dependency-re-execution.md) — Implements automatic re-execution of asynchronous functions whenever the reactive variables they depend on change. ([source](https://www.ripple-ts.com/docs/guide/control-flow))
- [Global Component Contexts](https://awesome-repositories.com/f/software-engineering-architecture/context-sharing/global-component-contexts.md) — Enables the use of shared contexts to distribute data globally throughout the component tree. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Fallback UI Renderers](https://awesome-repositories.com/f/software-engineering-architecture/error-boundaries/fallback-ui-renderers.md) — Captures component tree failures and renders fallback UI with the ability to reset state. ([source](https://www.ripple-ts.com/docs/guide/control-flow))
- [Reactive Effects](https://awesome-repositories.com/f/software-engineering-architecture/reactive-effects.md) — Provides a system for defining side-effect functions that execute automatically when reactive dependencies change. ([source](https://www.ripple-ts.com/docs/best-practices))
- [Component-Colocated Backend Logic](https://awesome-repositories.com/f/software-engineering-architecture/server-side-logic-frameworks/component-colocated-backend-logic.md) — Allows defining server-oriented exports within component files to handle backend operations and data loading. ([source](https://cdn.jsdelivr.net/gh/ripple-ts/ripple@main/README.md))
- [Component Context Sharing](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/component-context-sharing.md) — Allows sharing reactive state across a component hierarchy without manual property drilling. ([source](https://www.ripple-ts.com/docs/guide/state-management))
- [Component Tree Unmounting](https://awesome-repositories.com/f/software-engineering-architecture/trees/component-tree-unmounting.md) — Handles the recursive removal of components and their associated logic from the DOM to clean up resources. ([source](https://www.ripple-ts.com/docs/guide/application))