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 an open source educational tool with 45 algorithms across five categories. Choose an algorithm and 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.
| Category | 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 | Lean agent guide: registries, contracts, ship-it ladder |
| docs/AGENTS_REFERENCE.md | Full agent lookup: inventories, architecture map, test catalog, checklists |
| 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.