How to Read an RxJS Marble Diagram

To an experienced RxJS user, marble diagrams are helpful. To someone just starting out with RxJS, they look like a little kid’s drawing in art class.

I’m by no means an expert user of RxJS, but I’ve used it enough to make sense of these “marble diagrams”. I can finally use rx marbles with confidence, and I want you to get there too.

Note: this post assumes you are comfortable with the concept of asynchronous programming and Observables.

Let’s start simple

Observables are asynchronous operations, so we need a way to represent the passage of time. This can be done with an arrow moving left to right.

The vertical line at the end of an arrow represents the successful completion of an Observable. But what if the Observable has an error?