Build a fine-grained reactive UI framework from scratch in TypeScript — signals, effects, a glitch-free scheduler, a fine-grained renderer with keyed lists, components, context, and a real TodoMVC. Learn exactly how React and SolidJS work underneath.
Every modern UI framework — React, Vue, SolidJS, Svelte — is built on one idea: reactivity. State changes, and the right parts of the screen update automatically. But how does the framework KNOW what to update? In this project you'll answer that question by building a complete fine-grained reactive UI framework, "Pulse", from scratch in TypeScript, with zero dependencies.
You'll start with the reactive core: signals, effects, and computeds with automatic dependency tracking. Then you'll make it correct and efficient — batching, and the glitch-free push-pull scheduler that recomputes a diamond dependency exactly once. From there you connect reactivity to a (test-friendly, in-memory) DOM with fine-grained bindings, so changing a signal updates exactly one text node. You'll add keyed-list reconciliation, function components, lifecycle hooks, and context — and finish by assembling a complete, interactive TodoMVC entirely from the primitives you built.
This is the project that demystifies the tools you use every day. By the end you'll understand — because you built it — dependency tracking, the diamond problem, fine-grained vs virtual-DOM rendering, keyed reconciliation, and the ownership tree behind lifecycle and context. Every milestone is graded by a real test suite, so the moment your framework behaves correctly, you'll know.