ripple-ts/ripple

Ripple is a TypeScript framework for building web user interfaces. TypeScript is a programming language that adds type checking to JavaScript, and a UI framework provides the structure for building interactive web pages. Ripple was created by a developer who has previously contributed to React, Svelte, and other well-known UI frameworks. The central idea is fine-grained reactivity, which means the framework tracks exactly which parts of your page depend on which pieces of data, and updates only those parts when the data changes. This is meant to make updates faster and more predictable than approaches that re-render larger sections of the page at once. Reactive state is created with a function called track, and the framework also provides reactive versions of common data structures like arrays, objects, maps, and sets that automatically trigger updates when modified. Components, the building blocks of a Ripple app, are written in a file format with the .tsrx extension. This is a TypeScript variant with its own syntax: instead of returning markup from a function as in React, you write the markup directly inside the component body. The component keyword, if and for blocks in the template, and built-in error boundaries are all part of the syntax. The framework includes developer tooling: a VS Code extension provides syntax highlighting, autocomplete, and real-time diagnostics. Prettier and ESLint integrations are also available. Component styles are scoped automatically to prevent one component's CSS from affecting another. A companion project called TSRX lets you write components in the same .tsrx format but compile them to React, Solid, or Ripple's own runtime, so you are not locked into Ripple's runtime from the start. Getting started requires running a single CLI command, and a playground is available online.