Reactive references on the go

Reactor.js: A lightweight library for reactive programming

Jane Elizabeth
© Shutterstock / Carsten Schlipf

Looking for an unobtrusive and unopinionated reactive library to track reactive variables in a complex data model? Introducing Reactor.js, an open source, lightweight library for reactive programming.

Looking for a new reactive library? Look no further than Reactor.js, a lightweight reactive library that keeps things simple.

Reactor.js is unopinionated and doesn’t require a specific structure for code. Any variable can be replaced with a reactive one without any fuss. Helpfully, it’s not necessary to learn a specific syntax or domain specific language.

Although it was designed on similar principles to Bacon.js and Knockout.js, Reactor.js was designed to be intentionally lightweight.  All complexity and additional syntax has been kept to a minimum. Reactor.js sets dependencies automatically.

Compared to Bacon and Knockout, Reactor.js doesn’t provide semantic bindings to HTML or handle event streams. However, its innovative Reactors and Observers make it easier than ever to track reactive variables. This allows developers to keep complex data models consistent or keep a user interface up to date when models are changed.


A Reactor is an object wrapper that automatically tracks observers to read its properties. It notifies these observers when those properties are updated.

Reactors act like plain JavaScript objects. Reactors can wrap an existing object by passing it to the constructor. Any changes to the Reactor are passed through the object.

However, one specific feature to Reactors is that they track when one of their properties is read by an observer. They notify that observer when the property in question is updated. This tracking is property specific; observers are not notified if a different property is updated.

Additionally, Observers can track dependencies in nested objects. If an Observer reads a Reactor’s property and also returns an object, then that object is also wrapped in a Reactor before being returned. It’s only polite to do so!

SEE ALSO: Announcing NgRx 4 – Angular with reactive flavor


An Observer is a code block that re-executes when one of the reactor properties it read from is updated. They are created in Reactor.js when “observe” is passed as a function. This function is executed once on creation and then waits.

When an Observer reads a Reactor’s property it gets saved as a dependent. When that specific property is updated or changed, it alerts the observer and re-executes its function. This happens automatically without any needed input from the developer.

Observer’s dependencies are dynamically determined and only pay attention to the specific property that it is watching for. This means that the only dependencies actually read in the last execution of an observer can trigger it again.

Observers can be stopped just by calling “stop()” on the returned observer object. This clears any existing dependencies and prevents triggering.

Getting Reactor.js

Reactor.js 1.0 is available as a package on npm or from GitHub.

Jane Elizabeth
Jane Elizabeth is an assistant editor for

Inline Feedbacks
View all comments