Trace each move
Run code in a focused sandbox and move through every useful state at your own pace.
Practice algorithms visually
DSA Lab
A code visualizer for understanding what an algorithm is doing, one state at a time.
Built for interview practice
Make the invisible parts of code visible.
See the structures
Arrays, hash maps, windows, stacks, queues, graphs, and recursive call stacks stay visible.
Use your own code
Paste JavaScript or TypeScript, add JSON input, and get an inferred trace without writing custom visualization code.
Keep a practice library
Sign in to save named solutions by topic, then return to them whenever you want to practice.
See it in action
A trace, one step at a time.
Five live demos, one per family — sorting, searching, trees, hashing, and recursion. Each one plays the real visualizer: bubble sort swaps values into place, binary search narrows its window, Invert Binary Tree mirrors a tree, Two Sum builds a hash map, and fibonacci grows and unwinds its recursive call stack.
Step 1 / 17
1const arr = [...input.array];
2
3for (let i = 0; i < arr.length - 1; i++) {
4 for (let j = 0; j < arr.length - i - 1; j++) {
5 if (arr[j] > arr[j + 1]) {
6 [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
7 }
8 }
9}
10
11return arr;
50
31
82
13
24
Copy the input array
Step 1 / 7
1function binarySearch(arr, target) {
2 let lo = 0, hi = arr.length - 1;
3 while (lo <= hi) {
4 const mid = Math.floor((lo + hi) / 2);
5 if (arr[mid] === target) return mid;
6 if (arr[mid] < target) lo = mid + 1;
7 else hi = mid - 1;
8 }
9 return -1;
10}
11
12return binarySearch([1, 3, 5, 7, 9, 11, 13], 9);
10
31
52
73
94
115
136
lo 0hi 6
lo = 0, hi = 6 — the search space is the whole array
Step 1 / 6
1function invertTree(root) {
2 if (!root) return null;
3 [root.left, root.right] = [root.right, root.left];
4 invertTree(root.left);
5 invertTree(root.right);
6 return root;
7}
8
9return invertTree(tree);
Start at the root — invertTree(4)
Step 1 / 7
1function twoSum(nums, target) {
2 const seen = new Map();
3 for (let i = 0; i < nums.length; i++) {
4 const complement = target - nums[i];
5 if (seen.has(complement)) return [seen.get(complement), i];
6 seen.set(nums[i], i);
7 }
8 return [];
9}
10
11return twoSum([2, 7, 11, 15], 9);
20
71
112
153
seen map
— empty —
seen = {} — no numbers remembered yet
Step 1 / 43
1function fib(n) {
2 if (n <= 1) return n;
3 return fib(n - 1) + fib(n - 2);
4}
5
6return fib(5);
Recursive call stack
— empty —
Start the trace: call fib(5)
From pasted code to a useful explanation.
- 01
Paste an algorithm and provide JSON input.
- 02
Run the trace to infer changes in variables and data structures.
- 03
Step forward, back, or play the animation while the active line stays in focus.
Built to help you learn
DSA Lab exists for one reason: to help students and learners actually understand algorithms — by watching every step, not just memorizing the answer. It's free, and it's made with that goal in mind.
One honest note: visualizations are generated from real code traces, and we check them against known answers — but no tool is perfect. If a step ever looks wrong or confusing, it probably is. Tell us and we'll fix it.