AlgoViz Studio is an interactive tool (or library / web app / desktop app—choose correct) for visualizing algorithms and data structures in an intuitive, educational way. It aims to help learners, educators, and developers explore the step-by-step behavior of common algorithms.
Check it out youself at : https://algoviz-studio.lovable.app/ !
- Visualizations for sorting algorithms (e.g. QuickSort, MergeSort, BubbleSort, etc.)
- Graph algorithms (e.g. BFS, DFS, Dijkstra, A*, etc.)
- Tree / heap / data structure visualizations (binary tree, heap, red-black tree, etc.)
- Step-by-step playback with controls: play, pause, step forward, step backward
- Custom input (add your own data) and real-time rendering
- Dark / light theme support
- Modular architecture to add new algorithms easily
| Component | Technology / Tools |
|---|---|
| Frontend / UI | (React, Vue, Typescript + Canvas / SVG) |
| Backend / Engine) | Node.js |
| Visualization / Graphics | D3.js, Canvas, SVG, or custom rendering |
| State management | (e.g. Redux, Context API, custom) |
| Build / Tooling | Webpack, Vite, |
| Deployment | Lovable |
- Node.js (v14+ recommended)
- npm or yarn
- (Other requirements, e.g. Python, etc.)
# Clone the repository
git clone https://github.com/MuhammadAhmadF2005/algoviz-studio.git
cd algoviz-studio
# Install dependencies
npm install
# or
yarn install
# Start in development mode
npm run dev
# or
yarn dev
# Build for production
npm run build
# or
yarn build
# Run tests (if any)
npm run test