An interactive visualization tool for the classic Word Ladder problem, demonstrating how Breadth-First Search (BFS) finds all shortest transformation sequences between two words.
🔗 Live Demo: https://froredion.github.io/World-Ladder-II-Visualizer-Leetcode/
The Word Ladder problem (LeetCode 126) asks: Given two words and a dictionary, find all shortest transformation sequences from the beginning word to the end word, where each intermediate word must be in the dictionary and differ by exactly one letter.
This visualizer shows step-by-step how layered BFS explores the word graph and how backtracking reconstructs all shortest paths.
- Interactive Visualization: Watch BFS expand level-by-level through the word graph
- Playback Controls: Play, pause, step forward/backward, and adjust animation speed
- Multiple Examples: Pre-loaded examples demonstrating various scenarios
- Path Highlighting: See all shortest paths highlighted once the target is found
- Real-time Editing: Modify begin word, end word, and word list on the fly
- Detailed Insights: View visited nodes, parent relationships, and frontier at each step
- Choose an Example: Click on any pre-loaded example to see different word ladder scenarios
- Custom Input: Enter your own begin word, end word, and word list
- Visualize: Use playback controls to step through the BFS algorithm
- Analyze: View the layered graph, visited nodes, and parent relationships
- Classic (hit → cog): The famous LeetCode example with 2 shortest paths
- Simple (cat → dog): A straightforward 3-step transformation
- Multiple Paths: Demonstrates multiple equally-short solutions
- Long Chain: A longer transformation sequence
- No Solution: Shows what happens when no valid path exists
- Complex Graph: Many intermediate words with intricate connections
The visualizer implements a layered BFS approach:
- Start from the begin word and explore neighbors level-by-level
- Track parent relationships to enable path reconstruction
- Stop when the target word is found at the current level
- Backtrack through parents to enumerate all shortest paths
- Pattern Buckets: Pre-computed neighbor lookup using wildcard patterns (e.g.,
h*t,*it) - O(26 × L × N) neighbor finding where L is word length and N is dictionary size
- Efficient cycle prevention during backtracking
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- SVG - Graph rendering
word-ladder-visualizer/
├── src/
│ ├── App.tsx # Main component with BFS logic
│ ├── examples.ts # Pre-loaded example scenarios
│ ├── main.tsx # React entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── package.json # Dependencies
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
└── tsconfig.json # TypeScript configuration
- Columns: Represent BFS levels (distance from begin word)
- Edges: Show parent-child relationships captured during BFS
- Green Rings: Highlight nodes that lie on at least one shortest path
- Blue Border: Marks the begin word
- Bold Text: Indicates the end word
Inspired by LeetCode Problem 126: Word Ladder II. This visualization helps understand the intricate details of layered BFS and backtracking for shortest path enumeration.