What is Reactive Programming?

Reactive programming is a programming paradigm focused on data streams and change propagation. Instead of writing code that explicitly fetches and processes data step by step, you describe how data should flow and transform over time. When values change, updates automatically propagate through your application. Think of it like a spreadsheet: when you update cell A1, all cells that reference A1 automatically recalculate. This approach excels at handling asynchronous events like user interactions, HTTP responses, WebSocket messages, and timers.

How does RxJS work?

RxJS (Reactive Extensions for JavaScript) implements reactive programming through Observables—objects that emit values over time. The core concepts are:

  1. Observable: A data source that emits values (like a stream of click events or API responses)
  2. Observer: A consumer that reacts to emitted values through callbacks (next, error, complete)
  3. Subscription: The connection between an Observable and Observer
  4. Operators: Functions that transform, filter, combine, or manipulate data streams
  5. Subjects: Special Observables that act as both data source and consumer, enabling multicasting

You create data pipelines by chaining operators with the pipe() method, transforming raw streams into exactly the data shape your application needs.

Tool Description

The RxJS Playground is an interactive browser-based sandbox for experimenting with RxJS reactive programming concepts. Write and execute RxJS code directly in the editor with full access to the RxJS library and all operators. The playground runs your code automatically as you type (with debouncing), displaying console output in a terminal-style panel. It's perfect for learning RxJS concepts, prototyping data transformations, debugging Observable pipelines, and testing operator combinations without setting up a development environment.

Features

  • Full RxJS Library Access: All creation functions (of, from, interval, fromEvent, etc.) and operators available
  • Real-time Execution: Code runs automatically with 500ms debounce as you type
  • Terminal Output: Console logs, errors, and warnings displayed in styled terminal
  • Syntax Highlighting: JavaScript code editor with proper syntax highlighting
  • Return Value Display: Final expression values automatically logged with arrow notation
  • Error Handling: Clear error messages for syntax and runtime issues
  • Operators Module: Direct access to rxjs/operators for pipe-based transformations

Examples

Basic Observable Creation:

const { of, from, interval } = rxjs;

// Emit individual values
of(1, 2, 3).subscribe((x) => console.log(x));

// Convert array to Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

Using Operators:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// Output: 20, 40

Combining Streams:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

Subjects for Multicasting:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

Transformation Pipeline:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

Available Modules

rxjs (main module):

  • Creation: of, from, interval, timer, range, generate, defer, iif
  • Combination: merge, concat, combineLatest, forkJoin, zip, race
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Utilities: firstValueFrom, lastValueFrom, isObservable

operators (pipeable operators):

  • Transformation: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtering: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Combination: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Error Handling: catchError, retry, retryWhen
  • Utility: tap, delay, timeout, toArray, share, shareReplay

Use Cases

  • Learning RxJS: Understand Observable concepts through hands-on experimentation
  • Prototyping Data Flows: Design and test reactive data pipelines before implementation
  • Debugging Operators: Isolate and verify operator behavior with simplified examples
  • Interview Preparation: Practice reactive programming patterns and common problems
  • Teaching Demonstrations: Show reactive concepts with live, interactive examples