Reactive components in any DOM element.

Reactive is a small reactive framework. The runtime primitives live under Reactive, and library modules like Content, Layout and Maths are their own top-level globals. State, calculations and reverse bindings drive a plain DOM driver of tags, attributes and text, so you can plug a reactive component into any element with one <script> tag per module.

// A counter, mounted into <div id="app"></div>
Reactive.Mount(() => {
  const ui = Dom(() => {
    const count = Reactive.State(Maths.Integer)(0);

    Layout.Row(() => {
      Button.Integer.Decrement(count, () => {
        Content.Text("decrement");
      });
      Content.Text(count);
      Button.Integer.Increment(count, () => {
        Content.Text("increment");
      });
    });
  });
  return { content: ui.content };
}, { content: { root: document.getElementById('app') } });

A counter: two buttons and the value between them, mounted with one script.

Get started See examples

Why Reactive

Reactive uses a unique combination of two-way data binding, reversible calculations, and automatic asynchronous handling to allow local reasoning at scale.

Runtime plus modules

Runtime primitives live under Reactive; library modules like Content and Maths are their own globals. Link a script per module and start describing state, calculations and effects; it runs with no build step, bundler or imports.

A DOM driver

Reactive gives you tags, attributes and text bound to reactive state, so it drops into markup you already have and gets out of your way.

Small and hand-written

A focused runtime written from scratch in plain JavaScript, with no build step and no dependencies, small enough to read in an afternoon.

How it works

Describe what your state is and how values derive from it. Reactive tracks the dependencies, recomputes only what changed, and reflects the result into the DOM. Reverse bindings flow edits in the DOM back into state.

State

Declare reactive state with Reactive.State. Each piece has a stable identity so updates are precise across re-runs.

Calculate

Derive values with Reactive.Calculate. Dependencies are tracked automatically; results stay in step with their inputs.

Bind

Bind state to the DOM through the driver. Reactive.Reverse sends user edits back into state, closing the loop.

Modules

The framework is a set of focused modules. Start with the reactive core and the DOM driver, then reach for the rest as you need them.