Build a JavaScript execution visualizer for a class without writing code

A university lecturer built JSVisualizer and its interpreter over five months with Claude Code alone: about 200 commits and 48 design records, and the tool has been used in a first-year class since September.

Done withClaude Code· Nov 10, 2026

What they did

Tetsuo Tanaka, who teaches software at a university after two decades in industry research, built JSVisualizer, a web app that steps through a JavaScript program and shows it in 12 views, plus the JSInterpreter it runs on. He wrote no code. He gave Claude Code natural-language instructions, kept project rules in CLAUDE.md and had design decisions recorded as ADRs. His loop was to describe a new feature in broad strokes, try it, and give specific instructions when something felt wrong. He used plan mode to reject approaches before code existed, and asked Claude what a feature was for when its value was unclear.

How it went

By November 2 the visualizer had 147 commits and 48 ADRs, and the interpreter 52 commits, from projects started in late May. The tool has been used in a first-year class since September 30. Claude's first plan for stepping backward replayed the program from the start; Tanaka rejected it and proposed storing every step's state, which Claude adopted and named as omniscient debugging. An unclear chart was rebuilt as a flame chart after he questioned it. A mistranslated tab name went unnoticed for four and a half months until class use exposed it.

Worth knowing

He has read almost none of the code and left the test cases to Claude without checking their coverage, so correctness rests on his own use of the tool. Recording every step up front caps programs at 50,000 steps, which is fine for small teaching examples. Giving the reason with a request, such as matching his course materials, led to better changes.

Try it

With Claude Code· 3 parts to fill in

We are building [a tool] for [who will use it]. For a new feature I will give only the broad goal: show me a plan in plan mode first and wait for my yes before writing code. For changes to existing features I will describe the symptom and the result I want; ask me one question if the intent is unclear. After each change, record any design decision as a short ADR in [docs/adr], update CLAUDE.md if a project rule changed, add tests, and tell me in plain words what changed so I can try it. If I ask what a feature is for, explain it honestly, including whether it overlaps with another one.

Square brackets are the parts to fill in. The prompt is ours; the story is theirs.

Where they said it

Related