Skip to content
A screenshot of PaFiVisu.

PaFiVisu - Pathfinding Algorithm Visualizer

Overview

PaFiVisu is a modern web-based pathfinding algorithm visualizer built with Vanilla JavaScript and Tailwind CSS. It provides an interactive 2D grid to visualize algorithms like Breadth-First Search, Depth-First Search, Dijkstra, and A* in real time with smooth animations.

Features

  • Interactive 2D Grid lets you add/remove walls and set start/end nodes with clicks.
  • Supports BFS, DFS, Dijkstra, and A* (Manhattan heuristic) algorithms.
  • Step-by-step animated visualization of node exploration and path-finding.
  • Speed control slider from fast to slow animation.
  • Random maze generation for maze and wall patterns.
  • Light/dark mode toggle for user comfort.
  • Responsive UI designed for both desktop and mobile.
  • Clean pastel theme design with Tailwind CSS styling.

Technology Stack

  • Vanilla JavaScript (ES Modules)
  • Tailwind CSS (via CDN)
  • HTML5

Usage

Open index.html directly in any modern browser; no build or server setup required. Use the control panel to set start/end points, add walls, select algorithms, adjust speed, generate mazes, and toggle themes.

Future Enhancements

  • Add customization for grid size and colors.
  • Build in new algorithms for extended learning.


GitHub: https://github.com/kc-codes42/PaFiVisu

About this Post

This post is written by Kaustubh Chauhan, licensed under CC BY-NC 4.0.

#pathfinding #algorithm #visualization #javascript #tailwindcss