Reactivity Examples

This collection demonstrates three fundamental reactive programming patterns using vanilla JavaScript. These examples show the manual patterns that modern frameworks (React, Vue, Svelte) automate.

📖 Read Full Documentation

Examples

1. Check Boxes

Concept: Derived State / Computed Properties

Pattern: UI automatically reacts to state changes

Background turns green when all checkboxes in a group are checked
Demonstrates one-directional data flow (state → UI)
Shows idempotent rendering and declarative updates

Real-world analogy: A light that turns on only when ALL switches are flipped

View Demo

2. Multipliers

Concept: Shared State with Multiple Dependents

Pattern: One value affects multiple outputs (one-to-many reactivity)

Common multiplier × multiple specific multipliers = multiple outputs
Demonstrates dependency graphs (each output depends on TWO inputs)
Shows cascading updates and reusable update logic

Real-world analogy: A spreadsheet where changing one cell recalculates all formulas

View Demo

3. Synchro

Concept: Bidirectional Synchronization / Peer-to-Peer Reactivity

Pattern: Multiple inputs stay in sync - any one can be the source

Change any input in a group → all others update to match
Demonstrates two-way binding within groups
Shows symmetrical relationships (no master/slave)

Real-world analogy: Google Docs collaborative editing or mirrored form fields

View Demo

Summary: Three Patterns of Reactivity

Example	Pattern	Direction	Use Case
Check Boxes	Derived state	One direction (data → UI)	Computing values from state
Multipliers	Computed dependencies	One-to-many	Shared state affecting multiple outputs
Synchro	Synchronized state	Bidirectional (peer-to-peer)	Keeping multiple inputs in sync

Educational Value

These examples teach reactivity without framework magic - the core concepts that underpin:

React's state management
Vue's reactivity system
Svelte's compile-time reactivity
Angular's change detection
Observable patterns (RxJS)

Understanding these manual patterns makes it easier to understand what frameworks are doing under the hood.

📖 Read Full Documentation