Interactive sorting algorithm visualizer built with React and Vite.
Watch classic sorting algorithms run step by step with animated bars, adjustable speed/size, and live pseudo-code display. Useful for learning how each algorithm moves data.
| Algorithm | Visual behavior |
|---|---|
| Selection Sort | Finds minimum from unsorted region and swaps |
| Bubble Sort | Adjacent comparisons and swaps |
| Insertion Sort | Inserts each element into sorted prefix |
| Merge Sort | Divide-and-conquer with merge steps |
| Quick Sort | Partition around pivot recursively |
- Adjustable array size and animation speed
- Color themes for active / comparing / sorted bars
- Algorithm descriptions in the UI
- Syntax-highlighted pseudo-code panel
- Responsive React + Bootstrap layout
- React 18 + Vite
- React Bootstrap for layout/components
- react-syntax-highlighter for code display
- Custom sorting implementations in
src/Algorithm/
git clone https://github.com/Znaxh/Algo-Visualizer.git
cd Algo-Visualizer
npm install
npm run devOpen the URL printed by Vite (usually http://localhost:5173).
npm run build
npm run previewAlgo-Visualizer/
├── src/
│ ├── Algorithm/
│ │ └── sortingAlgorithms.js
│ ├── SortingVisualizer/
│ │ ├── SortingVisualizer.jsx
│ │ ├── Pile/ # bar rendering
│ │ └── CodeDisplay/ # pseudo-code panel
│ ├── App.jsx
│ └── Visualizer.jsx
├── public/
└── vite.config.js
https://imagine-algo.netlify.app/
Anurag Pratap Singh · GitHub
Open source — use with attribution.