Build a Reactivity Engine
From signals to DOM updates — build a mini reactivity library from scratch in vanilla JavaScript.
How labs work
- Follow the steps in the task panel.
- Edit the highlighted file — usually
engine.js. - Watch the preview update as you type.
- Run tests when you think you are done.
- Open hints if you get stuck — they reveal one at a time.
After this path
- Implement dependency tracking and effect scheduling
- Batch updates with microtask flushing
- Build computed signals and a minimal render block
- Ship a working todo app on your own engine
Lesson runbook
Observable State
Implement createSignal with get, set, and subscribe — the foundation of push-based reactivity.
Dependency Tracking
Wire createEffect so signals automatically re-run effects when dependencies change.
Effects and Cleanup
Support cleanup callbacks and disposeEffect to prevent leaks and duplicate listeners.
Batching and Scheduling
Batch multiple signal writes into a single microtask flush of effects.
Computed Signals
Add lazy, cached createComputed that invalidates when dependencies change.
Render Block
Build createBlock and text() to bind signal values to DOM nodes.
Capstone — Todo App
Ship a todo app on your reactivity engine with add, toggle, remove, and empty state.