Interactive visualizations of how JavaScript, React, Vue, Svelte, Angular, backend systems, and AI models work under the hood. Step through animations that show what the engine does at each stage, then read the theory behind it.
45 topics across five categories. Each one pairs a step-by-step visualization with theory sections covering how it works, common mistakes, and interview questions, all on a single page.
npm install
npm run devOpen http://localhost:3000. The app redirects to /javascript by default.
Node 20 or newer is required.
| Command | Description |
|---|---|
npm run dev |
Start dev server (webpack mode) |
npm run build |
Production build |
npm run start |
Serve the production build |
npm run lint |
Run ESLint |
npm run typecheck |
Run TypeScript (also validates every topic registry) |
npm run format |
Format with Prettier (format:check in CI) |
npm run verify |
Lint, typecheck, format check, and build |
Each topic lives at a single route, with the visualization at the top and the theory sections below it. Press Cmd+K (or /) anywhere to search topics. Space plays and pauses, the arrow keys step, R resets, and the scrubber next to the step counter jumps to any step. Topics you finish get a check mark, stored in your browser.
Runtime internals: the event loop, scope, memory, and async.
| Topic | Difficulty |
|---|---|
| Event Loop | Intermediate |
| Hoisting | Beginner |
| Execution Context | Intermediate |
| Closures | Intermediate |
| Promises | Intermediate |
| this Keyword | Intermediate |
| Scope Chain | Intermediate |
| Type Coercion | Beginner |
| Destructuring | Beginner |
| Spread & Rest | Beginner |
| Prototypal Inheritance | Advanced |
| Reference vs Value | Beginner |
| Heap & Stack | Advanced |
| Garbage Collection | Advanced |
| Generators & Iterators | Advanced |
| Event Delegation | Beginner |
| Modules & Imports | Intermediate |
| Async/Await | Intermediate |
| Debounce & Throttle | Beginner |
How React decides what to render and what it commits to the DOM.
| Topic | Difficulty |
|---|---|
| Virtual DOM | Beginner |
| Reconciliation | Intermediate |
| Context Propagation | Intermediate |
| Fiber Tree | Advanced |
| Hooks | Intermediate |
| Render Cycle | Advanced |
| Memoization | Intermediate |
| Suspense | Intermediate |
| Server Components | Advanced |
| Error Boundaries | Intermediate |
| useEffect Lifecycle | Beginner |
| State Batching | Intermediate |
| Concurrent Rendering | Advanced |
How Vue, Svelte, and Angular track changes, compared side by side.
| Topic | Difficulty |
|---|---|
| Vue Reactivity | Intermediate |
| Svelte Runes | Intermediate |
| Angular Change Detection | Advanced |
What happens between a request leaving the browser and the response.
| Topic | Difficulty |
|---|---|
| HTTP Request Lifecycle | Beginner |
| Database Indexing | Intermediate |
| Caching Strategies | Intermediate |
| JWT Authentication | Intermediate |
| Rate Limiting | Intermediate |
What a language model does with your text, from tokens to the next word.
| Topic | Difficulty |
|---|---|
| Tokenization | Beginner |
| Embeddings | Beginner |
| Attention | Intermediate |
| Next Token Prediction | Intermediate |
| Backpropagation | Advanced |
Some topics also have a sandbox mode where you can edit the code and watch the visualization respond. Event Loop is the reference implementation.
src/
app/[category]/ Generated category and topic routes
components/
layout/ Page shell, navigation
visualization-ui/ Shared primitives (VisualizationToolbar, SourceCodePanel, NeonPanel, ...)
visualizations/ One folder per topic, plus registry.tsx
content/theory/ Theory content, one file per topic
hooks/ useExampleTopic, useStepPlayback, useChangeFlash
lib/
topics.ts Topic registry, the single source of truth
metadata.ts SEO metadata factory
sandbox/ Sandbox mode infrastructure
Adding a topic touches several registries, all typed by TopicId so a missing entry fails the type check. CONTRIBUTING.md lists them.
All are optional and have working defaults. Copy .env.example to .env.local to override.
| Variable | Default | Purpose |
|---|---|---|
NEXT_PUBLIC_SITE_URL |
https://visualizejs.com |
Canonical URLs, sitemap, Open Graph tags |
NEXT_PUBLIC_CREATOR_LINKEDIN_URL |
Maintainer's profile | Credit link in the footer |
NEXT_PUBLIC_CREATOR_AVATAR_SRC |
/personal-image.png |
Avatar in the footer |
If you fork this, set the last two to your own.
Read CONTRIBUTING.md first. New topics are welcome, and the authoring docs below walk through the process.
| Doc | Covers |
|---|---|
docs/topic-authoring.md |
JavaScript topic creation workflow |
docs/react-topic-authoring.md |
React topic extensions |
docs/component-reference.md |
Design system, components, hooks, animations |
docs/theory-authoring.md |
Theory content authoring |
docs/sandbox-authoring.md |
Sandbox mode |
docs/architecture.md |
Frontend architecture rules |
docs/categories.md |
Category registry and adding a category |
docs/seo.md |
SEO implementation |
- Next.js 16 App Router
- React 19
- TypeScript (strict)
- Tailwind CSS v4
- shadcn/ui primitives
- CodeMirror 6 and Acorn for sandbox mode