Node.js is an open source , cross-platform JavaScript runtime environment (not a language / framework) built on Chrome's V8 engine, allowing JS to run outside the browser .
open source -source code is publicly available for sharing and modification
cross platform - Available on Mac, Windows and Linux
JavaScript runtime is an environment which provides all the necessary components in order to use and run a JavaScript program .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Runtime Flow</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>body{margin:0;padding:2rem 0;background:#ffffff;}</style>
</head>
<body>
<div class="infographic-jsflow">
<div class="jsf-diagram" role="img" aria-label="Animated diagram of the JavaScript runtime event loop">
<div class="jsf-node jsf-code" data-part="code">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/></svg></span>
<span class="jsf-label">JS Code</span>
</div>
<div class="jsf-arrow-down" aria-hidden="true">↓</div>
<div class="jsf-browser">
<div class="jsf-browser-title">Chrome Browser</div>
<div class="jsf-browser-inner">
<div class="jsf-engine">
<div class="jsf-engine-title">V8 Engine</div>
<div class="jsf-engine-row">
<div class="jsf-node jsf-mem" data-part="memory">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12v-2"/><path d="M12 18v-2"/><path d="M16 12v-2"/><path d="M16 18v-2"/><path d="M2 11h1.5"/><path d="M20 18v-2"/><path d="M20.5 11H22"/><path d="M4 18v-2"/><path d="M8 12v-2"/><path d="M8 18v-2"/><rect x="2" y="6" width="20" height="10" rx="2"/></svg></span>
<span class="jsf-label">Memory<br>Heap</span>
</div>
<span class="jsf-arrow-h" aria-hidden="true">⇄</span>
<div class="jsf-node jsf-stack" data-part="callstack">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg></span>
<span class="jsf-label">Call<br>Stack</span>
</div>
</div>
<div class="jsf-loop-mark" data-part="eventloop">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg></span>
<span class="jsf-label">Event Loop</span>
</div>
</div>
<span class="jsf-arrow-h jsf-arrow-mid" aria-hidden="true">→</span>
<div class="jsf-node jsf-webapi" data-part="webapis">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></span>
<span class="jsf-label">Web / Browser APIs</span>
<div class="jsf-webapi-list">
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg> DOM</span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg> Storage</span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg> Timers</span>
</div>
</div>
</div>
<div class="jsf-queues">
<div class="jsf-node jsf-micro" data-part="microtask">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></span>
<span class="jsf-label">Microtask Queue</span>
</div>
<div class="jsf-node jsf-callback" data-part="callback">
<span class="jsf-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg></span>
<span class="jsf-label">Callback / Task Queue</span>
</div>
</div>
</div>
<div class="jsf-dot" id="jsf-dot"></div>
</div>
<p class="jsf-caption" id="jsf-caption"> </p>
<div class="jsf-controls">
<button type="button" class="jsf-btn" id="jsf-play">▶ Play</button>
</div>
</div>
<style>
.infographic-jsflow {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--body-font: 'Inter', -apple-system, sans-serif;
max-width: 880px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 clamp(1rem, 4vw, 2rem);
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-jsflow[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.infographic-jsflow * { box-sizing: border-box; }
.jsf-diagram { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0 0.5rem; }
.jsf-dot {
position: absolute;
top: 0; left: 0;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%);
transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1), top 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
z-index: 5;
}
.jsf-dot.is-visible { opacity: 1; }
.jsf-dot.no-anim { transition: opacity 0.2s; }
.jsf-arrow-down { font-size: 1.3rem; color: var(--ink-soft); margin: 0.15rem 0; }
.jsf-arrow-h { font-size: 1.2rem; color: var(--ink-soft); padding: 0 0.4rem; }
.jsf-arrow-mid { align-self: center; }
.jsf-node {
position: relative;
border: 1px solid var(--line);
background: var(--paper);
border-radius: 4px;
padding: 0.65rem 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: opacity 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
font-size: 0.85rem;
font-weight: 600;
text-align: left;
}
.jsf-node.is-active { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.05); }
.jsf-node.is-dim { opacity: 0.4; }
.jsf-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.jsf-icon svg { width: 100%; height: 100%; }
.jsf-label { line-height: 1.2; }
.jsf-code { margin: 0 auto 0.15rem; }
.jsf-browser {
position: relative;
border: 1px solid var(--line);
border-radius: 6px;
padding: 1rem;
width: 100%;
background: var(--paper-alt);
}
.jsf-browser-title { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.75rem; text-align: center; }
.jsf-browser-inner { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.jsf-engine {
border: 1px solid var(--line);
border-radius: 4px;
padding: 0.75rem;
background: var(--paper);
flex: 1 1 260px;
}
.jsf-engine-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.6rem; text-align: center; }
.jsf-engine-row { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-bottom: 0.6rem; }
.jsf-loop-mark {
display: flex; align-items: center; justify-content: center; gap: 0.4rem;
margin: 0.2rem auto 0; font-size: 0.8rem; font-weight: 600;
border: 1px dashed var(--line); border-radius: 4px; padding: 0.4rem 0.6rem;
transition: opacity 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.jsf-loop-mark.is-active { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.05); }
.jsf-loop-mark.is-dim { opacity: 0.4; }
.jsf-webapi { flex: 1 1 200px; flex-direction: column; align-items: flex-start; }
.jsf-webapi-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); width: 100%; }
.jsf-webapi-list span { display: flex; align-items: center; gap: 0.35rem; }
.jsf-webapi-list svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.jsf-queues { display: flex; gap: 0.6rem; margin-top: 0.85rem; flex-wrap: wrap; justify-content: center; }
.jsf-queues .jsf-node { flex: 1 1 160px; justify-content: center; }
.jsf-caption { text-align: center; font-size: 0.9rem; color: var(--ink-soft); min-height: 1.3em; margin: 1.1rem 0 0.75rem; transition: opacity 0.15s; }
.jsf-controls { display: flex; justify-content: center; padding-bottom: 1.5rem; }
.jsf-btn {
font-family: var(--body-font);
font-size: 0.85rem;
font-weight: 600;
padding: 0.55rem 1.2rem;
border-radius: 5px;
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
cursor: pointer;
}
.jsf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
.infographic-jsflow * { transition: none !important; }
}
</style>
<script>
(function () {
var wrapper = document.currentScript.closest('.infographic-jsflow')
|| document.querySelector('.infographic-jsflow');
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') { dark = true; }
else if (bodyAttr === 'false') { dark = false; }
else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
var allParts = wrapper.querySelectorAll('[data-part]');
var captionEl = wrapper.querySelector('#jsf-caption');
var playBtn = wrapper.querySelector('#jsf-play');
var diagram = wrapper.querySelector('.jsf-diagram');
var dot = wrapper.querySelector('#jsf-dot');
var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function partEl(name) { return wrapper.querySelector('.jsf-diagram [data-part="' + name + '"]'); }
function centerOf(name) {
var el = partEl(name);
if (!el) return null;
var dr = diagram.getBoundingClientRect();
var r = el.getBoundingClientRect();
return { x: r.left - dr.left + r.width / 2, y: r.top - dr.top + r.height / 2 };
}
function moveDot(name, animate) {
var c = centerOf(name);
if (!c) return;
if (!animate || reduceMotion) {
dot.classList.add('no-anim');
dot.style.left = c.x + 'px';
dot.style.top = c.y + 'px';
dot.classList.add('is-visible');
// force reflow so the next animated move re-enables transition cleanly
void dot.offsetWidth;
dot.classList.remove('no-anim');
} else {
dot.classList.add('is-visible');
dot.style.left = c.x + 'px';
dot.style.top = c.y + 'px';
}
}
var steps = [
{ part: 'code', caption: 'JS code is handed to the engine.' },
{ part: 'callstack', caption: 'Synchronous code starts running on the Call Stack.' },
{ part: 'webapis', caption: "setTimeout() hands its callback to a Web API and returns immediately." },
{ part: 'callstack', caption: 'Back on the stack: Promise.resolve().then() runs next.' },
{ part: 'microtask', caption: "The promise is already resolved, so its callback goes straight into the Microtask Queue — it skips the Web APIs entirely." },
{ part: 'webapis', caption: "Meanwhile, elsewhere, the timer's delay finishes." },
{ part: 'callback', caption: 'The finished timer callback moves into the Callback Queue.' },
{ part: 'eventloop', caption: 'Stack is empty. The Event Loop checks the Microtask Queue first — always drained before the Callback Queue.' },
{ part: 'callstack', caption: 'That Promise callback runs now.' },
{ part: 'eventloop', caption: 'Loop checks again. Microtask Queue is empty now, so it looks at the Callback Queue.' },
{ part: 'callstack', caption: 'The setTimeout callback finally runs.' }
];
var i = -1;
var STEP_MS = 2000;
var playing = false;
function highlight(name) {
allParts.forEach(function (el) {
var isMatch = el.getAttribute('data-part') === name;
el.classList.toggle('is-active', isMatch);
el.classList.toggle('is-dim', !isMatch);
});
}
function clearAll() {
allParts.forEach(function (el) { el.classList.remove('is-active', 'is-dim'); });
}
function tick() {
i++;
if (i >= steps.length) {
playing = false;
playBtn.disabled = false;
playBtn.textContent = '↻ Replay';
return;
}
var step = steps[i];
captionEl.textContent = step.caption;
highlight(step.part);
if (i === 0) {
moveDot(step.part, false);
} else {
moveDot(step.part, true);
}
setTimeout(tick, STEP_MS);
}
function runOnce() {
if (playing) return;
playing = true;
playBtn.disabled = true;
playBtn.textContent = '▶ Playing…';
i = -1;
clearAll();
captionEl.textContent = '\u00a0';
dot.classList.remove('is-visible');
tick();
}
playBtn.addEventListener('click', runOnce);
})();
</script>
</body>
</html>👉Why use it:
Enables you to build servers, CLIs, APIs — all with just one language
Non-blocking, event-driven I/O → handles many users fast
Built end to end — no switching languages between frontend/backend
Massive ecosystem via npm (Node Package Manager)
☝️Who uses it?
Facebook, Netflix, Uber, LinkedIn: Because of its speed, scale, and simplicity