rs-x

Reactively Simple

TypeScript Reactive Engine

Declarative reactivity for runtime-bound expressions. Bind an expression to a model and rs-x tracks fine-grained dependencies automatically.

Get Started

How it works

Bind an expression to your model. rs-x builds dependencies and re-evaluates on identifier changes.

See how it works

Documentation

Learn the engine, binding, change propagation, and debugging tools.

Read the Docs

Playground

Try expressions live and see updates as your model changes, with expression tree visualization.

Open Playground

How it works

Bind expressions to a model and rs-x builds a fine-grained dependency graph. Only identifiers read by the expression become reactive.

Concepts

Define a model

Your model is just normal JavaScript.

model{ price: 100, quantity: 2 }

Bind an expression

Expressions are declarative strings. Binding registers dependencies for what the expression reads.

bindrsx('price * quantity')(model)

React to changes

When the model changes, the expression updates and emits changes.

listenexpression.changed.subscribe(() => { /* … */ })

Key idea: model change → expression change. Minimal ceremony, predictable updates.

Example

Declarative expression binding

import { rsx } from '@rs-x/expression-parser';
import { interval, map } from 'rxjs';

const model = {
  a: 10,
  // Will emit a changed event every 2 seconds
  b: interval(2000).pipe(
    map(() => 100 * Math.random())
  )
};

const expression = rsx('a + b')(model);

// Will emit a changed event
model.a = 20;

expression.changed.subscribe(
  () => console.log(expression.value)
);

Try in Playground