An interactive, step-by-step visualizer for B-Trees and B+ Trees
Build, inspect, and replay every structural change that happens during insert, delete, and search operations one step at a time.
B+ Tree insert operation
B+ Tree search operation
B+ Tree Delete operation
No installation needed — open the link above and start building trees in the browser.
| Category | Details |
|---|---|
| 🌲 Two tree structures | Switch between B-Tree and B+ Tree modes |
| ⚙️ Configurable degree | Choose t = 2, t = 3, or t = 4 to control max keys per node |
| Every insert/delete/search is broken into discrete, replayable steps | |
| 📖 Live algorithm reference | Side panel shows pseudocode with the active line highlighted per step |
| 🎨 Rich visual states | Color-coded nodes/cells for visits, splits, inserts, deletes, merges, borrows, and predecessor/successor swaps |
| 🖱️ Interactive canvas | Pan by dragging, zoom via wheel/buttons, fit-to-screen, fullscreen toggle |
| 📊 Live tree stats | Total keys, tree height, minimum degree, and max keys per node |
| 🎲 Random data generator | Populate the tree with random values in one click |
| 🔗 B+ leaf links | Sibling leaves are connected to visualize the ordered leaf layer |
- Node.js
>= 18.18 - npm / yarn / pnpm
git clone https://github.com/parthadevs/indextree.git
cd indextree
npm installnpm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 in your browser. Changes hot-reload automatically.
- Pick a structure — use the Structure dropdown in the header to choose B-Tree or B+ Tree.
- Set the minimum degree — use the Minimum degree dropdown to set
t. - Insert a value — type a number in the Insert value field and click Insert.
- Search or delete — use the Search value or Delete value fields.
- Populate randomly — choose a count and click Random Data.
- Replay an operation — use the player controls (previous / play-pause / next) and the speed slider to watch the tree transform step by step.
- Explore the canvas — drag to pan, scroll to zoom, or use the floating controls (zoom in/out, reset view, fit tree, fullscreen).
indextree/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main visualizer component
│ └── globals.css # Global styles
├── public/
│ └── screenshots/ # screenshots / GIFs
├── next.config.ts
├── postcss.config.mjs # Tailwind CSS configuration
├── tsconfig.json
├── eslint.config.mjs
├── package.json
└── README.md
All tree logic, step generation, SVG rendering, and UI currently live in
app/page.tsx.
| Operation | Behavior |
|---|---|
| Insert | Descends from the root to a leaf, splitting any full node along the way. If the root is full, a new root is created and tree height increases by one. |
| Delete | Finds the key, removes it from a leaf, or replaces it with its predecessor/successor when found in an internal node. Underflow is repaired by borrowing from a sibling or merging nodes. |
| Search | Walks from the root, comparing the key against each node's keys and following the matching child until found or a leaf is reached. |
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS 4
Build and run in production mode:
npm run build
npm run startOr deploy instantly with Vercel:
See the Next.js deployment docs for other hosting options.
Contributions, issues, and feature requests are welcome!
- Fork the repo
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Made with ❤️ using Next.js & TypeScript