Sort Algorithms

Interactive visualizations of 25 sorting algorithms — animated bar charts, step-by-step pseudocode, and Big-O complexity info for every algorithm.

sortalgorithms.com

Algorithms

Simple — O(n²)

Bubble Sort · Selection Sort · Insertion Sort · Cocktail Shaker Sort · Cycle Sort

Efficient — O(n log n)

Merge Sort · Quick Sort · Heap Sort

Hybrid / Adaptive

Comb Sort · Intro Sort · Shell Sort · Tim Sort

Distribution / Non-comparison

Tree Sort · Counting Sort · Radix Sort · Bucket Sort

Novelty

Bogo Sort · Gnome Sort · Stooge Sort · Pancake Sort · Sleep Sort · Stalin Sort · Slow Sort · Miracle Sort · Quantum Bogosort

Features

• Animated bar-chart visualizations with colour-coded states (comparing, swapping, sorted, pivot)
• Step-by-step pseudocode highlighting synced to the animation
• Big-O complexity table for every algorithm (best / average / worst + space)
• Speed and array-size controls, step-forward / step-backward
• Sound mode — hear the comparisons
• Dark and light themes
• Responsive layout with collapsible algorithm menu on mobile
• Cloudflare Workers deployment (Git integration, static assets)

Stack

• React 19 + Vite 8 + TypeScript (strict)
• motion/react v12 — all animations
• Tailwind CSS v4 + shadcn/ui — styling
• Vitest 4 — unit tests · Playwright — E2E
• Cloudflare Workers — deploy (Builds with Git integration, static assets)

Local development

npm install
npm run dev          # Vite dev server → http://localhost:5173
npm run dev:edge     # Local Workers runtime via wrangler

Commands

Command	Description
npm run dev	Vite dev server
npm run build	Production build → dist/
npm run typecheck	TypeScript check (no emit)
npm run lint	Biome check (lint + format, zero tolerance)
npm run test	Vitest watch mode
npm run test:run	Vitest single pass
npm run ci	typecheck + lint + test:run + build
npm run dev:edge	Local Workers runtime (wrangler dev)

Architecture

src/
  algorithms/   Pure generator functions — no React, no side effects
  hooks/        useAlgorithmPlayer — bridges generators to React state
  components/   UI components, each with a co-located .test.tsx
  constants/    Algorithm registry (metadata, pseudocode, groups)
  pages/        Route-level components (Home, Visualizer)
  types/        Shared TypeScript types
public/
  _headers      Cloudflare Workers security headers
index.html      Vite entry point → dist/index.html (SPA fallback via
                wrangler.jsonc assets.not_found_handling)

Each algorithm file exports two things:

• *Steps(arr: ArrayEntry[]): Generator<Step> — yields animated steps for the visualizer
• *Sort(arr: number[]): number[] — pure sort for testing

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repo and create a feature branch from main
2. Run npm run ci before opening a PR — it must pass with 0 warnings
3. Keep PRs focused — one feature or fix per PR

Adding a new algorithm

A new sorting algorithm needs four things:

1. Generator file — src/algorithms/<name>.ts exporting *<Name>Steps() and *<Name>Sort()
2. Test file — src/algorithms/<name>.test.ts covering sorted output, step types, and edge cases
3. Pseudocode entry — add to src/constants/pseudocode.ts
4. Constants entry — add metadata to src/constants/algorithms.ts (name, group, complexity, description)

Adding a new component

• Place it in src/components/<ComponentName>/
• Include a co-located <ComponentName>.test.tsx
• Use named exports (not default)
• All animations via motion/react, all colours via CSS custom properties

Code style

• TypeScript strict mode — no any, no unused variables
• Biome (lint + format) — run npm run lint to check, npm run lint:fix to fix
• Algorithm generators must be pure — no mutation of input, no global state, no React imports

License

MIT