Skip to content

Stepwise 1.0 — scrubbable algorithm visualizer

Choose a tag to compare

View all tags
@nirbhayagga nirbhayagga released this 04 Sep 23:11
· 7 commits to main since this release
v1.0.0
b2afb96

First release of Stepwise, an interactive algorithm visualizer. Every run is recorded as a sequence of immutable frames, so any algorithm can be played, paused, stepped in either direction, and scrubbed on a timeline — with the active pseudocode line, live variables, and step counters shown for every frame.

Live: https://stepwise.nirbhay.dev

Modules

  • Sorting — Bubble, Cocktail shaker, Selection, Insertion, Shell, Merge, Quick, Heap, Counting, Radix (LSD), plus a lockstep side-by-side compare view.
  • Pathfinding — Dijkstra, A*, Jump Point Search, Greedy best-first, BFS, Bidirectional BFS, DFS on a 4- or 8-connected grid with walls and weighted cells; five terrain generators (recursive backtracker, randomised Prim, randomised Kruskal, recursive division, random walls/weights); draw terrain with mouse or touch; compare view on mirrored grids.
  • Dynamic programming — 0/1 Knapsack, Longest Common Subsequence, Edit distance, Coin change, Longest Increasing Subsequence, Matrix-chain multiplication, with labelled tables and dependency highlighting.
  • Binary trees — BST insertion and deletion, AVL, Red–black, binary max-heap (insert and extract-max), and in-/pre-/post-/level-order traversals.
  • Graphs — BFS, DFS with discovery/finish times, Dijkstra, Prim, Kruskal with union–find labels, and Kahn's topological sort on generated planar-looking graphs.
  • Sandbox — write your own algorithm in JavaScript against a small drawing API; runs in a Web Worker so it can always be stopped.

Every algorithm page shows its complexity (best/average/worst, space, properties), a colour legend, and honest step metrics — wall-clock time is deliberately not reported, since it would measure the recorder rather than the algorithm.

Engineering

  • Vue 3 + TypeScript + Vite, fully static, no backend; frames stored as typed arrays for cheap scrubbing on large inputs.
  • Adding an algorithm is one file (metadata + pseudocode + generator) plus one registry entry.
  • Tested: node-side invariant checks for all 38 algorithms (sortedness, optimal-cost agreement, tree/heap/MST invariants, valid topological orders, pseudocode line ranges) and Playwright end-to-end tests including touch/mobile viewports; Lighthouse budgets in CI.
  • Ships as a static site (Cloudflare Workers) and as a container image: docker pull ghcr.io/nirbhayagga/stepwise:1.0.0.
  • Keyboard: Space play/pause, ←/→ step, Home/End jump, R reset.
Assets 2
Loading