RxJS Playground

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

If you're just starting your RxJS journey — we'd advise you to start with these examples first:

• timer — starts emitting values after given timeout with set interval
• map — apply a function to each value on the stream
• filter — filter only values matching predicate function
• subscribe — basically tells the Observable that we're ready to receive values

If you are a seasoned Observer — do checkout these examples:

• expand — recursively turns each emission into another stream
• share — share subscription among multiple observers
• catch — handle errors gracefully
• dematerialize — pure magic

Also, be sure to know these differences:

• debounceTime vs throttleTime vs auditTime vs sampleTime
• mergeMap vs exhaustMap vs switchMap vs concatMap
• first vs take vs single
• map vs pluck

And check out this experimental pipeline |> operator ⚠️

📖 My articles

"Error handling in RxJS" 😱
Learn how to deal with errors and retry failed requests

"Pausable Observables in RxJS" 🌊
Create a push back force in your streams

"Rx+JSX experiment: Recks" 🐶
<div>{ timer(0, 100) }</div> — Observables inside JSX

"RegExp syntax for Observables: Never Been Easier!" 📝
Use regexp-like syntax to query observables. EXPERIMENT

"RxJS debounce vs throttle vs audit vs sample" 🤔
Difference You Should Know

⚙️ API notes

In this playground we added both RxJS 6 and a compatibility rxjs-compat package, that allows you to write code in RxJS 6 or 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 observables we developed a small API:
Provided api/v0.3 package has a function rxObserver(title?: string): Observer, that creates an Rx Observer to display marbles on the diagram