A Next-Generation, Zero-Cost Algorithm Visualizer running entirely Client-Side in your browser. Built with React, Vite, Tailwind CSS, and Pyodide (WebAssembly).
Instead of relying on backend servers to execute and trace Python code, this application utilizes WebAssembly to run Python directly in the browser. It provides a real-time, interactive environment to trace algorithms step-by-step, featuring dynamic data structure detection and a professional dark-mode design system.
- Zero-Cost & Serverless: Python code is executed entirely in the user's browser using Pyodide, eliminating the need for a backend execution server.
- Local-First Runtime: Pyodide is bundled with the production build and automatically falls back to jsDelivr when local assets are unavailable.
- Hugging Face Dark Mode UI: A professional, sleek, and developer-friendly dark theme inspired by modern AI playgrounds.
- Auto-Detects Data Structures:
- Graphs & Trees: Automatically tracks and renders Python custom classes (e.g.
NodeorTreeNode) into a visual Directed Graph using React Flow & Dagre. - 2D Grids: Converts arrays of arrays into interactive matrices, optimized for Dynamic Programming & Backtracking.
- Numeric Arrays: Instantly translates lists into animated Bar Charts or Block Arrays.
- Graphs & Trees: Automatically tracks and renders Python custom classes (e.g.
- Call Stack & Recursion Tree: Automatically tracks nested recursive calls and visually maps the execution tree step-by-step.
- Time Travel Execution: Features Play, Pause, Step Forward/Back, Skip to Start/End controls with controllable execution speed.
- Keyboard Shortcuts: Full keyboard control for playback —
Spaceplay/pause,← →step,Ctrl+Enterrun. - Share via URL: Click the Share button to generate a shareable link that encodes the current code in the URL hash — no backend required.
- Active Pointer Highlighting: Common index variables such as
i,j,left,right, andmidare highlighted directly on arrays. - Resizable Workspace: The desktop editor/visualizer split can be dragged, resized from the keyboard, and is remembered between visits.
- Execution Safeguard: Enforces a hard limit of 2,000 steps to protect the browser from crashing due to infinite loops.
| Category | Algorithms |
|---|---|
| Sorting | Bubble Sort, Insertion Sort, Selection Sort, Quick Sort, Merge Sort |
| Searching | Linear Search, Binary Search (Iterative & Recursive) |
| Recursion | Factorial, Fibonacci, Tower of Hanoi |
| Data Structures | Stack, Linked List, Binary Tree (In-order, Pre-order, Post-order) |
| Expert / DP | DP Fibonacci, N-Queens, Graph BFS, Graph DFS, UCS, Dijkstra |
- Frontend: React, TypeScript, Vite, Tailwind CSS
- Code Editor: Monaco Editor (
@monaco-editor/react) - Visualizer Engine: React Flow (
reactflow), Framer Motion, Dagre - Execution Engine: Pyodide (Python compiled to WebAssembly)
- Quality: Vitest, Python
unittest, Oxlint, and GitHub Actions
- Node.js v18+
- npm or yarn
1. Clone the repository:
git clone https://github.com/LaboNapitupulu/algo-visualizer.git
cd algo-visualizer2. Install dependencies:
npm install3. Run the development server:
npm run dev4. Build for production:
npm run buildnpm run check
python tests/test_tracer.pynpm run check runs linting, TypeScript/Vite production build validation, and the Vitest suite. The Python suite directly validates tracing, error locations, circular structures, pointer capture, and infinite-loop protection.
This project is licensed under the MIT License.