See algorithms come to life
An open-source, interactive platform for visualizing data structures and algorithms.
Built for learners, educators, and developers.
Website · Launch App · Documentation · Discord
OpenDSA is an interactive visualization platform that helps you understand how algorithms and data structures work through step-by-step animations. Whether you're:
- Learning algorithms for the first time
- Teaching computer science concepts
- Preparing for technical interviews
- Building educational content
OpenDSA makes complex algorithms visual and intuitive.
- Interactive Visualizations - Watch algorithms execute step-by-step with full control
- Multiple Categories - Sorting, searching, graphs, trees, and more
- Code Highlighting - See which line of code corresponds to each step
- Speed Control - Slow down or speed up animations
- Shareable URLs - Share specific visualization states with others
- Dark/Light Mode - Easy on the eyes, day or night
- Keyboard Shortcuts - Power-user friendly controls
- Open Source - Free forever, community-driven
- Bubble Sort
- Selection Sort
- Insertion Sort
- Quick Sort
- Merge Sort
- More coming soon...
- Linear Search
- Binary Search
- More coming soon...
- Arrays
- Linked Lists, Trees, Graphs coming soon...
Visit app.opendsa.dev to start visualizing algorithms immediately - no installation required.
# Clone the repository
git clone https://github.com/soloshun/opendsa.git
cd opendsa
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 in your browser.
OpenDSA is a monorepo built with Turborepo:
opendsa/
├── apps/
│ ├── app/ # Main visualizer application
│ ├── web/ # Marketing website
│ └── docs/ # Documentation site
│
├── packages/
│ ├── ui/ # Shared UI components
│ ├── algorithms/ # Algorithm implementations
│ ├── visualizers/ # Visualization components
│ ├── types/ # Shared TypeScript types
│ └── utils/ # Shared utilities
│
└── ...config files
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| Styling | TailwindCSS + shadcn/ui |
| Animations | Framer Motion + D3.js |
| State | Zustand |
| Monorepo | Turborepo |
| Package Manager | pnpm |
| Deployment | Vercel |
We welcome contributions from everyone! Whether it's:
- Adding new algorithm visualizers
- Fixing bugs
- Improving documentation
- Suggesting features
See our Contributing Guide to get started.
Want to add a new algorithm? Follow our step-by-step guide in the Contributing Guide.
- Node.js 18.17+
- pnpm 8+
# Install dependencies
pnpm install
# Start all apps in development mode
pnpm dev
# Build all packages and apps
pnpm build
# Run tests
pnpm test
# Lint code
pnpm lint
# Type check
pnpm type-check# Run only the main app
pnpm dev --filter=@opendsa/app
# Run only the website
pnpm dev --filter=@opendsa/web
# Run only the docs
pnpm dev --filter=@opendsa/docsSee our Roadmap for planned features.
Upcoming:
- Graph algorithms (BFS, DFS, Dijkstra)
- Tree visualizers (BST, traversals)
- Learning paths and tutorials
- Challenge mode
- More sorting and searching algorithms
- Discord: Join our community
- Twitter: @self.solo_shun⛓️💥❌
- GitHub Discussions: Ask questions
If you find OpenDSA useful, consider:
- Giving it a star on GitHub
- Sharing it with others
- Contributing to the project
- Sponsoring⛓️💥❌ the development
OpenDSA is MIT licensed.
Made with love by the Solo Shun for the OpenDSA community