Bubble Sort Visualizer: Step-by-Step Animation & Complexity

Bubble Sort

Category: Sorting | Time: O(n^2) | Space: O(1)

Input Data

Visualization

Visual representation of the data structure

About Bubble Sort

A simple sorting algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted.

Code Editor

The code is for reference. Editing it won't affect the visualization.

function bubbleSort(arr) {
  let n = arr.length;
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

Variable State

{
  "arr": "[5, 3, 8, 4, 2]",
  "n": 5
}

Bubble Sort: How It Works

Last updated October 28, 2026

Overview

Bubble Sort walks along the array comparing each pair of neighbours. Whenever the left value is bigger than the right one, the two are swapped. After one full pass, the largest value has been carried — bubbled — all the way to the last position, where it stays for good.

Each later pass can therefore stop one position earlier, because the tail of the array is already final. That is why the inner loop in the code runs to n - i - 1 rather than to the end of the array.

In the visualizer, watch the two highlighted bars on every comparison step. With the default input 5, 3, 8, 4, 2 the value 8 reaches the end after the first pass, 5 settles next, and so on until no out-of-order pair is left.

Step by step

Start at index 0 and compare arr[j] with arr[j + 1].
If arr[j] > arr[j + 1], swap them; otherwise leave them alone.
Move one position right and repeat until the end of the unsorted part.
The largest unsorted value is now in its final place, so shrink the unsorted part by one.
Repeat passes until the unsorted part has a single element (or, in the optimised version, until a pass makes no swaps).

Complexity

Case	Cost	Why
Best case	O(n)	Only with the early-exit flag: one pass over sorted input finds no swaps and stops. The version shown here always does every pass, so it is O(n^2) even on sorted data.
Average case	O(n^2)	About n^2/2 comparisons, and on random data roughly half of them lead to a swap.
Worst case	O(n^2)	Reverse-sorted input makes every comparison a swap.
Extra space	O(1)	Swaps happen in place using a single temporary variable.

When to use it

Teaching and interviews: it is the easiest sort to trace by hand, which makes it a good warm-up for reasoning about loop invariants.
Tiny or almost-sorted arrays where code size matters more than speed, and only with the early-exit optimisation.
Checking whether an array is already sorted: one optimised pass answers that in O(n).

Common mistakes

Off-by-one errors in the inner loop: running j up to n - 1 reads past the sorted tail and, in some languages, past the array.
Using >= instead of > in the comparison swaps equal elements and silently makes the sort unstable.
Forgetting that the textbook version has no early exit, so it never benefits from sorted input.

Worked Example: Bubble Sort Dry Run

Generated from the same trace that drives the visualizer above, using the default input.

A dry run is the best way to check your understanding of Bubble Sort: follow each row, predict the next one, and compare. The run below takes 47 steps in total. Steps that only re-print loop counters are left out so the decisions stand out. The Line column refers to the line numbers in the code listing above.

Input: 5, 3, 8, 4, 2
Result: arr = [2, 3, 4, 5, 8], return value = [2, 3, 4, 5, 8]

Step	Line	Array	What happens
1	2	[5, 3, 8, 4, 2]	n = 5
4	5	[5, 3, 8, 4, 2]	n = 5, i = 0, j = 0, comparison = 5 > 3
6	7	[3, 3, 8, 4, 2]	n = 5, i = 0, j = 0, temp = 5, arr[j] = 3
7	8	[3, 5, 8, 4, 2]	n = 5, i = 0, j = 0, temp = 5, arr[j+1] = 5
9	5	[3, 5, 8, 4, 2]	n = 5, i = 0, j = 1, comparison = 5 > 8
11	5	[3, 5, 8, 4, 2]	n = 5, i = 0, j = 2, comparison = 8 > 4
13	7	[3, 5, 4, 4, 2]	n = 5, i = 0, j = 2, temp = 8, arr[j] = 4
14	8	[3, 5, 4, 8, 2]	n = 5, i = 0, j = 2, temp = 8, arr[j+1] = 8
16	5	[3, 5, 4, 8, 2]	n = 5, i = 0, j = 3, comparison = 8 > 2
18	7	[3, 5, 4, 2, 2]	n = 5, i = 0, j = 3, temp = 8, arr[j] = 2
19	8	[3, 5, 4, 2, 8]	n = 5, i = 0, j = 3, temp = 8, arr[j+1] = 8
22	5	[3, 5, 4, 2, 8]	n = 5, i = 1, j = 0, comparison = 3 > 5
24	5	[3, 5, 4, 2, 8]	n = 5, i = 1, j = 1, comparison = 5 > 4
26	7	[3, 4, 4, 2, 8]	n = 5, i = 1, j = 1, temp = 5, arr[j] = 4
27	8	[3, 4, 5, 2, 8]	n = 5, i = 1, j = 1, temp = 5, arr[j+1] = 5
29	5	[3, 4, 5, 2, 8]	n = 5, i = 1, j = 2, comparison = 5 > 2
31	7	[3, 4, 2, 2, 8]	n = 5, i = 1, j = 2, temp = 5, arr[j] = 2
32	8	[3, 4, 2, 5, 8]	n = 5, i = 1, j = 2, temp = 5, arr[j+1] = 5
35	5	[3, 4, 2, 5, 8]	n = 5, i = 2, j = 0, comparison = 3 > 4
37	5	[3, 4, 2, 5, 8]	n = 5, i = 2, j = 1, comparison = 4 > 2
39	7	[3, 2, 2, 5, 8]	n = 5, i = 2, j = 1, temp = 4, arr[j] = 2
40	8	[3, 2, 4, 5, 8]	n = 5, i = 2, j = 1, temp = 4, arr[j+1] = 4
43	5	[3, 2, 4, 5, 8]	n = 5, i = 3, j = 0, comparison = 3 > 2
45	7	[2, 2, 4, 5, 8]	n = 5, i = 3, j = 0, temp = 3, arr[j] = 2
46	8	[2, 3, 4, 5, 8]	n = 5, i = 3, j = 0, temp = 3, arr[j+1] = 3
47	11	[2, 3, 4, 5, 8]	return value = [2, 3, 4, 5, 8]

Frequently Asked Questions

About Bubble Sort

What is Bubble Sort?

Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted.

What is the time complexity of Bubble Sort?

The time complexity of Bubble Sort is O(n^2) in the average and worst cases, where n is the number of items being sorted. In the best case (if the array is already sorted), it can be O(n) with an optimized implementation.

Is Bubble Sort a stable sorting algorithm?

Yes, Bubble Sort is a stable sorting algorithm. This means that if two elements have the same value, their relative order will be preserved after sorting.

When is it practical to use Bubble Sort?

Due to its simplicity, Bubble Sort is often used as a teaching tool. However, its O(n^2) complexity makes it impractical for most real-world applications, especially for large datasets. It can be useful for small, nearly-sorted lists.

What is the space complexity of Bubble Sort?

The space complexity is O(1) because it is an in-place sorting algorithm, meaning it doesn't require extra memory proportional to the input size.

How can you optimize Bubble Sort?

A common optimization is to introduce a flag that checks if any swaps were made during a pass. If a full pass is completed with no swaps, the array is already sorted, and the algorithm can terminate early. This improves the best-case time complexity to O(n).

Is Bubble Sort an adaptive sorting algorithm?

The standard version is not adaptive, but the optimized version with the flag is. An adaptive algorithm's performance improves if the input is already partially sorted.

What is the difference between Bubble Sort and Selection Sort?

Both have an O(n^2) time complexity, but their swap patterns differ. Bubble Sort performs many swaps, exchanging adjacent elements. Selection Sort finds the minimum element and performs only one swap per pass, making it more efficient in terms of writes to memory.

Can Bubble Sort be implemented recursively?

Yes, Bubble Sort can be implemented recursively. The recursive function would perform one pass of bubbling the largest element to the end and then call itself for the remaining n-1 elements.

Why is it called 'Bubble' Sort?

It's called Bubble Sort because with each pass, the largest unsorted element 'bubbles up' to its correct position at the end of the array, similar to how a bubble rises to the surface of water.

Where can I learn more?

You can find a more detailed explanation on GeeksforGeeks.