I Built a Visual JavaScript Execution Tool Because Reading the Event Loop Wasn’t Enough

One of the hardest parts of learning JavaScript isn’t writing the syntax.

It’s understanding what JavaScript is actually doing behind the scenes.

Take this simple example:

console.log("Start");
setTimeout(() => {
  console.log("Timeout");
}, 0);
Promise.resolve().then(() => {
  console.log("Promise");
});
console.log("End");

The output is:

Start
End
Promise
Timeout

But knowing the output and understanding why it happens are two different things.

The Problem

When learning concepts like:

• Call Stack
• Event Loop
• Microtask Queue
• Task Queue
• Promises
• Closures
• Scope
• Hoisting
• Async/Await

we usually rely on static diagrams.

Those diagrams are useful, but I wanted something more interactive.

I wanted to actually see the code execute.

So I built VisualJS.

What is VisualJS?

VisualJS is an interactive JavaScript visualization tool that helps you understand what happens while your JavaScript executes.

Instead of only reading:

“Promises use the microtask queue.”

you can actually visualize the execution flow.

Try it here:

https://visualjs.in/

Let’s Look at the Example

Consider this code:

console.log("Start");
setTimeout(() => {
  console.log("Timeout");
}, 0);
Promise.resolve().then(() => {
  console.log("Promise");
});
console.log("End");

The synchronous code executes first:

Start
End

The Promise callback goes into the microtask queue.

The setTimeout callback goes into the task queue.

After the current synchronous execution finishes, microtasks are processed before the next task.

So we get:

Start
End
Promise
Timeout

Seeing this execution step by step makes the behavior much easier to understand.

What I’m Building

The goal of VisualJS isn’t just to visualize the Event Loop.

I want to make difficult JavaScript concepts interactive.

Some of the concepts I’m working on include:

JavaScript Execution

• Call Stack
• Execution Context
• Scope
• Hoisting
• Closures
• this

Asynchronous JavaScript

• Event Loop
• Microtasks
• Macrotasks
• Promises
• Async/Await
• Timers

JavaScript Internals

• Prototype Chain
• Objects
• Functions
• Memory and References

The idea is simple:

Don’t just read what JavaScript does. See it happen.

Try This Yourself

Before running this code, predict the output:

console.log("A");
setTimeout(() => {
  console.log("B");
}, 0);
Promise.resolve().then(() => {
  console.log("C");
});
console.log("D");

What do you think it will print?

A
?
?
?

Now try it in VisualJS:

https://visualjs.in/

I’d Love Your Feedback

VisualJS is still evolving, and I’d love feedback from JavaScript developers.

Which JavaScript concept is hardest for you to understand?

What would you like to visualize?

What would make the tool more useful?

If you try VisualJS, let me know what you think.

VisualJS: https://visualjs.in/

Let’s make JavaScript internals a little less mysterious. 🚀