Visualize your Observables
Last updated 2 years ago by hermanbanken .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install rxfiddle 
SYNC missed versions from official npm registry.

RxFiddle for RxJS

RxFiddle is a debugger for Reactive Extensions (Rx). Add this (rxfiddle) module to your applications repository to inspect your Observable data flow on RxFiddle.net.

Screenshot of RxFiddle.net

Getting started

You can use this RxFiddle npm plugin in 2 different environments:

  • Browser: instrument and then use RxFiddle.openWindow()
  • Node: instrument and then use RxFiddle.serve()

Or you can use auto detect: instrument and then use RxFiddle.auto()


You instrument Rx by providing the reference to RxFiddle. Since you can import, require or include Rx in different ways, RxFiddle accepts references to Rx in multiple ways. For example if you use the ES6 modular imports:

/* File: your-application.js */
import { Observable } from "rxjs/Observable"
import { Subscriber } from "rxjs/Subscriber"
import "rxjs/add/observable/of"
import "rxjs/add/operator/map"
import RxFiddle from "rxfiddle"

new RxFiddle({
  Observable: Observable,
  Subscriber: Subscriber,
}).serve({ port: 8080 }) // or openWindow for web environments

/* Rest of your application here */
Observable.of(1, 2, 3)
  .map(x => x * 2)

Then run your application (node your-application.js) and visit rxfiddle.net entering localhost:8080 as the port. Note that RxFiddle works completely on your machine only when using websocket collectors: no code and or event data is send to rxfiddle's servers. If you're afraid it does, feel free to run the RxFiddle App on your own machine.

If you have taken the shortcut of importing using import * as Rx from "rxjs" then you can use the following shortcut for instrumentation:

import * as Rx from "rxjs"
import RxFiddle from "rxfiddle"

new RxFiddle({ Rx }).serve({ port: 8080 })

/* Rest of your application here */
Rx.Observable.of(1, 2, 3)
  .map(x => x * 2)


See the RxFiddle repository for the full list of features.


RxFiddle works by means of a visualizer and collectors which can parse syntax and instrument (compiled) code to collect the lifecycle of Observables:

  • creation of Observable sequences
  • subscriptions in a Observable sequence
  • next, error and complete events in Observable sequence

Existing collectors:


Every help is welcome improving RxFiddle, either by improving the visualiser or creating custom collectors for your favorite Rx-library.

You can find samples of the expected output in the dist folder after running the tests (npm run test).


RxFiddle was created as part of my Masters thesis.

Herman Banken

Current Tags

  • 1.1.1                                ...           latest (2 years ago)

10 Versions

  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.1.0-beta.2                                ...           2 years ago
  • 1.1.0-beta.1                                ...           2 years ago
  • 1.1.0-beta.0                                ...           2 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
Dev Dependencies (12)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |