Ripple is a TypeScript-first UI framework built around .tsrx files, fine-grained reactivity, scoped styles, and a small runtime.
Ripple addresses the challenge of building reactive UIs with tight TypeScript integration by combining JSX-like authoring with template-native control flow. The framework uses .tsrx files as its core format, enabling developers to colocate TypeScript setup logic directly with UI markup through JSX statement containers. Reactivity is achieved through a track() function and lazy destructuring, allowing reads of lazy bindings to remain reactive. The framework provides reactive collection types including RippleArray, RippleObject, RippleMap, and RippleSet, and includes template-native directives for @if, @for, @switch, and @try control flow. Scoped style blocks with automatic class hashing keep styling encapsulated, and the runtime is designed to be small.
Ripple suits teams prioritizing TypeScript developer experience and fine-grained reactivity over framework size. It works well for projects where collocating setup logic with templates reduces cognitive overhead. The framework supports Vite, includes editor tooling, Prettier and ESLint integration, and handles both buffered and streaming server-side rendering with hydration. The .tsrx format is also a standalone language that can target React, Preact, Solid, Vue, and Ripple, though Ripple is the runtime-focused target with track(), reactive collections, server modules, hydration, and DOM helpers built in.
The project shows active development with regular commits and ongoing refinement of core features. The codebase maintains comprehensive documentation and provides a playground for experimentation. The framework benefits from leadership by a developer with substantial prior experience across multiple UI frameworks and reactive systems.
