banner

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(n2) - Quadratic time
  • O(n3) - Cubic time
  • O(2n) - 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(n2) comparison-based sorting
• Selection Sort: O(n2) in-place sorting
• Insertion Sort: O(n2) 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) to Huge (×ばつ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!