Overview

AlgorithmVisualizer is an open-source web app that animates more than 30 algorithms step by step, built to make learning them easier and more engaging. It started as a React project and was migrated to Next.js with shadcn/ui in its v2.0.0 release in December 2024.

The app is split into segments covering pathfinding, graph traversal, shortest paths, minimum spanning trees, connectivity, network flow, prime numbers, sorting, N-Queen, convex hull, binary search, binary search trees, recursion trees, Turing machines, Game of Life and linked lists. Graph segments share a reusable workspace built on React Flow, and the tree visualizers use a reusable SVG tree component.

Features

Pathfinding: DFS, BFS, Dijkstra and A* on a grid, plus recursive maze creation.
Graph algorithms: Bellman-Ford, Kruskal, Prim, Tarjan's strongly connected components, Edmonds-Karp, Ford-Fulkerson and min cut.
Sorting: Bubble, selection, insertion, heap, merge and quick sort with Flip Move animations.
Data structures: Singly and doubly linked lists with staged insert and delete, and a binary search tree with animated re-layout.
Recursion trees: Fibonacci, binomial coefficient, derangement, fast exponentiation and Stirling numbers.
Math and theory: Sieve of Eratosthenes, an Archimedes prime spiral, N-Queen backtracking, Graham scan and Turing machine programs.

Tech stack

Next.js, React, shadcn/ui
React Flow

Getting started

npm i
npm run dev