See data structures and algorithms work, one step at a time.
Press play, watch the bars move, follow the highlighted pseudocode and the live loop variables. Free, no sign-up, runs in your browser.

▶ Open the live demo

If this helps you learn or teach, a ⭐ helps other students find it.

What's inside

Tool	What you can do	Try it
Big-O Playground	Start from zero: a short story, count steps together with the computer, then watch O(1) … O(2ⁿ) curves pull apart on a live chart	Open
Sorting Visualizer	Compare Bubble, Selection and Insertion sort, then step through each on its own page. Your list travels with you when you switch	Overview · Bubble · Selection · Insertion
2D Array Visualizer	Paste any 2D array or matrix and see it as a grid. Colour cells by value, show row and column indices, mix numbers, strings, booleans and null	Open

Every sorting page has:

• Play / pause / step / scrub controls and a 0.5×–4× speed dial (plus Space and ← / →)
• Synchronized pseudocode: the active line highlights as it runs
• Live variables on the board: pointer markers (i, j, min) under the bars and value chips (key, swapped)
• A plain-English narration line and live comparison / swap / write counters
• Presets (random, reversed, nearly sorted, few unique, sorted), a size slider, shuffle and custom input
• A written explainer with a worked example, common beginner mistakes and an FAQ
• Code in C++, Python, JavaScript and TypeScript

Light and dark themes, works on a 320 px phone, and honours prefers-reduced-motion.

Why it's built this way

• One tiny step-trace engine, no chart or animation library. An algorithm is a plain function that records a list of snapshots. One usePlayer hook plays, pauses, steps and scrubs through that list, and shared components draw it. The bars are divs.
• Pure by construction. The strict React Compiler lint rules are on (no setState in effects, no ref writes or impure calls during render), and CI runs lint, tests and a production build on every pull request.
• Tested logic. The sorting engine, both input parsers and the page catalog are covered with node:test, with zero test dependencies.
• Fast and accessible. Statically generated pages; Lighthouse (mobile) scores 94–95 performance, 100 accessibility and 100 SEO on the tool pages.

Step = {
  array,        // the working array at this moment
  highlights,   // which bars are comparing / swapping / sorted …
  pointers,     // index variables (i, j, min) drawn under the bars
  vars,         // scalar variables (key, swapped) shown as chips
  line,         // the active pseudocode line
  message,      // the narration text
  stats,        // cumulative { comparisons, swaps, writes }
}

Quick start

git clone https://github.com/salsadsid/visualizer.git
cd visualizer
npm install
npm run dev        # http://localhost:3000

npm run lint       # ESLint, including the strict React hooks rules
npm test           # node:test, no extra dependencies
npm run build      # production build

Needs Node 22 or newer (the test script uses node --test with a glob). There is no backend, database or API key. Analytics only load when NEXT_PUBLIC_GA_ID is set (see .env.example).

Add an algorithm

A new sort is a plain function in src/lib/algorithms/sorting.js that mutates a copy of the array and records a step whenever something worth showing happens:

function mySort(values) {
    const a = values.slice();
    const r = makeRecorder(a);

    r.pointers.j = 0;
    r.stats.comparisons++;
    r.push(3, `Compare ${a[0]} and ${a[1]}.`, { 0: "compare", 1: "compare" });

    [a[0], a[1]] = [a[1], a[0]];
    r.stats.swaps++;
    r.push(4, "Swapped them.", { 0: "swap", 1: "swap" });

    r.lockAll();
    r.push(6, "Sorted!");
    return { steps: r.steps };
}

The player, bars, pseudocode highlighting, counters and keyboard shortcuts come for free. CONTRIBUTING.md has the full checklist, the project structure and the lint rules that trip people up. Looking for somewhere to start? Try the good first issues.

Roadmap

Next up: counting sort and frequency arrays, then merge sort, quick sort, binary search and the core array techniques (prefix sums, two pointers, sliding window). The full list lives on the roadmap page. Want something sooner? Open an issue.

The story so far

I built this while learning DSA myself, because the tools I found either animated too fast to follow or hid the code. Some things I'm happy with:

• The 2D Array Visualizer ranks #1 on Google for "2d array visualizer" (Search Console, September 2026) and has been used by visitors in seven countries.
• Every algorithm plugs into the same zero-dependency step-trace engine, so a new visualizer is mostly writing the algorithm and explaining it well.
• Each release is measured: a private checklist crawls every page for metadata, structured data and phone-width overflow before it ships.

Tech stack

Layer	Tools
Framework	Next.js 16 (App Router) · React 19
Styling	Tailwind CSS 4 · CSS variables for theming
Fonts	Geist Sans + Geist Mono via next/font
Utilities	clsx, tailwind-merge
Linting	ESLint 9 (eslint-config-next)

No backend, no database — it runs entirely in the browser.

License

MIT. Fork it, learn from it, use it in your class.

---

Built by Salman Sadik Siddiquee · Live site · Report a problem