Lightning marble visualization for RxJS, Bacon.js, Kefir.js reactive programming libraries with a bunch of examples

Know your Observables before deploying to production!

const { rxObserver } = require('api/v0.3');
const { timer } = require('rxjs');
const { take, map } = require('rxjs/operators');

const msg = 'awesome';

timer(0, 5)
  .pipe(
    take(msg.length),
    map(index=>msg[index])
  )
  .subscribe(rxObserver());

This tool is aimed at assisting you in understanding observables by playing with them. There are some code examples prebuilt for you in the left menu. Further, you can modify any of them to see how it changes output. Once a snippet has changed — resulting output would be recalculated immediately.

Start exploring with these examples:

RxJS

  • of operator
  • creating Observable from Promise
  • switching to other Observable using switchMap operator

Bacon

Kefir

Try comparing RxJS interval, Kefir.js interval, and Bacon.js interval!

NOTE: currently this tool has following limitations:

  • timeline is cut to 1000ms
  • async browser api is not supported

Your feedback is always welcome at github issues section!


Inspired by rxmarbles.com, learnrxjs.io and great talks by Bret Victor