Visualizes Reactive Streams with interactive diagrams to make it easy to learn Rxjs.
Last updated Apr 1, 2026
65
Stars
8
Forks
29
Issues
0
Stars/day
Attention Score
30
Language breakdown
No language data available.
▸ Files
click to expand
README
Rx Visualization
Learn to use Rx (RxJs, RxJava, RxSwift , ...) library with super intuitive interactive diagrams.
[![Build Status][travis-image]][travis-url] 
Visualizing Examples
- Visualizes use of Range and Last operator - type":"Subscribe","properties":{}},{"id":2,"x":389,"y":332,"nodetype":"Interval","properties":{"interval":500}},{"id":3,"x":570,"y":483,"nodetype":"First","properties":{"filter":0}}],"edges":[{"source":2,"target":3},{"source":3,"target":1}]}" target="blank" rel="noopener">Visualizes Interval and First operator - type":"Subscribe","properties":{}},{"id":2,"x":625,"y":126,"nodetype":"Range","properties":{"start":10,"count":9}},{"id":3,"x":628,"y":422,"nodetype":"Interval","properties":{"interval":500}},{"id":5,"x":477,"y":284,"nodetype":"Zip","properties":{"zipFunction":0}}],"edges":[{"source":2,"target":5},{"source":3,"target":5},{"source":5,"target":1}]}" target="_blank" rel="noopener">Visualizes Zip observables in Rx - type":"Subscribe","properties":{}},{"id":2,"x":329,"y":172,"nodetype":"Delay","properties":{"delay":1000}},{"id":3,"x":517,"y":86,"nodetype":"Range","properties":{"start":0,"count":3}},{"id":4,"x":667,"y":327,"nodetype":"Subscribe","properties":{}}],"edges":[{"source":2,"target":1},{"source":3,"target":4},{"source":3,"target":2}]}" target="_blank" rel="noopener">Visualizes use of Delay operator in Rx - type":"Subscribe","properties":{}},{"id":2,"x":530,"y":103,"nodetype":"Range","properties":{"start":0,"count":3}},{"id":3,"x":619,"y":383,"nodetype":"Subscribe","properties":{}},{"id":4,"x":423,"y":378,"nodetype":"Subscribe","properties":{}},{"id":5,"x":306,"y":162,"nodetype":"Map","properties":{"mapFunc":0}},{"id":6,"x":197,"y":343,"nodetype":"Subscribe","properties":{}},{"id":7,"x":752,"y":182,"nodetype":"Last","properties":{"filter":0}}],"edges":[{"source":2,"target":4},{"source":2,"target":3},{"source":2,"target":5},{"source":5,"target":6},{"source":7,"target":1},{"source":2,"target":7}]}" target="blank" rel="noopener">Visualizes multiple observer for an observable - type":"Subscribe","properties":{}},{"id":3,"x":579,"y":168,"nodetype":"Filter","properties":{"filter":"3"}},{"id":4,"x":680,"y":311,"nodetype":"First","properties":{"filter":0}},{"id":5,"x":399,"y":167,"nodetype":"Map","properties":{"mapFunc":"1"}},{"id":7,"x":399,"y":471,"nodetype":"Range","properties":{"start":1,"count":16}},{"id":8,"x":289,"y":312,"nodetype":"Filter","properties":{"filter":"1"}}],"edges":[{"source":5,"target":3},{"source":3,"target":4},{"source":4,"target":1},{"source":7,"target":8},{"source":8,"target":5}]}" target="_blank" rel="noopener">Visualizes Chaining some operators - type":"Subscribe","properties":{}},{"id":2,"x":326.7895202636719,"y":197.31097412109375,"nodetype":"Repeat","properties":{"count":3}},{"id":3,"x":556.8680419921875,"y":405.0487365722656,"nodetype":"Delay","properties":{"delay":1000}},{"id":4,"x":555.0951538085938,"y":187.97591400146484,"nodetype":"Range","properties":{"start":0,"count":6}}],"edges":[{"source":3,"target":2},{"source":2,"target":1},{"source":4,"target":3}]}" target="_blank" rel="noopener">Visualizes Repeat operator - type":"Subscribe","properties":{}},{"id":3,"x":663.2308959960938,"y":215.76333618164062,"nodetype":"Subscribe","properties":{}},{"id":5,"x":453,"y":446,"nodetype":"Share","properties":{}},{"id":6,"x":454,"y":86,"nodetype":"Timer","properties":{"delay":200,"interval":500}},{"id":7,"x":455,"y":270,"nodetype":"Take","properties":{"itemCount":21}}],"edges":[{"source":5,"target":1},{"source":5,"target":3},{"source":6,"target":7},{"source":7,"target":5}]}" target="blank" rel="noopener">Visualizes a Hot Observable with Share operator
- type":"Subscribe","properties":%7B%7D%7D,%7B"id":2,"x":399,"y":376,"nodetype":"Scan","properties":%7B"accumulator":"1","seed":1%7D%7D,%7B"id":3,"x":636,"y":125,"nodetype":"Interval","properties":%7B"interval":500%7D%7D,%7B"id":4,"x":548,"y":224,"nodetype":"Skip","properties":%7B"itemCount":1%7D%7D%5D,"edges":%5B%7B"source":2,"target":1%7D,%7B"source":3,"target":4%7D,%7B"source":4,"target":2%7D%5D%7D" target="_blank" rel="noopener">Visualizes Multiplication over time using Scan operator
- type":"Subscribe","properties":{}},{"id":2,"x":320,"y":494,"nodetype":"Subscribe","properties":{}},{"id":3,"x":231,"y":74,"nodetype":"Timer","properties":{"delay":200,"interval":500}},{"id":4,"x":233,"y":219.450439453125,"nodetype":"Take","properties":{"itemCount":2}},{"id":5,"x":231.7747802734375,"y":365.5900573730469,"nodetype":"Share","properties":{}},{"id":6,"x":771,"y":460,"nodetype":"Subscribe","properties":{}},{"id":7,"x":680.6756591796875,"y":115,"nodetype":"Timer","properties":{"delay":200,"interval":500}},{"id":8,"x":685.1260986328125,"y":289.2252197265625,"nodetype":"Take","properties":{"itemCount":2}},{"id":9,"x":582,"y":462,"nodetype":"Subscribe","properties":{}}],"edges":[{"source":5,"target":2},{"source":5,"target":1},{"source":4,"target":5},{"source":3,"target":4},{"source":7,"target":8},{"source":8,"target":6},{"source":8,"target":9}]}" target="blank" rel="noopener">Visualizes hot vs cold observables
FAQ
How to create a new connection?
Just hold the mouse on the corner of operator circles and drag it to the target node.
What are shortcuts?
pressshiftand type the operator's name to add it to the scene, useenterkey to replay the animation.
[travis-url]: https://travis-ci.org/fingerpich/rx-visualization [travis-image]: https://travis-ci.org/fingerpich/rx-visualization.png?branch=master
