Ripple is a new open-source front-end framework that merges concepts from React, SolidJS, and Svelte into a TypeScript-first, component-driven language with a JSX-like syntax. It emphasizes fine-grained reactivity, direct DOM manipulation instead of a virtual DOM, and built-in scoped CSS to simplify styling and component isolation.
Created by Svelte maintainer Dominic Gannaway, Ripple positions itself as a modern, compiled UI language where components, styling, and behavior live together in a single, strongly typed file. The framework also has an explicit vision for enhanced debugging and developer experience, including future integration of AI agents to assist during development.
Core Component Model
In Ripple, components are defined as functions that return UI markup expressed directly in a JSX-like syntax interleaved with TypeScript control flow. A single component file typically contains the structure (DOM), scoped styles (CSS), and behavior (event handlers and state), offering a cohesive, co-located development model.
Patterns like loops and conditionals are written inline with markup, allowing developers to naturally mix constructs such as for and if with component tags. This approach keeps templates close to business logic while still enforcing a clear, component-oriented architecture.
Fine-Grained Reactivity and Direct DOM Updates
Ripple’s reactive model is centered around a track primitive, which defines reactive values and computed state that automatically update when dependencies change. Independent variables and computed values are declared via track, and accessed using a special @ operator for reading their current value.
Instead of relying on a virtual DOM diffing layer, Ripple uses a fine-grained, lazy evaluation system that updates the real DOM directly where dependencies are used. When reactive data changes, only the bound DOM nodes are surgically updated, keeping UI and state tightly in sync without re-rendering entire component trees.
Scoped Styling within Components
Each Ripple component can declare styles within a <style> block, and those styles are scoped to that specific component. This scoping prevents CSS leakage across components and reduces the need for complex naming conventions or external CSS-in-JS abstractions.
By colocating markup and CSS, Ripple encourages a modular design system where styling is inherently tied to the component’s structure and behavior. This can simplify maintenance, refactoring, and onboarding for teams working on large design systems or multi-developer projects.
Context-Based Shared state
While Ripple intentionally avoids global state as a core pattern, it offers context primitives to handle shared state across related components. Developers can create a context object, set its value within a parent component, and consume it in child components that are within the same closure.
Context usage is limited to component execution contexts and cannot be read or written from event handler contexts, enforcing clearer boundaries around when and where shared state is accessed. This constraint is designed to reduce accidental side effects and keep state flows explicit and traceable.
Effects Tied to Reactive Changes
Ripple provides an effect construct that allows developers to run side effects in response to reactive state changes. Inside an effect block, reading reactive values with the @ operator automatically tracks dependencies so that the effect re-runs whenever those values change.
This pattern supports common needs like logging, subscriptions, and integration with browser APIs, while still leveraging the same fine-grained dependency tracking used for DOM updates. The result is a consistent mental model for both UI updates and side-effectful logic.
Developer Experience and AI-Assisted Tooling
Ripple is designed to work closely with the TypeScript compiler, using static analysis to understand types and reactive patterns more deeply. This tight integration opens the door to richer editor support, including more accurate autocompletion, earlier error detection, and smarter refactoring tools.
The project’s roadmap includes exploring AI-assisted debugging directly in the development server, where AI agents could proactively surface issues, suggest fixes, or explain reactive behavior. By leveraging both compile-time understanding and AI, Ripple aims to deliver a smoother, less error-prone developer experience.
Origins, Maturity, and Contribution
Ripple was created by Dominic Gannaway, known for his work on React Hooks at Meta, the Lexical rich-text editor, the Inferno framework, and contributions to Svelte 5’s core team. Although Ripple has been under development for several years, it has only recently been open-sourced under the MIT license, making its internals and roadmap publicly accessible.
The framework is still in an early stage of development, meaning APIs and tooling may evolve as the community grows. Contributions are encouraged through the project’s public repository, with guidelines in place to help new contributors propose features, report issues, and participate in shaping Ripple’s direction.
Read more such articles from our Newsletter here.
