AlgoLens / CS Visualizer

Visualize · Understand · Learn

See Your Code Think.

Step-by-step visualization of core CS concepts — linked lists, loops, and sorting algorithms. Watch every comparison, swap, and pointer in real time.

List Visualization

Ready. Use the operations panel to interact with the list.

// Linked List Node structure
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;   // pointer →
  }
}

Operations

Info

Size0

Headnull

Tailnull

TraversalO(n)

PrependO(1)

AppendO(n)

Configuration

Start End Step

Speed

Loop State

end

iter

status

idle

Iterations

Output

Code

for (let i = 0; i < 8; i += 1) {
  console.log("i = " + i);
  // loop body executes
}
// Loop complete ✓
        

Configure the loop parameters and press Run or Step.

How It Works

Init — runs once at start: i = start

Condition — checked before each iteration: i < end

Body — executes if condition is true

Update — runs after body: i += step

Configuration

Start Limit Multiply by

Speed

Loop State

limit

iter

cond

true

Iterations

Output

Code

let n = 1;
let limit = 16;

while (n <= limit) {
  console.log(n);
  n = n * 2;
}
// n exceeds limit → stop
        

Configure the while loop and press Run or Step.

While vs For

Use for when you know the number of iterations in advance.

Use while when you loop until a condition becomes false.

⚠ Always ensure the condition eventually becomes false — or you get an infinite loop!

Array Visualization

Comparing

Swapping

Sorted

Size Speed

Comparisons

Swaps

Passes

Idle

Status

Press Run to start Bubble Sort, or Step to go one step at a time.

function bubbleSort(arr) {
  for (let pass = 0; pass < arr.length - 1; pass++) {
    for (let i = 0; i < arr.length - pass - 1; i++) {
      if (arr[i] > arr[i+1]) {
        [arr[i], arr[i+1]] = [arr[i+1], arr[i]];   // swap
      }
    }
  }
}
// Time: O(n²) · Space: O(1) · Stable: Yes
    

Array Visualization

Current Key

Comparing

Shifting

Sorted

Size Speed

Comparisons

Shifts

Insertions

Idle

Status

Press Run to start Insertion Sort, or Step to go one step at a time.

function insertionSort(arr) {
  for (let i = 1; i < arr.length; i++) {
    let key = arr[i];          // pick current element
    let j = i - 1;
    while (j >= 0 && arr[j] > key) {
      arr[j + 1] = arr[j];     // shift right
      j--;
    }
    arr[j + 1] = key;          // insert key
  }
}
// Time: O(n²) worst · O(n) best · Space: O(1) · Stable: Yes
    