An interactive web application for visualizing algorithms and data structures, built with SvelteKit 5 and TypeScript. This project provides real-time visual demonstrations of Big O complexity, sorting algorithms, and pathfinding algorithms.

• Interactive Algorithm Comparison: Visualize and compare time complexity of different algorithms
• Real-time Performance Tracking: Measure actual execution time using Web Workers
• Supported Complexities:
  • O(1) - Constant time
  • O(log n) - Logarithmic time
  • O(n) - Linear time
  • O(n log n) - Linearithmic time
  • O(n²) - Quadratic time
  • O(n³) - Cubic time
  • O(2ⁿ) - Exponential time
  • O(n!) - Factorial time
• Dynamic Charts: Visualize algorithm performance with Chart.js
• Predefined Examples: Auto-play feature to demonstrate all algorithms

• Bubble Sort: O(n²) comparison-based sorting
• Selection Sort: O(n²) in-place sorting
• Insertion Sort: O(n²) adaptive sorting
• Merge Sort: O(n log n) divide-and-conquer
• Quick Sort: O(n log n) efficient partitioning
• Visual Bars: Real-time animated bar chart representation
• Keyboard Controls: Quick access with keyboard shortcuts

• Dijkstra's Algorithm: Shortest path with weighted edges
• A Algorithm*: Heuristic-based pathfinding
• Breadth-First Search (BFS): Unweighted shortest path
• Depth-First Search (DFS): Graph traversal exploration
• Interactive Grid: Click to create walls/obstacles
• Drag & Drop: Paint walls by dragging
• Grid Sizes: Tiny (10×10) to Huge (70×150)
• Save/Load: Persist grid configurations locally

• Node.js 18+ or Bun
• npm, pnpm, or bun package manager

# Clone the repository git clone <repository-url> cd algo # Install dependencies npm install # or bun install

Start the development server:

npm run dev # or bun run dev # Open in browser npm run dev -- --open

The application will be available at http://localhost:5173

npm run build

Preview the production build:

npm run preview

• Framework: SvelteKit 5 with Svelte 5 runes
• Language: TypeScript
• Styling: Tailwind CSS 4 + DaisyUI 5
• Charts: Chart.js 4.3
• Math: Math.js 14
• Code Highlighting: svelte-highlight
• Markdown: MDsveX
• Deployment: Vercel Adapter
• Build Tool: Vite 6

algo/ ├── src/ │ ├── components/ # Reusable UI components │ │ ├── BigOChart.svelte │ │ ├── BigOOutputChart.svelte │ │ ├── Highlighter.svelte │ │ ├── KeyboardHandler.svelte │ │ ├── loading/ │ │ └── navbars/ │ ├── data/ # Data structures and algorithm logic │ │ ├── big-o.ts # Big O algorithm implementations │ │ ├── sort.ts # Sorting algorithms │ │ ├── path.ts # Pathfinding utilities │ │ ├── pq.ts # Priority Queue implementation │ │ ├── q.ts # Queue implementation │ │ ├── state.svelte.ts # Svelte 5 state management │ │ └── swap.ts # Array swap utility │ ├── services/ # Background services │ │ ├── worker.ts # Web Worker manager │ │ └── background.ts # Background task handler │ ├── routes/ # SvelteKit routes │ │ ├── +page.svelte # Big O visualization page │ │ ├── sort/ # Sorting algorithms page │ │ └── path/ # Pathfinding page │ └── app.css # Global styles ├── static/ # Static assets ├── package.json ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts 

• Alt + R: Randomize array
• Ctrl + Space: Play animation
• Delete: Stop animation

• Alt + S: Set start point
• Alt + E: Set end point
• Alt + R: Random obstacles
• Ctrl + Space: Play algorithm
• Ctrl + S: Save grid
• Ctrl + L: Load grid
• Delete: Clear results
• Shift + Delete: Reset grid

Heavy computational tasks run in background threads to prevent UI blocking, allowing smooth visualization even with large input sizes (1B+ operations).

Modern reactive state management using Svelte 5's new runes API ($state, $derived, $effect).

Custom implementations for efficient pathfinding algorithms (Dijkstra, A*).

Asynchronous rendering with setTimeout for smooth, step-by-step algorithm visualization.

This project is open source and available under the MIT License.

Contributions, issues, and feature requests are welcome!