rs-x

Reactively Simple

TypeScript Reactive Engine

Strongly typed, declarative reactivity for runtime-bound expressions. Bind an expression to a model, and RS-X automatically tracks fine-grained dependencies.

Works with modern SPA frameworks: React, Vue, and Angular. Pairs naturally with RxJS for streams and reactive state. Ideal for apps that need fast change detection and predictable reactive updates in TypeScript and JavaScript. Also works great in Node.js services.

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

Built for production

rs-x expressions are not just runtime strings. The VS Code extension gives you IDE support directly in expression strings, and the compiler validates and optimizes them at build time.

Strongly typed in VS Code

The rs-x VS Code extension brings full IntelliSense to your expression strings. Identifiers are resolved against your model type, and invalid expressions are underlined in the editor — no runtime surprises.

VS Code extension

Compiler: optimise & validate at build time

The rs-x compiler pre-compiles expressions into optimised JavaScript, eliminating parse overhead at runtime. It also catches type errors and invalid identifiers during your build — before they reach users.

Learn about the compiler

Framework-ready reactivity

rs-x delivers fine-grained change detection across React, Next.js, Vue, and Angular, while pairing naturally with RxJS and Node.js — ideal for SPA frameworks and backend services that need precise, type-safe updates.

React

Use RS-X hooks to bind expressions directly in React components with minimal boilerplate.

React integration

Next.js

Integrate rs-x into Next.js client components with the same expression hooks used in React, plus app-router-friendly setup guidance.

Next.js integration

Vue

Leverage the @rs-x/vue composable for reactive expressions and clean change detection in Vue apps.

Vue integration

Angular

Bind expressions with the rsx pipe and keep Angular templates reactive and predictable.

Angular integration

RxJS

Combine rxjs streams with rs-x expressions for reactive data flows and efficient updates.

RxJS integration

Node.js

Use rs-x in Node.js services for reactive data pipelines, model binding, and predictable change propagation.

Node.js setup

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