Problem
Teaching component-based UI development to beginners failed consistently. The abstraction gap between 'HTML is a file' and 'React is a runtime' was too wide. Students memorized syntax without understanding the mental model.
Context
Existing tools were either too simple (CodePen, no components) or too complex (Create React App, 700MB of tooling for hello world). Students needed to see the mechanism — the virtual DOM, the reconciler, the component tree — not just use it.
Constraint
Must run entirely in-browser. Zero installation. First meaningful paint under 2 seconds. And it had to be small enough that a student could read the entire source and understand every line.
The decision
What we chose and why.
Build a minimal React-inspired component framework whose internals were visible and legible. The framework itself would be the curriculum. Students would write components in a JSX-like syntax, watch the virtual DOM diff in a live panel, and modify the framework source as an exercise.
Tradeoffs
A transpiler is invisible. Tagged templates are native JavaScript. Students could trace exactly how their HTML string became a virtual DOM node.
A framework students can read is a framework they can reason about. Every feature added is one more thing that obscures the concept.
The mental model — component tree, state, re-renders — had to be visible at all times. Understanding only happens when you can see what's happening.
Architecture
Click any node to inspect
The failure
The first implementation used a real transpilation pipeline (Babel in a web worker). It was 40MB, took 8 seconds to initialize, and crashed on mobile. Students who had to wait for a spinner before seeing any output had already lost interest.
DISCOVERED — First classroom session. Half the students gave up during the loading screen.
IMPACT — The first cohort never saw the devtools panel. Retention in week 2 dropped to 30%.
Iteration
Rebuilt from scratch without a build step. Tagged template literals, no transpiler, no Babel. Load time dropped to 800ms. The entire framework became part of the curriculum — students modified the reconciler as homework.
Outcome
180+ students who can reason about component trees.
Students from this cohort understood React when they encountered it because they had already built one. Retention in subsequent React modules improved by 3× compared to the previous cohort. Several students cited the framework internals as their interview talking point.
Lessons
Teaching tools must optimize for conceptual clarity. Features obscure. Simplicity reveals.
If students are waiting for a spinner, you've already lost them.
The best way to teach how something works is to make it small enough to read.
A framework designed to be modified is a better teaching tool than one designed to be correct.