An interactive web application for visualizing multiple tree data structures, their operations, and traversal algorithms. Built with React, TypeScript, and modern web technologies to provide an intuitive learning experience for understanding tree data structures.
- 🌳 6 Tree Types: BST, AVL, B-Tree, B+ Tree, Red-Black, and Trie
- ⚡ Full CRUD Operations: Build, Insert, Delete, and Search with animations
- 🎨 Interactive Visualization: Pan, zoom, and explore tree structures
- 🎬 Step-by-Step Playback: Control animation speed and navigate through steps
- 🌓 Dark/Light Theme: Comfortable viewing in any environment
- ⌨️ Keyboard Shortcuts: Command palette and slash menu for power users
- Binary Search Tree (BST) - Basic binary tree with sorted properties
- AVL Tree - Self-balancing binary search tree with height balancing
- B-Tree - Multi-way search tree optimized for disk access
- B+ Tree - Variant of B-tree with all values in leaf nodes and linked leaves
- Red-Black Tree - Self-balancing binary search tree with color properties
- Trie (Prefix Tree) - Tree for efficient string storage and prefix operations
- Build: Construct trees from array input (or words for Trie) with step-by-step animation
- Insert: Add new values/words with animated rebalancing (for AVL and Red-Black trees)
- Delete: Remove values/words with animated tree restructuring
- Search: Visualize the search process through the tree
- Skip Animation: Toggle to perform operations instantly
Animate and visualize the following traversal methods:
- In-order Traversal (Left → Root → Right) - Available for binary trees
- Pre-order Traversal (Root → Left → Right) - Available for binary trees
- Post-order Traversal (Left → Right → Root) - Available for binary trees
- Level-order Traversal (Breadth-First Search) - Available for all trees
- Leaf-order Traversal - Sequential traversal of leaf nodes (B+ Trees only)
- Pan & Zoom: Navigate large trees with mouse drag and zoom controls
- Auto-Layout: Automatic positioning of nodes for optimal visualization
- Real-time Updates: Watch tree structure change as you modify it
- Highlight System: Color-coded highlighting for different operations
- Green for insertions
- Red for deletions
- Blue for searches
- Operation Indicators: Visual display of current value being processed and remaining values
- Command Palette (
Ctrl/Cmd + K): Quick access to all actions - Slash Menu (
/): Context-aware command shortcuts - Step-by-Step Animation: Control playback speed and navigate through traversal steps
- Step Log Panel: Track each step of the traversal with detailed information
- Dark/Light Theme: Toggle between themes for comfortable viewing
- Collapsible Sidebars: Maximize workspace by hiding panels
Basic binary tree where left children are smaller and right children are larger than their parent. Good for learning fundamental tree concepts.
Self-balancing BST that maintains height balance through rotations. Guarantees O(log n) operations by keeping the height difference between subtrees ≤ 1.
Multi-way search tree optimized for systems that read/write large blocks of data. Each node can have multiple keys and children. Configurable minimum degree (t) determines node capacity.
Variant of B-Tree where all values are stored in leaf nodes, and internal nodes only store keys for navigation. Leaf nodes are linked for efficient range queries.
Self-balancing BST where nodes are colored red or black. Maintains balance through color-flipping and rotations, ensuring O(log n) operations with less strict balancing than AVL trees.
Tree structure for storing strings where each path from root to leaf represents a word. Efficient for prefix-based operations like autocomplete.
- Frontend Framework: React 18
- Language: TypeScript
- Build Tool: Vite
- Styling: CSS Modules with CSS Variables
- State Management: Zustand
- Icons: Lucide React
- Routing: React Router
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/yourusername/TreeVisualizer.git
cd TreeVisualizer- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run build
npm run preview- Select a Tree Type: Choose from the home page (BST, AVL, B-Tree, B+ Tree, Red-Black, or Trie)
- Build a Tree:
- For numeric trees: Enter values in array format
[10, 5, 15, 3, 7]or comma-separated10, 5, 15, 3, 7 - For Trie: Enter words comma-separated
cat, dog, car, cart - For B-Trees/B+ Trees: Set minimum degree (t) before building
- For numeric trees: Enter values in array format
- Perform Operations:
- Insert: Add new values/words to the existing tree
- Delete: Remove values/words from the tree
- Search: Find values/words in the tree
- Run Traversals: Choose a traversal algorithm and watch the animation
- Control Playback: Use play/pause/reset controls and adjust playback speed
- View Details: Check the step log panel for detailed operation information
- Skip Animation: Use the checkbox to perform operations instantly
- Pan & Zoom: Drag to pan, use zoom controls to navigate large trees
- Info Modal: Click the info button (i) to learn about each tree type
- Dark/Light Theme: Toggle theme from command palette
Ctrl/Cmd + K- Open command palette/- Open slash menu- Additional shortcuts available in command palette
Build: [50, 30, 70, 20, 40, 60, 80]
Insert: 25, 35
Delete: 30
Search: 60
Build: [10, 20, 30, 40, 50] (Watch automatic rotations!)
Insert: 25
Delete: 10
Minimum Degree: 3
Build: [1, 3, 7, 10, 11, 13, 14, 15, 18, 16, 19, 24, 25, 26, 21, 4, 5, 20, 22, 2, 17, 12, 6]
Insert: 8, 9
Delete: 6
Minimum Degree: 3
Build: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95]
Leaf-order Traversal: See sequential leaf access
Build: [7, 3, 18, 10, 22, 8, 11, 26] (Watch color changes and rotations!)
Insert: 15
Delete: 18
Build: cat, dog, car, cart, door, dogs
Insert: card, dodge
Search: cat, car, ca (ca is a prefix but not a complete word)
Delete: dog
- ✅ Binary Search Trees with full operations
- ✅ AVL Trees with rotation animations
- ✅ B-Trees with configurable minimum degree
- ✅ B+ Trees with leaf-order traversal
- ✅ Red-Black Trees with color properties and rebalancing
- ✅ Trie Trees for prefix/word operations
- ✅ Insert/Delete/Search operations with animations
- ✅ Multiple traversal algorithms
- ✅ Pan & Zoom canvas controls
- ✅ Step-by-step playback controls
- ✅ Dark/Light theme support
- Export tree structures as images or JSON
- Share trees via URL
- Comparison mode (view two trees side-by-side)
- Performance metrics (time/space complexity display)
- More tree types (Splay Trees, Segment Trees, Fenwick Trees)
- Code generation (show implementation code for operations)
- Custom color schemes
- Animation speed presets
- Undo/Redo functionality
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Built with modern web technologies:
- React - UI framework
- TypeScript - Type safety
- Vite - Build tool
- Zustand - State management
- Lucide React - Icons
- React Router - Routing
For questions, suggestions, or feedback, please open an issue on GitHub.