Event Loopy Visualized

[vagostep]

Hi all! I've been working on an open source tool, that allows us to visualize how the NodeJs Event Loop works.

I am willing to make this tool useful for everyone who wants to learn more about this topic. This tool is an interactive tool where you can run any code and see how the event loop and nodes handle it!

I'd be awesome if you all consider this tool in the chapters that will cover the Event Loop in this book.

Check it out: https://vagostep.github.io/Node-EventLoop-Visualizer/

I'm maintaining this tool so if you consider more examples, I can add them and if for some reason does not work, I'll fix it.

[ishtms]

Hi @vagostep,

Just saw your visualizer - it's really impressive work! This is exactly what developers need to build intuition about Node.js internals.

However, the content I'm writing is targeting Node.js v22/v24, and I noticed a few areas where the visualizer could be updated to match the current behavior. The main one that stood out: the execution order between process.nextTick and Promise microtasks has some nuances in latest versions of Node - specially the "emptied live until completion" behavior where if you're already in a microtask phase, new microtasks get processed before switching back to nextTick.

If you're open to it, here are the absolute minimum updates that would make this perfect for learners using current Node.js versions:

1. Show the dynamic priority behavior - maybe a visual indicator when microtasks queued during microtask execution stay in the same phase
2. Add queueMicrotask() support - it's now the standard API alongside process.nextTick()
3. A toggle or note for ESM vs CommonJS context differences (ESM starts in microtask phase)

The book covers the event loop in extensive detail in Chapters 1.4, 23.1, and 23.2. Your visualizer would be an incredible complement to that content - giving readers a way to actually see what we're describing in text.

Would these updates be feasible? I'd love to reference your visualizer in the book as it's such a valuable learning tool. Happy to provide more specific examples of the edge cases if that would help!

Thanks for creating this resource for the community!

[vagostep]

Sure thing! I'd love to collaborate and make the suggested changes.

Can I use this thread to keep you updated and maybe ask some questions I could have?

[ishtms]

Definitely! Thank you.

[vagostep]

Hi! @ishtms

I added queueMicrotask() support

Screen.Recording.2025-09-06.at.11.14.06.PM.mov

One thing I found super interesting was, everywhere is talking about how the micro task loop is executed after each Event Loop Phase; and that is not right! The micro task loop (I called Ticks & Rejections Loop in the visualizer) is executed ONLY when an operation is complete. And in Node.js' World, an operation is when passing from C++ code to Javascript code.

Quote:
process.nextTick()

will be processed after the current operation is completed, regardless of the current phase of the event loop. Here, an operation is defined as a transition from the underlying C/C++ handler, and handling the JavaScript that needs to be executed.

[ishtms]

Thanks again, @vagostep.

The micro task loop (I called Ticks & Rejections Loop in the visualizer) is executed ONLY when an operation is complete.

That's partly true. The microtask queue is executed after a macrotask finishes, and (this is important) the call stack must be empty. The event loop can't proceed if the call stack isn't empty. So, saying, "It will proceed after any operation" isn't entirely correct.

I added queueMicrotask() support

I was playing with the visualizer and found a couple of issues.

The first is an error, fs.createWriteStream() is not a function, which happened when I selected the streams template from the dropdown.

The second is a priority issue. The event loop often jumps from the poll phase back to the pending callbacks phase, which isn't supposed to happen.

I really appreciate you taking the time to add these features for NodeBook. Once the event loop priority issue is fixed, I'd love to add this to the latest chapter of Event loops on NodeBook.

[vagostep]

Hi @ishtms i'm going to buy a domain so the URL would be more friendly rather than the GitHub page. I'll let you know!

[ishtms]

Sounds good @vagostep

[ishtms]

Hi @vagostep, hope you're doing good. Should I add your visualizer's link in the chapter, or wait for your domain to be live?

[vagostep]

@ishtms Hi! glad you asked. I just finished to configure the new domain:

https://nodeloops.com/

I added your suggestion about the Pending Callback Phase and queueMicrotask().

I am working now on dynamic enqueue new callbacks during the same phase.

I have to make a little more of research about ESModules vs CommonJs to try to figure it out how to tackle that.

[vagostep]

I am able to see the different executions between commonjs and esmodules 😱😱 I didn't know that.

Soon I'll publish the changes to support both @ishtms

[vagostep]

Hi @ishtms I've added support for CommonJs and ESModules, and a toggle to switch between them. You were right! the Event Loop behaves differently. For ESModules it executes the Event Loop first and when it gets the Poll Phase, it starts to execute the Javascript code

Please take a look at the latest version I deployed

[ishtms]

Hi @ishtms I've added support for CommonJs and ESModules, and a toggle to switch between them. You were right! the Event Loop behaves differently. For ESModules it executes the Event Loop first and when it gets the Poll Phase, it starts to execute the Javascript code

Please take a look at the latest version I deployed

Thanks, @vagostep! I’ve added the NodeLoops link to the Event Loop chapter. Check it out here.

[vagostep]

Thank you! I'll look at the chapter! Also I want you to know that I'm continuing working on adding the dynamical addition of callbacks in micro task queues while we are in the next tick phase! I won't give up until I have that working!

[vagostep]

Done! I've added the dynamic behavior for nextTicks & Promises. Pending queueMicrotasks :)

[ishtms]

Hi @vagostep, I've found that there's some issue when I try to use an import statement while having the "es modules" checkbox active. You might want to look into it? Here's the code I used.

import fs from 'fs'
console.log('start');
let i = 1;
const interval = setInterval(function a() {
  console.log('Interval ', i++);
  
  if (i > 4) {
    clearInterval(interval);
  }
}, 100);
console.log('end');

[vagostep]

Ahhhh I know what the problem was.

There is no need to add the import statement.

The imports are handled internally by the backend.

Try it without the import sentence.

[vagostep]

Hi @ishtms I've created a bug to add a workaround and support import or require statements

vagostep/Node-EventLoop-Visualizer#49

[vagostep]

Hi @ishtms I've added support for dynamically enqueue microTask during MicroTask phase