Playground

DFS Traversal

Visualize Depth-First Search step-by-step with state, stack history, and detailed traversal logs.

DFS Traversal Lab

Explore Depth-First Search with recursive traversal. DFS follows one path deeply, highlights active path edges, and backtracks while keeping visited nodes marked.

function DFS(node) {
mark node visited
for each neighbor: if unvisited, recurse
on return, backtrack (path edge unhighlights)
if nodes remain: start next component
}
ABCDEFG

INSPECTOR

Select a node or edge.
Click any Node or Edge on the canvas to update its label or weight here.
Traversal Controls
500ms
Fast (100ms)Slow (2000ms)
Execution Logs & Recursion
Active Recursion Path
No active recursive calls
Traversal Output
Pending...
Start Traversal to view execution logs.

Want to see how the recursive code works?

Copy this code and paste it in the Recursion Tracer to visualize the call stack step-by-step.

OPEN TRACER
const graph = {
  'A': ['B', 'C'],
  'B': ['D'],
  'C': ['E'],
  'D': [],
  'E': [],
  'F': ['G'],
  'G': []
};

function dfs(node, visited = []) {
  if (!node || visited.includes(node)) return;
  
  visited.push(node);
  
  const neighbors = graph[node] || [];
  for (const neighbor of neighbors) {
    dfs(neighbor, visited);
  }
  
  return visited;
}

// Trace execution from starting node
dfs('A');