An interactive web app that animates the core Binary Search Tree (BST) operations — Insert, Search, and Delete — step by step, so you can see exactly how the algorithm walks the tree, compares nodes, and restructures itself. Each operation is paired with reference implementations in five programming languages.
Built with React 19, Vite, Tailwind CSS, and GSAP animations.
A Data Structures & Algorithms course project.
- Step-by-step animation of the three fundamental BST operations:
- Insert — recursive descent to find the correct leaf position
- Search — O(log n) average-case lookup with a highlighted comparison path
- Delete — handles all three cases (leaf, one child, two children) using the in-order successor
- Playback controls — play, pause, step forward/back, skip to end, and reset
- Preset trees to start from — Simple, Basic, Balanced, and Right-Skewed (worst case), plus an Empty tree to build from scratch
- Color-coded node states — comparing, visited path, found, target, newly inserted, removed, and "reached NULL"
- Reference code for every operation in C, C++, Java, Python, and JavaScript, with a one-click copy button
- Light / dark mode and a responsive, animated UI
- Fullscreen mode for presentations and lectures
| Operation | Idea | Average | Worst |
|---|---|---|---|
| Search | Compare with the current node; go left if smaller, right if larger. | O(log n) | O(n) |
| Insert | Search for the value's position, then attach it as a new leaf. | O(log n) | O(n) |
| Delete | Remove the node; if it has two children, replace it with its in-order successor. | O(log n) | O(n) |
The worst case (O(n)) happens on a skewed tree — try the "Skewed (right)" preset to watch search degrade into a linear scan.
- React 19 — UI framework
- Vite — build tool & dev server
- Tailwind CSS — styling
- GSAP & Motion — animations
- Lucide — icons
- OGL — WebGL background effects
- Node.js 18 or newer
- npm (comes with Node.js)
# Clone the repository
git clone https://github.com/CODEIFIE/bst-visualizer.git
cd bst-visualizer
# Install dependencies
npm install
# Start the development server
npm run devThen open the URL shown in the terminal (usually http://localhost:5173).
| Command | Description |
|---|---|
npm run dev |
Start the development server with hot reload |
npm run build |
Build the app for production (output in dist/) |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint |
- Pick a starting tree from the presets (or start with an empty tree).
- Choose an operation — Insert, Search, or Delete — and enter a value.
- Run it and use the playback controls to step through the animation at your own pace.
- Read the message panel to follow what the algorithm is doing at each step.
- Switch languages in the code panel to see the same operation implemented in C, C++, Java, Python, or JavaScript.
bst-visualizer/
├── public/ # Static assets (icons, favicon)
├── src/
│ ├── BSTVisualizer.jsx # Main component: BST logic, step generators & animation
│ ├── App.jsx # Root app component
│ ├── main.jsx # Entry point
│ ├── components/ # Reusable UI & animation components
│ ├── lib/ # Utility helpers
│ └── index.css # Global styles
├── index.html
├── vite.config.js
└── package.json
The BST algorithms live in src/BSTVisualizer.jsx. Each operation is implemented as a step generator (generateInsertSteps, generateSearchSteps, generateDeleteSteps) that records a snapshot of the tree at every stage, which the UI then plays back frame by frame.
| Name | Roll Number |
|---|---|
| Muhammad Afnan | G1F24UBSCS070 |
| Khurram Malik | G1F24UBSCS079 |
| Fraz Ali Ghumman | G1F24UBSCS091 |
This project is released under the MIT License.