A neural network you can watch think.
NeuroForge trains a real network — forward pass, backprop, optimizers, all hand-written in vanilla JavaScript — and paints every step of it on screen. No TensorFlow. No build step. The math is the product.
The why
It started as an itch about honesty
Almost every "neural network demo" online is a magic trick. There's a slick UI on top, and somewhere underneath a giant library is quietly doing all the actual learning. You move a slider, something animates, and you walk away having understood nothing about how the thing learns. It looks like magic in a notebook and falls apart the moment you have to explain it.
I'd hit this wall trying to explain backpropagation to people — reaching for the same tired diagram of arrows pointing backward, watching eyes glaze over. So I flipped the trick inside out. What if the library was the demo? What if you could open the source and find the gradients sitting right there, in 250 lines of commented JavaScript, demonstrably training a spiral classifier?
That's NeuroForge. The visualizer is wrapped around a real engine, not a toy. If you want to understand backprop, reading code that obviously works beats another diagram.
How it came together
A build timeline (including the part that broke everything)
-
January 2026 · Ideation
"What if the library was the demo?"
Sketched the premise on a napkin: a playground where the learning algorithm is hand-written and readable, not hidden. One hard rule from day one — zero dependencies, no build step.
-
February 2026 · Design & scoping
The "instrument" look, and a deliberately small scope
Settled the aesthetic: deep slate, one molten-amber accent, monospaced telemetry, cool/warm hues mapped to the two classes everywhere. Scoped it to 2-D binary classification — small enough to train live in a browser, rich enough to teach depth, features, and overfitting.
-
March 2026 · The engine
Forward pass, backprop, three optimizers — by hand
Wrote the core: fully-connected layers, manual backpropagation, and SGD / Momentum / Adam built from the update rules up. Seeded RNG with He/Xavier init so any run reproduces.
-
April 2026 · Where it got hard
The boundary that refused to bend
First integration: I hit Train and the decision boundary just… sat there. No crash, no error — the worst kind of bug, the quietly-wrong kind. Two days of staring before a numerical gradient check pinned it to a batch-averaging slip. Once fixed, analytic and numerical gradients agreed to ~2e-10, and the spiral finally unwound.
-
May 2026 · The visual layer
Making the learning legible at 60fps
Built the three views on raw canvas: the decision-boundary heatmap, the live weight graph, and hand-drawn loss/accuracy charts. Getting 6,400 forward passes per frame to stay smooth meant caching the field and recomputing only on change.
-
June 2026 · Polish & launch
Presets, accessibility, and ship
Added one-click presets ("Solve the spiral"), keyboard shortcuts, model export, an accessibility pass, and the About pages you're reading. Deployed to Vercel as a static site — nothing to configure.
What it does
Key features
◆ Five datasets
Spiral, circle, XOR, two gaussians, and interleaving moons — with adjustable noise, sample count, and train/test split.
◆ Build the net live
Add or remove hidden layers, change neuron counts, switch activation (tanh / ReLU / sigmoid). The parameter count updates as you go.
◆ Feature engineering
Toggle X₁², X₂², X₁X₂, sin X₁, sin X₂. Solve the circle with no hidden layers — a logistic-regression lesson in one click.
◆ Live decision boundary
A diverging heatmap of the network's output across the whole plane, recomputed as it learns. This is the centrepiece.
◆ Live weight graph
Every connection coloured by sign (amber +, cyan −) and weighted by magnitude — you literally watch the network reorganise itself.
◆ Full optimizer control
Optimizer, learning rate, batch size, and L2 regularization — all applied live. Plus presets, model export, and keyboard shortcuts.
The interesting bits
Technical decisions & challenges
The boundary that wouldn't bend
// problem: silently-wrong gradients
The network ran without errors but never learned. With no exception to chase, the only honest move is to verify the gradients directly: nudge each weight by a tiny ε, measure how the loss actually changes (central differences), and compare to what backprop claims. The mismatch isolated a mini-batch averaging bug to a single line. The gradient check is still in the engine — analytic vs. numerical agree to ~2e-10.
6,400 forward passes, every single frame
// problem: real-time rendering in plain JS
The heatmap is an 80×80 grid — 6,400 forward passes — and naively recomputing it each frame tanks the framerate. The fix is two-part: render the field at low resolution into an off-screen canvas, then let the GPU smoothly upscale it; and only recompute when the weights change (a dirty flag), drawing the cached field otherwise. Result: a steady 60fps while training.
What you see is exactly what the net sees
// problem: keeping the picture truthful
The boundary renderer feeds raw plane coordinates through the same featurize() function the training data uses. So when you toggle "X₁²" and the boundary turns into a circle, that's not a visual approximation — it's the literal transform the network is learning on. The picture can't lie, because it's drawn from the same pipeline.
Under the hood
Tech stack — and why
Links
Dig deeper
Want to build something — or collaborate?
Whether it's a production LLM system or another from-scratch curiosity, I'm always up for an interesting problem.