Privacy
Do you allow measurement and integrations that are enabled for this host profile?
RxJS

RxJS Marble Operator Playground

Read observable timing before it turns into a reactive bug. Try a small marble source, switch operators and compare source and output events on one deterministic timeline.

  • Input stays in the browser
  • Virtual time only
  • Curated RxJS subset

Operator intuition without a full sandbox

RxJS marble diagrams are excellent for explaining streams, but full reactive code can hide the timing decision behind schedulers, subscriptions and inner observables. This playground keeps the review surface small: a source marble string, one selected operator and a visual output timeline.

The MVP does not execute user JavaScript, does not import rxjs/testing into the public runtime and does not send marble input to a backend. It is an educational simulator for common operator behavior, with snippets that point back to real RxJS testing language.

Compare an operator on virtual time

Choose a preset or type a compact marble string. The evaluator uses frames, not timers, so the same input always produces the same result.

Run operator

A normal source stream where each value is transformed without changing timing. Transforms each next value. The MVP maps values to uppercase.

Source stream

Characters
80
Events
40
Frames
120

Operator result

Run an operator to see source events, output events, diagnostics and an RxJS-style testing snippet.

How to read this RxJS playground

Virtual time first

Every dash is a frame and every value is a next notification. No real timers run in the evaluator, which makes the result repeatable and suitable for review.

Higher-order operators need a contract

mergeMap and switchMap use the same fixed inner sequence so the cancellation behavior is the only moving part. That keeps the comparison useful without pretending to be a full app.

Use it before the real test

The output is a learning hint. Use a real RxJS TestScheduler or application test when scheduler choice, subscriptions, hot observables or real async sources matter.

Reactive timing usually sits next to formatting, test assertions and UI test contracts. These neighboring tools cover the adjacent review surfaces.

Open date-fns Format PlaygroundOpen Jest Matcher PlaygroundOpen Playwright Locator Playground

FAQ

Does this execute my RxJS code?

No. The playground parses a limited marble string and runs a deterministic simulator. It never evaluates user JavaScript.

Is the output guaranteed to match full RxJS?

No. It is a curated learning subset for common operator intuition. Use real RxJS tests for exact scheduler and subscription behavior.

When should I use TestScheduler instead?

Use TestScheduler when the production code uses real Observables, custom schedulers, subscription assertions, hot/cold behavior or complex inner streams.

What is the main difference between mergeMap and switchMap here?

mergeMap keeps previous inner work running, while switchMap drops pending inner events when a newer source value arrives.