RxJS Playground

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code

In this playground we added both RxJS 6 and a compatibility rxjs-compat package, that allows you to write code in RxJS 5 style.
You can use them via require('rxjs') and require('rxjs/operators') or just require('rxjs/Rx') for rxjs-compat version.

To visualize the observables we developed a small API. Provided api/v0.3 package has a function rxObserver(title: string): Observer, that you can call to create an Rx Observer, which will display its state on the time chart in the right part of the screen.


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

timer(0, 5)
  .pipe(
    take(10)
  )
  .subscribe(rxObserver());

If you're only starting to explore RxJS — we'd advice you to start with Creation section examples, like timer or fromPromise.

If you want to get familiar with pipeable operators — head right to the pipe operator and experiment with it. Be sure to check pipeable operators official page as well.

External links

  • rxjs.dev — official website for RxJS 6
  • learnrxjs.io — clear examples, explanations, and resources for rxjs
  • rxviz.com — animated playground for rx observables