Quick Start & Installation
Get up and running with Ripple.js and learn the core concepts in under 5 minutes.
Installation
Ripple.js is available on npm and works seamlessly in any JavaScript or TypeScript environment.
Install the core package
npm install ripple-reactive(Optional) Install a framework adapter
If you are using React, Vue, or Svelte, install the specific adapter alongside the core library.
npm install ripple-reactive reactCore Concepts
Let's build a simple reactive counter using the core primitives.
Framework Integration
Ripple.js can be dropped into any major UI framework. Here is how to use the official adapters to bind signals directly to your components.
import { signal } from 'ripple-reactive';
import { useSignalValue } from 'ripple-reactive/react';
// Define state outside the component
const count = signal(0);
export function Counter() {
// Bind the signal to the React component lifecycle
const value = useSignalValue(count);
return (
<button onClick={() => count.value++}>
Count: {value}
</button>
);
}Performance Note
Ripple.js utilizes a push-pull hybrid engine. Mutations push dirty flags instantly, but computed values are lazy and only evaluate when read. This guarantees glitch-free propagation with zero intermediate stale states.