Skip to content
All workTing Tang
DSA VisualizerOpen

Interactive visualization · education · Open source · MIT · live on Vercel · 2026

Press play and read the line that’s running.

54 data structures and algorithms, animated step by step, with the running line highlighted in C, Python or JavaScript.

Bubble Sort

Sorting
37
0
21
1
46
2
43
3
12
4
88
5
64
6
29
7
71
8
55
9
18
10
80
11
Step 1 / 142

Starting bubble sort: compare neighbours, swap them if they are out of order.

  • Unsorted
  • Comparing
  • Swapping
  • Sorted
Implementation
function bubbleSort(arr) {    const 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]) {                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];            }        }    }    return arr;}
Time
O(n) · O(n²) · O(n²)
Space
O(1)
54
Visualizationsacross 6 categories
21
Renderersshared by type
162
ImplementationsC, Python and JavaScript for each
32
Detail write-upsper-algorithm guides

Catalogue

54 entries, 21 renderers.

Adding an algorithm means one step generator and one registry entry; playback, code panel and controls come free.

Sorting

15

1 renderer

  • Bubble
  • Selection
  • Insertion
  • Merge
  • Quick
  • Heap
  • Shell
  • Counting
  • Radix
  • Bucket
  • Cocktail Shaker
  • Comb
  • Gnome
  • Pancake
  • Cycle

Data Structures

11

7 renderers

  • Array
  • Linked List
  • Stack
  • Queue
  • Deque
  • Circular Queue
  • Priority Queue
  • Hash Table
  • Heap
  • Skip List
  • Union-Find

Algorithms

11

8 renderers

  • Recursion
  • Hash Algorithm
  • Greedy
  • Divide & Conquer
  • Backtracking
  • Dynamic Programming
  • String Matching
  • KMP
  • Rabin-Karp
  • Sliding Window
  • Two Pointers

Graph

8

3 renderers

  • BFS
  • DFS
  • Graph
  • Dijkstra
  • Bellman-Ford
  • Kruskal MST
  • Prim's MST
  • Topological Sort

Searching

7

1 renderer

  • Linear
  • Binary
  • Jump
  • Interpolation
  • Exponential
  • Ternary
  • Fibonacci

Tree

2

2 renderers

  • Binary Search Tree
  • Trie

How it works

Record once, then replay the frames

Pick an algorithm, press play, and watch bars swap and nodes relax while the line doing the work lights up beside it.

Each algorithm runs once up front and records frames — state, highlights, a sentence, and a line number per language. Playback just moves an index, so stepping back is as cheap as forward.

  • Step-by-step playback

    Play, pause, step, scrub or change speed — with keyboard shortcuts.

  • Code that follows along

    Switch language mid-run and the highlight stays on the same step.

  • A sentence per step

    Each frame explains itself in an aria-live region, so it is read aloud too.

  • Fresh inputs

    New arrays, coin targets or board sizes, where the algorithm has something to vary.

  • Complexity guide

    Big-O rules, a growth-rate table and per-algorithm write-ups.

Fig. 1

From a registry entry to a highlighted line

A pick or fresh input (dashed) runs the generator once. After that, timer, buttons and keys only move one integer.

Fig. 2

One frame, as bubble sort records it

steps.push({array: [21, 37, 43, 46, 12, 88, …], // a copy — later swaps must not reach backhighlights: { 3: 'swapping', 4: 'swapping' },description: '46 > 12 → swapping arr[3] and arr[4]',codeLines: { c: 5, python: 6, javascript: 6 }, // the same step, on each language's own line})

Recorded just before a swap; each panel reads its own field.

Fig. 3

The stack, layer by layer

L01RegistryThe single list of what existsRenderer type, complexity and source in three languagesFeeds the sidebar, complexity table and detail pagesL02Step generatorsThe algorithm, with a recorder attachedPure functions that snapshot each compare, swap or matchA shared helper adds persistent highlightsL03PlayerOne integer and a timerSteps computed once per inputTyping in inputs never scrubs the timelineL04RenderersPure functions of one frame21 types shared across 54 entriesCSS transitions, not keyframesLazy-loaded per type

Each band owns what sits inside it; arrows run in the direction work travels.

Fig. 4

One run, from the sidebar to the highlighted line

1SelectPick from the sidebar.2RecordRun once, keep every frame.3PlayMove the frame index.4RenderDraw the frame, highlight its line.

One unit of work, from entry to the point someone reads the result.

53 more algorithms in the app.SourceOpen the app