Algorithm visualization web app for learners. Step through algorithms with synchronized code highlighting, animated visualizations, and educational content.
- Multi-Category Algorithm Library with interactive visualizations (bar charts, SVG graphs/trees, CSS grids, DP tables, and more)
- Multi-Language Code Display: TypeScript, Python, Java, Rust, C++, and Go with synchronized line highlighting via Monaco Editor
- Step-by-Step Playback: Play, pause, step forward/backward, scrub, adjustable speed (0.25x–4x)
- Category-Specific Input Editors: Editable arrays, targets, grids, text patterns, and matrices
- Educational Content: Slide-over drawer with overview, complexity analysis, real-world uses, and trade-offs
- Responsive Layout: 3-panel resizable layout on desktop; 2-panel tablet layout; tab-based switcher on mobile
- Theme Support: Light/dark/system theme toggle with persistent preference storage
- Accessibility: WCAG 2.1 AA — focus traps, ARIA roles, reduced-motion support across all visualizers
Algorithms span Sorting, Searching, Graph, Pathfinding, Dynamic Programming, Arrays, Trees, Linked Lists, Heaps, Stacks & Queues, Hash Maps, Strings, Matrices, and Sets — each with multiple technique subcategories.
See the Algorithm Catalog for the full listing with visualizer descriptions and technique subcategories.
Note
Requires Node 22. Use nvm use if you have nvm installed — the repo includes an .nvmrc.
npm install
npm run devOpen http://localhost:5173 in your browser.
AlgoFlow uses a registry-driven architecture with pre-computed execution steps. Algorithms self-register, trackers build ExecutionStep[] arrays, and a discriminated union on VisualState.kind dispatches to generic visualizer components.
See docs/architecture.md for tech stack, data flow diagrams, state management, and project structure.
| If you want to... | Document Target |
|---|---|
| Start contributing | New Developer Onboarding |
| Look up a term or concept | Glossary |
| Understand the system architecture | Architecture Overview |
| Understand the repository layouts | Root Files Guide |
| Add an algorithm or language | Contributing Guide |
| Write or run tests | Testing |
| Deploy via Docker or CI/CD | Deployment |
| Debug step-generation crashes | Debugging |
| Work on UI layout or styling | Design System |
| Write algorithm learning modules | Educational Content Guide |
| Browse all algorithms | Algorithm Catalog |
| Understand dev hooks & plugins | Development System |
[!TIP] > First-time contributors: Start at the New Developer Onboarding Guide. It dictates the hard boundary between the UI logic and the engine.
Important
All input edits are temporary and non-persistent. Edits reset on algorithm switch or page reload. No localStorage, URL state, or server persistence.
See Input Editors for per-category editor types and pathfinding grid editing details.
| Key | Action |
|---|---|
| Space | Play / Pause |
| Left Arrow | Step backward |
| Right Arrow | Step forward |
| R | Reset to step 0 |
| 1–5 | Set speed (0.25x–4x) |
| Escape | Close drawers |
| L | Toggle educational drawer |
Tip
The Docker test image has all 6 language toolchains pre-installed. Only Docker is needed on your machine.
npm run docker:test:build # Build once (cached after first build)
npm run docker:test # Run ALL test suites (TypeScript + 5 languages)
npm run docker:test:python # Run a single languagenpm run test # TypeScript unit tests (Vitest)
npm run test:all-languages # All 5 language suites sequentially
npm run test:python # Individual language suiteSee Testing for full commands, sharding, coverage, and Deployment for Docker and CI/CD details.
Pre-commit quality gates, git branch protection, and accessibility scanners run automatically. See the Development System Guide for the full reference.