DSA.lab is a modern, high-performance interactive visualizer for Data Structures and Algorithms. Built with Svelte 5, a Rust/WASM engine, and a playful neo-brutalist flat UI, it transforms abstract algorithmic concepts into step-by-step spatial animations and live execution metrics.
- ⚡ Rust & WebAssembly Trace Engine: Algorithm steps, state recordings, and permutations are processed using high-performance Rust compiled to WASM for microsecond execution logging.
- ⏯️ Step-by-Step Interactive Debugger: Fine-grained playback control with play/pause, scrubber timelines, step forward/backward, and customizable animation playback speeds.
- 🎨 Svelte 5 Runes Architecture: Reactive state management built on Svelte 5
$stateand$derivedprimitives for smooth, glitch-free UI updates. - 📊 Real-time Execution Profiler: Dynamic metric tracking including operation counts, array swaps/reads, recursion stack depth, and
$O(n)$ time/space complexity analysis. - 🎯 Custom Dataset Sandbox: Feed your own data arrays, edit weighted edge matrices, or manipulate binary search trees interactively.
- 💡 Integrated Theory & Code Viewer: Side-by-side view featuring Shiki-powered line-by-line code highlighting alongside theoretical breakdowns.
| Category | Algorithms / Structures | Visual Features | Status |
|---|---|---|---|
| 🔀 Sorting | Bubble, Selection, Insertion, Quick, Merge Sort | Real-time bar chart height swaps, pivot pointers, recursion tree recording | ✅ Completed |
| 🔍 Searching | Binary Search, Linear Search, Two Pointers | Step-by-step target comparisons, range pointers, index highlight | ⏳ In Progress |
| 🕸️ Graphs & Pathfinding | Dijkstra's, A* Search, BFS, DFS, Kruskal's MST | Interactive node grid matrix, edge weight manipulation, shortest-path highlights | ⏳ In Progress |
| 🌲 Data Structures | Binary Search Tree, Max Heap, Doubly Linked List, Stack & Queue | Node layout diagrams powered by @xyflow/svelte, dynamic pointer connections |
⏳ In Progress |
| 🧩 Dynamic Programming | Fibonacci Table, 0/1 Knapsack, LCS Visualizer, Tower of Hanoi | Live memoization grid filling, recursive call stack tree expansion | ⏳ In Progress |
| Layer | Technology | Description |
|---|---|---|
| Framework | SvelteKit / Svelte 5 | Modern full-stack Web framework with fine-grained reactivity |
| WASM Engine | Rust + wasm-pack |
Compiles algorithm recorders to WebAssembly (web target) |
| Styling | Tailwind CSS v4 | High-contrast dark theme with custom flat UI design system |
| Diagrams & Flow | @xyflow/svelte + elkjs |
Interactive node-based tree and graph visualizers |
| Syntax Highlighting | shiki |
Real-time code snippet rendering |
| Testing | Vitest & Playwright | Unit component testing and end-to-end browser workflows |
DSA.Lab/
├── rust-src/ # Rust algorithm engine (compiled to WASM)
│ ├── algorithms/ # Rust crate containing sorting & graph logic
│ └── marcos/ # Procedural macros for step recording
├── src/
│ ├── lib/
│ │ ├── components/ # UI design tokens, navbar, cards, theory panels
│ │ │ ├── learning/ # Complexity tracking & theoretical guides
│ │ │ ├── sections/ # Hero, CategoryGrid, Navbar, Footer
│ │ │ ├── ui/ # FlatCard, FlatButton, FlatBadge design tokens
│ │ │ └── visualizer/ # Canvas renderers, tree replayers, controls
│ │ ├── data/ # Educational content & algorithm definitions
│ │ ├── utils/ # Step recorders & tree layout utilities
│ │ └── wasm/ # Output directory for compiled WASM packages
│ └── routes/ # SvelteKit routing & page layouts
│ ├── +page.svelte # Main Landing Page & Feature Showcase
│ └── playground/ # Interactive Visualizer Workbench
├── static/ # Static assets & icons
├── package.json
├── svelte.config.js
└── vite.config.ts
Ensure you have the following installed on your environment:
- Node.js (v24+ recommended)
- npm or pnpm
- Rust Toolchain (
rustc,cargo) — Required for building WASM module - wasm-pack:
cargo install wasm-pack
git clone https://github.com/Raghava-Ch/DSA.Lab.git
cd DSA.Lab
npm installCompile the Rust algorithm engine into WebAssembly bindings for Svelte:
npm run wasm:buildStart Vite dev server with automatic WASM compilation:
npm run devOpen your browser and navigate to http://localhost:5173.
| Command | Action |
|---|---|
npm run check |
Run Svelte & TypeScript type checks |
npm run lint |
Run Prettier & ESLint linting verification |
npm run format |
Auto-format codebase using Prettier |
npm run test:unit |
Run unit tests using Vitest |
npm run test:e2e |
Run End-to-End browser tests with Playwright |
To test or build the app for production deployment:
# Build WASM and production bundle
npm run build
# Preview production build locally
npm run previewThis project is licensed under the AGPL License. See LICENSE for details.