Learn algorithms with clarity through interactive, real-time visualizations
Bayan (بيان) means clarity in Arabic
License: Elastic License 2.0 OR Commercial — see LICENSE and COMMERCIAL_LICENSE.md
Live sites
- Production (
main): bayanflow.com - Dev (
develop): dev.bayanflow.com
Bayan Flow is a client-side SPA with 45 algorithms across five modes. Pick a category, choose an algorithm, then step through or autoplay the visualization. Optional Python implementations run in the browser (Pyodide 0.27.5), with a complexity panel after completion and video export (horizontal or vertical MP4) when you want to share or study offline.
| Mode | Algorithms | What you get |
|---|---|---|
| Sorting | 14 | Random array, color-coded bars, ascending/descending order, comparison and non-comparison families |
| Pathfinding | 9 | Grid-based search on configurable presets; start/end, walls, open/closed/path highlighting |
| Searching | 9 | Array search on sorted data (linear through Fibonacci) with target highlighting; node–link graph search (DFS, BFS-on-graph)—separate from the pathfinding grid |
| Tree Traversals | 6 | Binary-tree traversals with visit order, queue/stack context, and Morris in-place walk |
| Graph Algorithms | 7 | Node–link and matrix views: topological sort, MST (Kruskal/Prim), SCC (Tarjan/Kosaraju), Floyd–Warshall; preset scenarios for edge cases |
Shared
- Manual vs autoplay, four speed presets, mobile swipe (manual), fullscreen, optional visualization sound
- Python editor + run, built-in and custom test cases, pseudocode, algorithm insight panel
- Internationalization (English, French, Arabic with RTL), light/dark theme
- In-browser video export with orientation choice, watermark, optional export audio, and a complexity segment at the end
- Landing page with live GitHub stats; public roadmap timeline
Details, stack notes, registry wiring, and contributor workflows live in the docs linked below—not duplicated here.
Requirements: match the engines field in package.json (Node and pnpm).
git clone https://github.com/ayoub3bidi/bayan-flow.git
cd bayan-flow
pnpm install
pnpm devThen open the local URL printed in the terminal.
| Doc | Use it when you… |
|---|---|
| AGENTS.md | Agent-oriented project map: registries, contracts, tests, CI |
| docs/DEVELOPMENT.md | Run lint/tests/build, follow patterns, add an algorithm or language |
| docs/ARCHITECTURE.md | Understand routes, hooks, data flow, video export, testing layout |
| CONTRIBUTING.md | Contribute: branch targets develop, CI, PR template, standards |
Pull requests should target develop, not main. Read CONTRIBUTING.md and use .github/PULL_REQUEST_TEMPLATE.md when you open a PR.
Dual-licensed under Elastic License 2.0 (see file for terms) and a commercial option for hosted or OEM use — COMMERCIAL_LICENSE.md. The Bayan Flow name and logo are covered in TRADEMARK.md.