AlgoVisualizer

Explore the Live Demo >>

Report Bug | Request Feature

Table of Contents

• Overview
• Vision
• Mission
• Project Insights
• Features
• Why AlgoVisualizer
• Supported Algorithms
• Code Implementations
• Technologies Used
• Prerequisites
• Quick Start
• Usage Guide
• Project Structure
• Learning Journey
• Troubleshooting
• Getting Started
• Sync Your Fork with Upstream
• Analytics & Performance
• Educational Impact
• Contributors
• Documentation
• Project Stats
• Future Roadmap
• Acknowledgments
• Contact
• How to Contribute
• Contributing
• Code of Conduct
• Contribution Guidelines
• Suggestions & Feedback
• Show Your Support
• License
• Stargazers
• Forkers
• Project Admin

Overview

Welcome to AlgoVisualizer, a cutting-edge interactive web application designed to transform the way you learn and understand algorithms. Experience real-time visualizations of sorting, searching, and data structure algorithms with a beautiful, modern interface.

Live Link: https://algo-visualizer-amber.vercel.app

Vision

Transform algorithmic learning through interactive visualizations - empowering students and developers to master data structures and algorithms with hands-on exploration and real-time feedback.

Mission

Build the most comprehensive interactive algorithm visualization platform Provide step-by-step visual learning with multi-language code implementations Support educators with exportable content for classrooms and presentations Foster algorithmic thinking through interactive learning and community contributions

Project Insights

Stars	Forks	Issues	Open PRs	Closed PRs	Languages	Contributors

Features

Modern Interface

• Dark Theme: Sleek GitHub-inspired dark theme for comfortable learning
• Interactive Learning Platform: Intuitive badge-based navigation system
• Responsive Design: Seamless experience across desktop, tablet, and mobile devices
• Smooth Animations: Powered by Framer Motion for engaging user experience

User Input System

• ** Custom Data Visualization**: Upload your own arrays, graphs, and data structures
• ** Multiple Input Methods**: Text input, file upload (JSON/CSV/TXT), and sample data
• ** Smart Validation**: Real-time data validation with helpful error messages
• ** Format Support**: JSON, CSV, comma-separated values, and structured data
• ** Auto-Processing**: Automatic sorting for search algorithms, ID generation for graphs
• ** Sample Library**: Built-in examples for all algorithm types (arrays, graphs, trees)
• ** File Export**: Download sample data or save your custom datasets

Algorithm Visualizations

• Step-by-Step Visualization: Watch algorithms execute in real-time with clear visual feedback
• Interactive Controls: Play, pause, reset, and adjust speed of algorithm execution
• Performance Metrics: Track comparisons, swaps, iterations, and execution time
• Code Explanation: Detailed code walkthrough with syntax highlighting

Export & Recording

• ** High-Quality Snapshots**: Capture visualization states as PNG/JPEG images
• ** Video Recording**: Export complete algorithm runs as GIFs or MP4 videos
• ** Customizable Settings**: Adjust frame rates, quality, and export formats
• ** Educational Ready**: Perfect for presentations, tutorials, and documentation

Learning Tools

• Interactive Quiz System: Test your algorithm knowledge with built-in quizzes
• Algorithm Documentation: Comprehensive guides and explanations
• Contributors Section: Meet the amazing people behind the project
• About & Contact Pages: Learn more about the project and get in touch

Why AlgoVisualizer

• Learn by seeing: Watch algorithms execute step-by-step with clear visual feedback
• Multi-language support: Production-ready code in Java, Python, and C++
• Educational-first: Export recordings and screenshots for presentations
• Interview prep: Perfect for coding interviews with complexity analysis
• Modern stack: React 18, Vite, and Framer Motion for smooth experiences
• Open-source: Community-driven with contributions from developers worldwide

Exciting News...

This project is now an official part of GirlScript Summer of Code - GSSoC'25! We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow AlgoVisualizer! Let's make learning and career development smarter - together!

GSSoC is one of India's largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects while learning, collaborating, and growing together.

With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

• Improve their skills
• Contribute to impactful projects
• Get recognized for their work
• Receive certificates and swag!

I can't wait to welcome new contributors from GSSoC 2025 to this AlgoVisualizer project family! Let's build, learn, and grow together - one commit at a time.

Supported Algorithms

Sorting Algorithms (7 Total)

• Bubble Sort - Simple comparison-based sorting
• Insertion Sort - Efficient for small datasets
• Selection Sort - In-place comparison sorting
• Merge Sort - Divide and conquer approach
• Quick Sort - Efficient average-case performance
• Bucket Sort - Distribution-based sorting
• Radix Sort - Non-comparison integer sorting

Searching Algorithms (4 Total)

• Linear Search - Sequential search through elements
• Binary Search - Efficient search on sorted arrays
• Jump Search - Block-based search optimization
• Exponential Search - Combination of binary and unbounded search

Data Structures (6 Total)

• Stack - LIFO (Last In, First Out) operations
• Queue - FIFO (First In, First Out) operations
• Linked List - Dynamic linear data structure
• Binary Tree - Hierarchical tree structure
• Binary Search Tree - Ordered binary tree with search properties
• Graph Algorithms - Network and connectivity visualizations

Code Implementations

AlgoVisualizer provides ready-to-use code implementations for all visualized algorithms in multiple programming languages. This feature makes it perfect for learning, reference, and direct use in your projects.

Code Section Features

• ** Multiple Languages**: View implementations in Java, Python, and C++
• ** Language Switching**: Easy toggle between programming languages with a single click
• ** Copy-Ready Code**: All code is production-ready and can be directly copied
• ** Educational Focus**: Clean, well-commented code perfect for learning
• ** Algorithm Coverage**: Comprehensive coverage of all visualized algorithms

Available Code Categories

Sorting Algorithms

Complete implementations for all sorting algorithms including:

• Bubble Sort, Selection Sort, Insertion Sort
• Merge Sort, Quick Sort, Shell Sort
• Radix Sort, Bucket Sort, Heap Sort
• Tim Sort, Intro Sort, Counting Sort

Searching Algorithms

Efficient search implementations:

• Linear Search - Sequential element scanning
• Binary Search - Logarithmic search on sorted arrays
• Ternary Search - Three-way division search
• Jump Search - Block-based optimization
• Exponential Search - Range finding + binary search

Graph Algorithms

Network and connectivity algorithms:

• BFS (Breadth-First Search) - Level-order traversal
• DFS (Depth-First Search) - Deep exploration traversal
• Dijkstra's Algorithm - Shortest path finding
• Bellman-Ford Algorithm - Negative edge handling
• Floyd-Warshall Algorithm - All-pairs shortest paths

Linked List Operations

Complete linked list functionality:

• Insert Operations: Beginning, End, At Position
• Delete Operations: By Value, By Position
• Utility Operations: Search, Traverse, Reverse
• List Management: Size calculation, Clear operations

Other Algorithms

Additional algorithmic implementations:

• Morris Traversal, Dutch National Flag
• Kahn's Algorithm, Tarjan's Algorithm
• Tower of Hanoi, Kadane's Algorithm

How to Use the Code Section

1. Navigate to any algorithm page (Sorting, Searching, Graph, etc.)
2. Scroll to the "Code Implementation" section at the bottom
3. Select your preferred language using the language tabs (Java/Python/C++)
4. Copy the code directly from the syntax-highlighted code block
5. Use in your projects - all code is production-ready!

Code Quality & Standards

• ** Production Ready**: All implementations are tested and optimized
• ** Educational**: Clear variable names and logical structure
• ** Modular**: Easy to integrate into existing projects
• ** Well Documented**: Inline comments explain key concepts
• ** Efficient**: Implementations follow best practices for each language

Language-Specific Features

Java Implementations

• Object-oriented design patterns
• Generic programming with Collections
• Exception handling where appropriate
• Standard Java conventions and style

Python Implementations

• Pythonic code style and idioms
• List comprehensions and built-in functions
• Type hints for better code clarity
• PEP 8 compliant formatting

C++ Implementations

• Modern C++ features (C++11 and later)
• STL containers and algorithms
• Memory management best practices
• Template programming where beneficial

Code Complexity Information

Each code section includes detailed complexity analysis:

• ** Time Complexity**: Best, average, and worst-case scenarios
• ** Space Complexity**: Memory usage analysis
• ** Algorithm Description**: Clear explanation of how it works
• ** Use Cases**: Real-world applications and when to use each algorithm

Perfect for Learning

The code implementations are ideal for:

• Students learning data structures and algorithms
• Developers preparing for coding interviews
• ** Educators** creating teaching materials
• ** Self-learners** exploring algorithmic concepts
• ** Project Developers** needing quick algorithm implementations

Pro Tips

• Compare Languages: Switch between languages to see different implementation approaches
• Study Patterns: Notice how similar algorithms are structured across languages
• Experiment: Modify the code to understand how changes affect performance
• Practice: Use the visualizations alongside code to understand execution flow

Technologies Used

Frontend

• React 18.3.1 - Modern component-based UI framework
• Framer Motion 12.23 - Smooth animations and transitions
• React Router Dom 6.30 - Client-side routing
• Lucide React - Beautiful icon library
• CSS3 - Modern styling with custom properties and grid layouts

Development Tools

• Vite 5.0 - Fast build tool and development server
• ESLint - Code quality and consistency
• HTML2Canvas - Screenshot and image capture
• GIF.js - GIF creation and export
• RecordRTC - Video recording capabilities

Deployment & Analytics

• Vercel - Serverless deployment platform
• Vercel Analytics - User behavior and performance tracking

Prerequisites

Required:

• Node.js 20.11.1 or higher (LTS recommended)
• npm or yarn package manager
• Git (for cloning and contributing)
• Modern web browser

Optional:

• VS Code or preferred code editor
• React Developer Tools browser extension
• GitHub account (for contributions)

Windows users:

• Use Windows Terminal or PowerShell
• Ensure Node.js is in PATH

Visualization Logic Explained

The heart of this project is AlgorithmVisualizer.jsx. Here's how it works:

• State Management: Handles the array of numbers to be sorted and updates the UI as the algorithm progresses.
• Dynamic Bar Width: Bar size is now calculated dynamically based on screen size and the number of elements - so the visualizer is fully responsive.
• Sorting Algorithms: The algorithms (Bubble Sort, Merge Sort, Quick Sort, etc.) are imported from the src/algorithms/ folder. Each runs step-by-step with animated transitions.
• Styling: The visualization container and bars are styled in UnifiedVisualizer.css for a clean, responsive layout.

Troubleshooting

Installation Issues:

# Clear cache and reinstall
npm cache clean --force
Remove-Item -Recurse -Force node_modules
npm install --legacy-peer-deps

Development Server Issues:

# Check port conflicts
netstat -ano | findstr :5173
# Start with different port
npm run dev -- --port 3000

Performance Issues:

• Reduce array size for testing
• Close other browser tabs
• Use Chrome/Firefox for better performance
• Clear browser cache if visualizations aren't displaying

Quick Start

Prerequisites

• Node.js 20.11.1 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone https://github.com/RhythmPahwa14/AlgoVisualizer.git
   cd AlgoVisualizer

2. Install dependencies:

   npm install --legacy-peer-deps

3. Start the development server:

   npm run dev

4. Open your browser:

   Navigate to http://localhost:5173/ to view the application.

Build for Production

npm run build
npm run preview

Usage Guide

Home Page

• Interactive learning platform badge at the top
• Algorithm showcase with rotating examples
• Direct navigation to different algorithm categories

Sorting Algorithms

1. Load Your Data: Use the enhanced input panel to:
   • Enter numbers directly: 64, 34, 25, 12, 22, 11, 90
   • Upload a JSON file: [64, 34, 25, 12, 22, 11, 90]
   • Try sample data with different characteristics
2. Select your preferred sorting algorithm
3. Adjust visualization speed
4. Click "Start Sorting" to begin
5. Use export controls to capture or record the process

Searching Algorithms

1. Input Your Array: Load custom data (auto-sorted for searching):
   • Direct input: 5, 12, 19, 23, 45, 67, 89
   • File upload: CSV or JSON format
   • Sample sorted arrays available
2. Choose a searching algorithm
3. Specify the target value to search
4. Watch the step-by-step search process
5. Export visualizations for educational use

Graph Algorithms

1. Create Your Graph: Use the input panel to define:

   {
     "nodes": [{"id": 0, "label": "A"}, {"id": 1, "label": "B"}],
     "edges": [{"id": "0-1", "from": 0, "to": 1, "weight": 5}]
   }

2. Load sample graphs (simple, complex, weighted, cycle detection)
3. Select algorithm (BFS, DFS, Dijkstra)
4. Watch the traversal or pathfinding in action

Data Structures

• Explore interactive data structure operations
• Load custom tree/linked list data
• Visualize insertions, deletions, and traversals
• Understand structural relationships and properties

Custom Data Input Features

• Multiple Formats: JSON, CSV, TXT file support
• Real-time Validation: Instant feedback on data format
• Sample Data Library: Examples for every algorithm type
• Auto-correction: Missing IDs and labels auto-generated
• Error Guidance: Clear instructions for fixing data issues

Quiz Section

• Test your algorithm knowledge
• Multiple choice questions with immediate feedback
• Track your learning progress

Project Structure - AlgoVisualizer

Below is the complete folder structure of the AlgoVisualizer project:

AlgoVisualizer/
|- .github/                                  # GitHub-related configurations
|  |- ISSUE_TEMPLATE/
|  |- workflows/
|  `- pull_request_template.md
|- Backend/
|  `- src/
|     `- routes/
|- build/
|- docs/
|- public/
|  `- sample-data/
|- src/
|  |- algorithms/
|  |- assets/
|  |- components/
|  |- contexts/
|  |- data/
|  |- docs/
|  |- hooks/
|  |- integration/
|  |- pages/
|  |- recommendation/
|  |- routes/
|  |- searching/
|  |- services/
|  |- storage/
|  |- styles/
|  |- ui/
|  `- utils/
|- tests/
|- README.md
|- package.json
`- vite.config.js

Project Flowchart

Getting Started With Contributions

1. Fork the repository

# Fork the repository on GitHub, then clone your fork:
git clone https://github.com/rhythmpahwa14/AlgoVisualizer.git
cd AlgoVisualizer

2. Set Up Upstream

# Add the original repository as upstream:
git remote add upstream https://github.com/RhythmPahwa14/AlgoVisualizer.git
git fetch upstream

3. Create your feature branch

# Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix

4. Commit your changes

# Stage and commit your changes:
git add .
git commit -m "feature: add awesome feature"

5. Push to the branch & Create PR

# Push your branch to your fork and open a Pull Request:
git push origin feature/your-feature-name

Then go to AlgoVisualizer Pull Requests and create a PR with a clear description of your changes. For further information to contribute, visit our contributing guidelines

Sync Your Fork with Upstream

To keep your fork up-to-date with the latest changes from the original repository, follow these steps:

Initial Setup (One-time only)

# Add the original repository as upstream (if not already done)
git remote add upstream https://github.com/RhythmPahwa14/AlgoVisualizer.git

# Verify your remotes
git remote -v

Regular Sync Process

# Fetch the latest changes from upstream
git fetch upstream

# Switch to your main branch
git checkout main

# Merge upstream changes into your local main branch
git merge upstream/main

# Push the updated main branch to your fork
git push origin main

Before Creating a New Feature Branch

# Always sync first, then create your feature branch
git fetch upstream
git checkout main
git merge upstream/main
git checkout -b feature/your-new-feature

Handling Conflicts

If you encounter merge conflicts:

# Resolve conflicts in your editor
# After resolving, stage the changes
git add .
git commit -m "resolve merge conflicts"
git push origin main

** Pro Tip**: Always sync your fork before starting work on a new feature to avoid conflicts and ensure you're working with the latest codebase.

Code Style

• Follow existing code conventions
• Add comments for complex algorithms
• Ensure responsive design for all new features
• Test your changes across different devices

ScreenShots

Analytics & Performance

This application uses Vercel Analytics to track:

• Page views and user engagement
• Performance metrics and load times
• Feature usage patterns
• Geographic user distribution

All data is collected anonymously and helps us improve the user experience.

Educational Impact

Perfect for:

• Students learning data structures and algorithms
• Teachers creating interactive classroom materials
• Developers preparing for technical interviews
• Content Creators making educational videos and tutorials
• Bootcamps and coding schools

Project Admins

Meet our amazing project admins:

Rhythm

Sandeep Vashishtha

Project Maintainer

Meet our amazing project maintainer:

Aleena Harold Peter

Contributors

Meet our amazing contributors:

• Shitanshu Kumar
• Aditya Singh Rathore
• SHIVANI PRAJAPATI
• Aleenaharoldpeter

Want to see your name here? Contribute to the project!

Documentation

• Export Features Guide - Detailed guide on recording and exporting visualizations
• Contributing Guidelines - How to contribute to the project
• Algorithm Documentation - In-app algorithm explanations

Project Stats

• 15+ Algorithms implemented with visualizations
• 6 Data Structures with interactive operations
• Mobile Responsive design for all devices
• Modern Tech Stack with React 18 and Vite
• Export Capabilities for educational content creation

Future Roadmap

• Graph Algorithms: Advanced graph traversal and pathfinding
• Mathematical Algorithms: Number theory and computational mathematics
• Gamification: Achievement system and learning badges
• Internationalization: Multi-language support
• AI Integration: Algorithm recommendation system

Acknowledgments

• Thanks to all contributors of this project
• Special shoutout to GirlScript Summer of Code (GSSoC'25) for the amazing community and support!
• Built with dedication, collaboration, and lots of chai

Contact

• GitHub Issues: Report bugs or request features
• Email: Contact the maintainers for collaboration opportunities

How to Contribute

We love contributions from the community! Whether it's a bug report, a new feature, or a documentation improvement, we appreciate your help.

How to Contribute

1. Fork and clone the repository and create a new branch for your changes.
2. Make your changes and ensure everything is working as expected.
3. Submit a pull request with a clear description of your changes.

or check out Getting Started With Contributions

Found a Bug?

• Check the issue tracker to see if the bug has already been reported.
• If not, open a new issue and provide as much detail as possible.

Have a Feature Idea?

• We'd love to hear it! Open an issue to discuss your idea.

Contributing

We welcome contributions from the community! Here's how you can help:

Ways to Contribute

• Report Bugs: Found an issue? Let us know!
• Suggest Features: Have ideas for improvements?
• Improve Documentation: Help make our docs better
• Design Improvements: Enhance the user interface
• Performance Optimizations: Make the app faster
• Add Algorithms: Implement new visualization algorithms

Code of Conduct

Please refer to the Code of Conduct for details on contributing guidelines and community standards.

Contribution Guidelines

We love our contributors! If you'd like to help, please check out our CONTRIBUTE.md file for guidelines.

Thank you once again to all our contributors who has contributed to AlgoVisualizer! Your efforts are truly appreciated.

See the full list of contributors and their contributions on the GitHub Contributors Graph.

Show some by starring this awesome repository!

Suggestions & Feedback

Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!

Show Your Support

If you find AlgoVisualizer project helpful, give it a star! to support more such educational initiatives:

• Starring the repository
• Sharing on social media
• Telling your friends and colleagues
• Contributing to the project

License

This project is licensed under the MIT License - see the License file for details.

Stargazers

Forkers

Give us a Star and let's make magic!

Built with love by AlgoVisualizer Team

Rhythm and Contributors

Open an Issue | Star on GitHub | Live Demo

Back to Top

Ready to show off your coding achievements? Get started with AlgoVisualizer today!