Stepwise is an interactive algorithm visualizer for learning Data Structures and Algorithms through step-by-step animations, synced Python and C++ code, variable state, and plain-English explanations.
Stepwise helps students and self-learners see how algorithms actually move through data. Pick an algorithm, press play, step forward or backward, and watch the visualization, Python/C++ code highlight, variables, and explanation update together.
Stepwise currently includes 45+ algorithms and DSA concepts across core learning categories.
| Category | Algorithms / Concepts |
|---|---|
| Concepts | Big O Notation, Worst-case Analysis, Recursion, Two Pointers, Sliding Window, Space Complexity, Memoization, Greedy vs DP |
| Data Structures | Stack, Queue, Linked List, Hash Table, Binary Search Tree, Heap, Union-Find / Disjoint Sets, Red-Black Tree |
| Sorting | Bubble Sort, Selection Sort, Insertion Sort, Quick Sort, Merge Sort, Heap Sort, Counting Sort, Radix Sort, Shell Sort, Bucket Sort |
| Searching | Binary Search, Linear Search, Jump Search, Interpolation Search, Quickselect / Median Finding |
| Graphs | Breadth-First Search, Depth-First Search, Dijkstra, Prim, Kruskal's MST, Topological Sort |
| Dynamic Programming | Fibonacci DP, Knapsack 0/1, Longest Common Subsequence |
| Backtracking | N-Queens Problem, Sudoku Solver, Maze Pathfinding |
| Divide and Conquer | Tower of Hanoi |
| Math | Sieve of Eratosthenes |
Requirements:
- Node.js
>=22.12.0 - pnpm
Install dependencies:
pnpm installStart the development server:
pnpm run devBuild for production:
pnpm run buildPreview the production build:
pnpm run previewThis repository includes a GitHub Actions workflow at .github/workflows/deploy.yml.
On pull requests and pushes to main, the workflow:
- Installs dependencies with pnpm
- Builds the Astro site
- Uploads the
distartifact - Deploys to GitHub Pages on pushes to
main
In GitHub, enable Pages with Settings → Pages → Build and deployment → Source: GitHub Actions.
Open an issue on GitHub with:
- What you expected to happen
- What actually happened
- Steps to reproduce, if it is a bug
- The algorithm or concept you want added, if it is a request
This project was inspired by my Data Structures and Algorithms class and my technical interview preparation. While learning topics like sorting, searching, recursion, trees, graphs, and dynamic programming, I realized that reading code alone is not always enough to fully understand how an algorithm works. Many times, the difficult part is not the syntax, but seeing how the data changes at each step and why the algorithm makes certain decisions. I wanted to build something that makes DSA concepts easier to follow by connecting the code, visual steps, variable changes, and explanation together in one place. The goal is to help students and interview candidates understand algorithms, practice with confidence, and build stronger problem-solving skills.
Built by Sai Rithwik Kukunuri :) Consider leaving a 🌟 if this adds value, and all feedback is very welcome. Feel free to message me on LinkedIn.