Interactive visualizations for JavaScript and React concepts. Step through animations that show what the engine does at each stage, then read the theory behind it.
28 topics. 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 |
Each topic lives at a single route, with the visualization at the top and the theory sections below it.
| 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 |
| 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 |
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/ Next.js App Router routes
components/
layout/ Page shell, navigation
visualization-ui/ Shared primitives (NeonPanel, CodeBlock, TransportControls)
visualizations/ One folder per topic
content/theory/ Theory content, one file per topic
hooks/ 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. CONTRIBUTING.md lists all of 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/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