Skip to content


Repository files navigation

RxJS, KefirJS, BaconJS marble diagram playground


The playground is agnostic of the library api, so apart from RxJS you can also run kefirjs, baconjs and hopefully this soon


No matter how long your observables would delay or iterate — environment for the scripts is tweaked to run the scripts in a syncronous way

So you'll get results instantly!

Please, see mock-delayed-execution.js for details

Chart api for the examples

Chart api is exposed via require('api/v0.3'), e.g. for RxJS:

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

const observer = rxObserver('Title')


This example will draw a timeline on the chart, with an event at 5ms [ '----o ].

Returned rxObserver implements Observer interface:

  • next — will draw an event mark [ --o-- ]

  • error — will draw an error mark [ --x ]

  • complete — will draw an end mark [ --| ]



will output



E.g. rxjs-interval


You're welcome to participate in this project!

Just check the issues tab at the top and find one that you want to work with, then:

git clone
npm i
npm start

This should start a dev server.

All the examples are contained in markdown .md files, that are pretty easy to update, even via itself.

NOTE: This project was bootstrapped with Create React App. You will find some information on how to perform common tasks here


This project is inspired by, and great talks by Bret Victor

Also, here's a super-awesome RxViz project — it already does much better job in most cases! Sadly, I found it after I've kickstarted this one, so... I'll pretend I never saw it :)